前言 摘要：2D 的俄罗斯方块已经被人玩烂了，突发奇想就做了个 3D 的游戏机，用来玩俄罗斯方块。。。实现的基本想法是先在 2D 上实现俄罗斯方块小游戏，然后使用 3D 建模功能创建一个 3D 街机模
这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的 Demo，也没有解释。。。所以我今天得任务就是完全剖析这个例子！ 本文例子：http://www.hightopo.cn/demo/3drotate/3d-rotate.html 首先让我们来看下这个案例： 我们来看
这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着
作为企业的发展，通过运营的有效管理，增加收入、降低成本，取得更好的经济效益，是核心所在，在电信企业同样如此。电信企业的利润大体上是由业务收入和成本决定的，而收入和成本又可进一步分别分解表达为不同的形式，其中在每用户平均收入（ARPU）的比对上，可以很清楚地分析出各个时间段的流量对比，并且相应地制定出对策。实现上可以通过 2D 的形式来展示相应的流程，而 Hightopo（以下简称 HT ）的 HT for Web 产品上提供了丰富的 2D 组态 可帮助我们快速上手，本系统的 ARPU 分析图也是通过 HT 搭建而成。
构建 3D 的场景除了创建模型，对模型设置颜色和贴图外，还需要有灯光的效果才能更逼真的反映真实世界的场景。这个例子我觉得既美观又代表性很强，所以拿出来给大家分享一下。 本例地址：http://www.
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果： http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了衍生出
构建 3D 的场景除了创建模型，对模型设置颜色和贴图外，还需要有灯光的效果才能更逼真的反映真实世界的场景。这个例子我觉得既美观又代表性很强，所以拿出来给大家分享一下。
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图：http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年
该文介绍了如何基于Web Workers实现3D拓扑自动布局，通过创建一个简化的3D场景，将Box2D物理引擎与HTML5 Canvas元素相结合，并利用Web Workers提高渲染性能。在示例代码中，创建了一个包含多个节点的3D场景，并通过调用Box2D的API实现节点的创建、物理运动和碰撞检测。通过将渲染任务转移到Web Workers，从而提高了渲染性能和响应速度。
Qt图形视图框架(Qt Graphics View Framework)支持开发快速高效的2D矢量图形场景。场景可以包含数百万个对象，每个对象都有自己的功能和行为。通过使用 PyQt 的图形视图，您可以在 Python 中访问这个高性能的图形层。无论您是将矢量图形视图集成到现有的 PyQt 应用程序中，还是只是想要一个强大的 Python 矢量图形界面，Qt 的图形视图都是您正在寻找的。
GPU渲染流水线，是硬件真正体现渲染概念的操作过程，也是最终将图元画到2D屏幕上的阶段。GPU管线涵盖了渲染流程的几何阶段和光栅化阶段，但对开发者而言，只有对顶点和片段着色器有可编程控制权，其他一律不可编程。如下图：
一套完整的可视化操作交互上，必不可少 2D/3D 的融合，在上期我们介绍了有关 3D 场景的环视漫游、巡视漫游以及动画效果，还包括了冷站场景、热站场景以及智慧末端的实现原理，本期主要介绍关于 2D 图纸面板的动画效果以及面板视频的嵌入。通过 2D/3D 融合的体验，达成场景数据可视化的直观体现以及面板动画交互体验的舒适体验。
前言 发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇，所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明，我写了一个简单的例子，基于机房工控的服务器上设备的
为了实现一个基于HTML5的场景小游戏，我采用了HT for Web来实现，短短200行代码，我就能实现用“第一人称”来操作前进后退上下左右，并且实现了碰撞检测。 先来看下实现的效果： http://
随着数字化，工业互联网，物联网的发展，我国加油站正向有人值守，无人操作，远程控制的方向发展，传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式，即采用数据采集与监控系统 SCADA。SCADA 系统的推广使用，大大提高了我国加油站的监控效率，本文所讲的则是通过对加油站的可视化建模，结合 HT 的 3D 可视化以及 2D 监控面板来实现对加油站的可视化监控。三维可视化监控系统是将三维的可视化技术和数据采集与监控技术融合，充分发挥了两种技术的核心优势，并通过数据库进行数据共享，共同构成一种全新的 SCADA 系统。该系统中也结合了海康的摄像头监控，通过调用海康提供的摄像头地址，实时的将视频流传输到前台，并且展示在 2d 页面上。在真实的系统中，每个加油机以及加油罐都有自己对应需要展示的数据，这个可以根据自己需要展示的内容来设计 2d 面板，之后根据后台传来的数据进行展示。数据采集与监控系统通过各类的传感器实时采集监控对象的各类数据，上传数据库并实时共享给三维可视化技术搭建的监控对象的三维可视化模型及场景，最后通过监控系统直观的展示出来，极大的提高了监控对象数据的表达能力和工作人员的工作效率。
“互联网+”思维让数据的搜集和获取更加便捷，并且随着大数据的深度开发和应用，数据分析预测对于提升用户体验有非常重要的价值，同时也为不同行业、不同领域的合作提供了更广阔的空间。传统的发电企业是一个资金、技术密集但又相对独立封闭的行业，例如沙角A电厂，拥有优质的码头、安信检修、车队、技术人才等资源，未来是否能借助互联网走出去，或者其他一些先进的管理、技术能否通过互联网走进来互融都是可以探索的。工业互联网的典型应用，也不都是在机器上，包括照明、智能交通、智能机器应用、工厂控制、厂房应用、状态监控，以及其他农业、电力设备上的应用，互联网+的应用会越来越广，传统的电力企业还是需要跟紧步伐。
简单来说OpenGL API是一套接口，通过这套接口我们可以在那些支持OpenGL的机器上对图形硬件设备特性进行访问，例如在电脑屏幕或手机屏幕上进行图形绘制。也就是说OpenGL一个进行图形开发的规范，而它的实现是硬件设备厂商提供的，而这些实现通常被称为“驱动”，它们负责将OpenGL定义的API命令翻译为硬件指令。
在电力、油田燃气、供水管网等工业自动化领域 Web SCADA 的概念已经提出了多年，早些年的 Web SCADA 前端技术大部分还是基于 Flex、Silverlight 甚至 Applet 这样的重客户端方案，在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案也是有不少应用，近些年随着 HTML5 的流行，加上移动终端以及浏览器对 HTML5 支持的普及，越来越多新项目开始采用真正纯 HTML5 的方案，更具体的应该说是大数据量应用性能高于 SVG 的 Canvas 方案，已经逐渐成
在电力、油田燃气、供水管网等工业自动化领域 Web SCADA 的概念已经提出了多年，早些年的 Web SCADA 前端技术大部分还是基于 Flex、Silverlight 甚至 Applet 这样的重客户端方案，在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案，也有着不少应用。近些年随着 HTML5 的流行，加上移动终端以及浏览器对 HTML5 支持的普及，越来越多新项目开始采用纯 HTML5 的方案，更具体的应该说是大数据量应用性能高于 SVG 的 Canvas 方案，已经逐渐成为当今 Web SCADA 前端技术的首选标配方案。
既然是学习音视频技术，那必然少不了渲染这个环节，OpenGL就是进行图形渲染的一个重要角色。
1、什么是 shader shader 中文名为着色器，全称为着色器程序，是专门用来渲染图形的一种技术。通过 shader，我们可以自定义显卡渲染画面的算法，使画面达到我们想要的效果。小到每一个像素点，大到整个屏幕。通常来说，程序是运行在 CPU 中的，但是着色器程序比较特殊，它是运行在 GPU 中的，所以当我们在编写 shader 程序的时候，实际上也是在编写 GPU 程序。在 OpenGL 中，对应的着色器语言是 GLSL（OpenGL Shading Language）。通过 shader 编程，我们
Qt Graphics View 用于管理交互大量定制的 2D 图形对象，提供了可视化显示对象的视图 widget，并支持缩放和旋转功能。Graphics View 使用 BSP（二元空间划分）树形，可非常快速地找到图元对象，因此即使是包含百万个图元对象的大型场景，也能实时显示。Graphics View框架包含了一个事件传播构架，允许与场景中的图元进行交互。比如：可以处理键盘事件，鼠标移动、松开、双击事件，并且可以跟踪鼠标移动。Graphics View视图本身是一个基于item的M-V架构的框架，它的每一个组件都是一个item。
FigureCanvas 和 Renderer 解决和用户界面（如 wxPython）或绘图语言（如 PostScript）间通信的所有细节。而Artists 解决figure，text，lines这些元素的呈现和布局相关的所有细节。通常95%的时间都会花在 Artists 上。
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的
GLkit是苹果对OpenGL/openGl ES的一次封装，目的是为了简化苹果开发者使用成本,它的出现加快了开发者的开发速度。类似在OPenGL中出现的固定着色器的概念。但是只要是固定的就会有限制，无法进行自定义编程（顶点着色器，片元着色器）
描绘真实的物理世界时，3D的场景能给人更加直观的感受。然而在数字孪生应用中，除了描绘物理世界，很多时候也需要去描绘逻辑世界，表达对象之间的逻辑拓扑关系，比如组态工艺流程、网络拓扑关系等。在对面这些需求时，2D的表现方式显然更为清晰。搭建3D园区和3D城市，可以使用ThingJS的工具，做一些3D可视化的开发。那面对这些2D场景时，该用什么工具呢？
今天又返回好好地消化了一下我们的数据容器 DataModel，这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事
把物体的数学描述以及与物体相关的信息转换为屏幕上用于对应位置的像素及用于填充像素的颜色这个过程成为光栅化
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏。 3D呈现固然比2D方式更直观，但如果摆放图元布局却比2D麻烦，毕竟增加了一个维度，手工布局不如以前2D手工操作方便，因此3D的自动布局功能比2D凸显其重要性。最近玩了玩HT的弹力自动布局插件挺有意思，特别在平板上Touch方式拖拽三维空间图元节点时，对我这种控制欲较强者很有满足感。 弹力布局也不是啥
本文介绍了HT for Web在软件研发中的拓扑图组件在研发管理、团队协作、自动化部署、监控告警等方面的应用，并提供了丰富的案例和解决方案。
HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 HTML5 例子，还没体验过的同学可以点击 http://www.hightopo.com/guide/readme
突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。 demo地址： http://www.hightopo.com/demo/Wall3D/index.html 先来看看效果图： 这个例子最基础的就是最外层的盒子了，所以我们先来看看如何实现它： var box = new ht.CSGBox(); dataModel.add(bo
本文介绍了如何利用HTML5 WebGL实现一个json工控风机叶轮旋转的demo，包括相关html、css、js代码及其运行效果。通过在页面中设置一个canvas，绘制一个json数据模型，并利用Echarts绘制出一个风机叶轮旋转的动画效果。同时，通过设置页面的全局样式，将页面中的各个元素按照设计图的位置和样式进行展示，并在浏览器中呈现出一个动态效果的风机叶轮旋转展示页面。
在 OpenGL 中，设置好顶点数据，设置好着色器，调用 drawcall 函数，3D 图形就被绘制出来了。
OpenGL首先我们从字面意思来理解:Open Graphics Library,开放的图形库，图形库自然是处理图形的，所以简单来说OpenGL就是用来处理图形的一个三方库。 稍微技术流一点，作如下解释：是用于渲染2D,3D矢量图形的跨语言、跨平台的应用程序编程接口(API）。
QuadTree四叉树顾名思义就是树状的数据结构，其每个节点有四个孩子节点，可将二维平面递归分割子区域。QuadTree常用于空间数据库索引，3D的椎体可见区域裁剪，甚至图片分析处理，我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数，从而提高游戏刷新性能，本文例子基于HT for Web的Canvas拓扑图和WebGL的3D引擎组件，通过GraphView和Graph3dView共享同一数据模型DataModel，同时呈现QuadTree算
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？这时候就需要借助专业的3ds Max工具来建模了，然后通过3ds Max工具将模型导出成obj文件，然后再项目中引用导出的obj文件，这样就能成功的使用上复杂的图元了。 在《HT图形组件设计
病毒的爆发并不单单只有中国这人口大国，纵观整个地球，2020 年，还有很多国家也在“水深火热”中努力进行着“自救”。美国，近几个月来爆发了非常致命的流感--乙型流感病毒，据相关数据统计，到目前为止全美范围已经有超 1300 万人感染了该病毒， 12 万人住院治疗，死亡人数可能高达 6600 多人；波兰，2019 年 12 月 31 日至 2020 年 1 月 4 日，该国卢布林省和大波兰省发生 8 起 H5N8 亚型高致病性禽流感，此次疫情可能导致多达 4 万只禽类被宰杀，方圆3公里多达 35 万只家禽受到威胁；中国，农业农村新闻办公室 2 月 1 日发布，湖南省邵阳市双清区发生一起家禽 H5N1 亚型高致病性禽流感疫情，养殖户存栏肉鸡 7850 只，发病死亡 4500 只，疫情发生后，当地按照有关预案和防治技术规范要求切实做好疫情处置工作，已扑杀家禽 17828 只，全部病死和扑杀家禽均已无害化处理......
该文介绍了如何利用QuadTree算法实现2D碰撞检测，并使用HT for Web的QuadTree组件进行实现。
该文介绍了如何利用QuadTree算法实现2D碰撞检测，并使用HT for Web的GraphView组件进行可视化。作者还介绍了如何为HT for Web的图形组件添加自定义样式，包括为图形组件设置颜色、边框等属性。最后，作者通过一个碰撞检测的实例演示了如何使用HT for Web的图形组件实现2D碰撞检测，并提供了相关代码和注释。
QuadTree四叉树顾名思义就是树状的数据结构，其每个节点有四个孩子节点，可将二维平面递归分割子区域。QuadTree常用于空间数据库索引，3D的椎体可见区域裁剪，甚至图片分析处理，我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数，从而提高游戏刷新性能，本文例子基于HT for Web的图形引擎，通过GraphView和Graph3dView共享同一数据模型DataModel，同时呈现QuadTree算法下的2D和3D碰撞视图效果：htt
这几天在做CAD二次开发，涉及到几何类，略有不解，后又发现ObjectARX开发指南，所以翻译下官方的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
