WebGL

流动效果在3D领域有着广泛的应用场景，如上图中医学领域可通过3D的流动直观的观察人体血液的流动，燃气领域可用于监控管道内流动的液体或气体的流向、流速和温度等指标。 http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 如今企业数据中心机房普遍面临着设备散热的问题，采用冷热通道方案可大大提高数据中心的散热能力，充分有效利用机柜和机房的空间，因此在电信的3D机房监控领域，也常需要借助流动的效果，对机房冷热通道系统进行监控。 Hightopo 的 HT for Web 作为3D客户端呈现解决方案，今天介绍的重点不在于采集这些指标，而在于如何应用HT的预定于3D元素来实现流动的效果。在《 透过WebGL 3D看动画Easing函数本质 》这篇介绍的基于 HT for Web 的动画，是通过改变模型的位置方向来实现动画，而本文要介绍的方案则是保持模型位置方向不动，而是通过控制模型的贴图参数uvScale和uvOffset实现流动的控制，这样实现的好处是没有增加过多的3D图元模型，同时可借助2D的图片融合到3D进行呈现，毕竟美工改变2D图片，或程序员内存中动态改变2D图片，都会比动态改变3D模型来的容易且轻量。 该例子主要应用了ht.Shape类型对象，该对象在 ht.graph

今天这篇 迟到的 文章，来自我的同事Aviva。 去年SAP C/4HANA发布之后，SAP的从业者们可能或多或少都读过一些来自SAP官方渠道，比如公众号" SAP天天事 "发布的一些文章，提到了" 企业数字化转型 ", " 智慧企业 "等概念。那么这些概念如何落地呢？请看本文介绍的SAP成都研究院数字创新空间做出的一个尝试。 Jerry在去年Aviva的一篇文章 Hyperledger Fabric on SAP Cloud Platform 里就曾经介绍过她，不过Jerry也是最近才得知她"英文"名字的由来："Aviva"这个单词，在 希伯来语 里的意思是" 美好的春天 ", 而这篇文章的作者Aviva，中文名字里正好有一个春字。 为什么说是迟到的文章呢？因为这个创新案例早在去年上半年就结束了，然而作为同事们评价的" 美腻与智慧的化身 "，" 云时代女王 "，" 大家前沿技术的引路人 ", Aviva工作上总是有很多事情要忙，因此直到项目做完的半年后，才能空出档期完成这篇文章。 此外，Aviva的正文里所有关于案例的截图都是从SAP成都研究院数字创新空间另一位女同事，**Zhang Jane(张琦)**制作的演示视频中截取的，这里表示感谢。 Jane制作的关于这个创新案例的展示视频： <iframe frameborder="0" width="677" height="380

HTML5 WebGL 在三维中的应用，已经发展的如火如荼，使其在三维组态（工业控制）方面也变得简单易行！ 三维组态软件提高了工业控制的管理效率，让工业控制的资源管理、风险管控得到很大的改善。 传统的三维组态一般都是本地应用， 该案例使用的是基于浏览器B/S架构下的三维组态的应用。 该案例模拟的是一个油田简单的工业控制场景， 模型大致包括 油井、分离器、 加热炉、天然气、外输泵。 还包括管路流动、流动方向。 描述了采油、加工、 输出的全过程。 制作模型 第一步要做的就是建模，设计组使用3D建模工具 3d max或者c4d 进行油田设备模型的建模。建模后导出后缀为obj或者gltf格式文件，这两种格式是我们三维渲染引擎支持最好的文件格式。 建模后的所有模型文件，最终会放到后端的模型库，模型库的管理目录，如下图所示： 需要制作的模型包括油井、分离器、加热炉、天然气、外输泵，如下图所示， 加载模型 加载模型可使用引擎模型的加载函数，进行模型加载，如obj模型加载，如下代码所示： new mono.OBJMTLLoader().load( 'youjing.obj', 'youjing.mtl', '', (node)=> { node.type = 'obj'; box.addByDescendant(node); }, ); 如加载一个油井模型，因为加载模型是一个异步的过程

前言 　　许多世纪以来，风力机同水力机械一样，作为动力源替代人力、畜力，对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现，使风机发电机的发展缓慢下来。 70年代初期，由于“石油危机”，出现了能源紧张的问题，人们认识到常规矿物能源供应的不稳定性和有限性，于是寻求清洁的可再生能源遂成为现代世界的一个重要课题。风能作为可再生的、无污染的自然能源又重新引起了人们重视。 现在我希望可以通过这个风机 demo 使风力发电机的各个功能近距离的展示给大家，使大家能更了解风力发电机。 本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。 demo 链接： https://hightopo.com/demo/fan3d-magic/ 风机主要功能介绍 效果： 　　 周围环境功能： 　　一. 风速值。 　　虚拟一个风速值，风速值会影响风机的发电效率和变桨系统的变化。 　　 二. 数据统计 。 　　 　　环境温度、机舱温度、齿轮箱温度、风速的图形百分比会随着时间发生改变。 　　 三. 环境监测 。 　　 　　左边对风机的各个参数实施了监测，右面是风速变化的折线图。 　　 四. 数据监测 。 　　 　　 　　风机在发电的过程中发生的异常情况，发生的故障部位及故障发生的时间。异常信息的收集有利于人们进行异常分析以及异常处理。 　　五.

#楔子 最近要做一个基站站点的可视化呈现项目。 我们首先尝试的是三维的可视化技术来程序，但是客户反馈的情况是他们的客户端电脑比较差，性能效率都会不好，甚至有的还是云主机。 因此我们先做了一个性能比较极致的3Ddemo，如下图所示： 为了能够尽可能的性能最优，所以想了各种性能优化手段。当然效果上也会有折扣，这个demo与我们本身的一些产品比如3D机房等相比较，效果上面肯定有了很大的差距。不过性能方面还是很不错的。 然而，很不幸，客户在拿到demo测试之后，不满意...。性能还算凑合，但他们还觉得效果不够酷。 配置很低，又要性能高、又要效果炫。这只能化为一句话： 似乎陷入了绝境... 然而 绝处往往逢生，绝处往往有新的希望、新的机会。 2.5D的思想火花 突然想到的是2.5D，这是一种伪3D效果，但是只能体现一个镜头角度的显示效果，不能实现镜头的旋转效果。 其实在很早的时候，我们就有一些2.5D的雏形的东西，比如分层拓扑图和2.5D节点。分层拓扑图甚至可以追溯到Java时代。如下图所示： 把之前的2.5D源代码拿过来读一遍。读了之后，总的思路：主要通过拼凑三个平行四边形来模拟这种3D的效果，技术没有体系。 这种思路对于对象的位置定位和对齐会比较难，开发难度本身也比较大，另外要实现一些好的效果，难度也比较大，要知道客户对于效果的要求并不低。 因此需要想出新的技术思路，最好是有成体系的思路

前言 2019 年 VR , AR , XR , 5G , 工业互联网 等名词频繁出现在我们的视野中，信息的分享与虚实的结合已经成为大势所趋， 5G 是新一代信息通信技术升级的重要方向，工业互联网是制造业转型升级的发展趋势。本文所讲的 VR 是机械制造业与设备的又一次交流，当技术新星遇上制造潮流，无疑将成为制造业，工控业等行业数字化转型的重要驱动力。 “5G + VR + 工业互联网” 必将成为新的一年不变的话题，如何将当前工业中遇到的问题通过 虚拟现实 结合起来，让我们可以更近的去交流，去感受技术带给我们的变化。在今年苹果的发布会上，相信大家都知道苹果的 5G 手机没有问世，说明 5G 的应用和发展还处在快速发展的阶段，但是手机结合 AR 功能的 APP 已经早就问世， 5G 的速度加上 AR, VR 的身临其境，让我们感受到的不仅仅是技术的革新，更是让我们感受到技术在不同领域的实际应用场景，我相信 2020 年新的一年必定是 “5G + VR + 工业互联网” 应用的又一个新的开始，本文接下来所讲的就是 HT for Web 结合 WebVR 开发的具体应用案例。 系统预览 预览地址： 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统 http://www.hightopo.com/demo/vr-training/ VR 拆解还原 VR 操作 VR

在很多可视化项目中，会用到不少的小图标或者简单的chart图表之类的。 实际项目开发中，往往是让设计人员把相关的图标做成矢量图或者位图，交给开发人员，开发人员直接使用到实际的项目中去。 事实上，一些简单的图标，也可以直接使用代码来绘制生成。 通过代码来生成的优势在于： 一是不占用太多的空间，太多的图片资源对于项目的加载会有性能瓶颈。 二是，通过代码生成的图标，可以通过配置属性来实现不同的风格，甚至可以做类似一键皮肤更换的效果 三是，通过代码生成的图标，可以实现动态的效果，实时数据驱动动效。 当然，代码生成的缺点是，不是什么图标都可以通过代码来实现，特别是一些特别丰富效果的图标，代码实现的难度挺大。 因此，需要根据实际情况，选择最适合的解放方案，不可一概而论。 在我们的产品拓扑大屏编辑器中，有一个图元编辑功能。图元编辑功能，可以通过配置实现代码生成图标的效果。 下面，我们示意一些图标的制作。 图标1 上面这个图标，外面几个部分都是圆形和圆环，都是比较容易制作的，比较难的是中间的一个类似温度计的部分。 温度计的下面部分是一个圆形。 也是比较简单的部分，而上面是一个上面细下面粗的形状。 对于这个部分，我们可以使用基础形状梯形来制作： 首先在页面上面拖出一个梯形，然后调整期属性为填充，边框大小为1，边角样式为 “圆角”，梯形形状为“等腰梯形”： 调整梯形的上下边的长度，得到如下的图形：

前言 2019 年 VR , AR , XR , 5G , 工业互联网 等名词频繁出现在我们的视野中，信息的分享与虚实的结合已经成为大势所趋， 5G 是新一代信息通信技术升级的重要方向，工业互联网是制造业转型升级的发展趋势。本文所讲的 VR 是机械制造业与设备的又一次交流，当技术新星遇上制造潮流，无疑将成为制造业，工控业等行业数字化转型的重要驱动力。 “5G + VR + 工业互联网” 必将成为新的一年不变的话题，如何将当前工业中遇到的问题通过 虚拟现实 结合起来，让我们可以更近的去交流，去感受技术带给我们的变化。在今年苹果的发布会上，相信大家都知道苹果的 5G 手机没有问世，说明 5G 的应用和发展还处在快速发展的阶段，但是手机结合 AR 功能的 APP 已经早就问世， 5G 的速度加上 AR, VR 的身临其境，让我们感受到的不仅仅是技术的革新，更是让我们感受到技术在不同领域的实际应用场景，我相信 2020 年新的一年必定是 “5G + VR + 工业互联网” 应用的又一个新的开始，本文接下来所讲的就是 HT for Web 结合 WebVR 开发的具体应用案例。 系统预览 预览地址： 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统 http://www.hightopo.com/demo/vr-training/ VR 拆解还原 VR 操作 VR

前言 垃圾分类，一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。垃圾在分类储存阶段属于公众的私有品，垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源，垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看，大致都是根据垃圾的成分、产生量，结合本地垃圾的资源利用和处理方式来进行分类的。到2019年6月25日，生活垃圾分类制度将入法。一套应用于工业物联网的智能一体化的垃圾分类机械臂将随之而来，由此，我应用 HT for Web 的图型化编辑工具打造了一款形象生动的例子： Garbage classification ，也借此机会与大家一起分享和学习。 代码实现 （注：gif 的上传大小有限，实际效果与还请参考 demo 链接） 首先，我应用已经精心布置好的 3D 场景，为了有更好的操作体验感，我们要从它的基本设置开始： gv.setMovableFunc(() => { return false }) // 禁止拖动 gv.getWireframe = (d) => { d.s('wf.visible', false) } // 隐藏选中边框 gv.setEye([583, -212, -789]) // 设置眼睛 gv

**前言** 2019 年 **VR**, **AR**, **XR**, **5G**, **工业互联网**等名词频繁出现在我们的视野中，信息的分享与虚实的结合已经成为大势所趋，**5G** 是新一代信息通信技术升级的重要方向，工业互联网是制造业转型升级的发展趋势。本文所讲的 **VR** 是机械制造业与设备的又一次交流，当技术新星遇上制造潮流，无疑将成为制造业，工控业等行业数字化转型的重要驱动力。**“5G + VR + 工业互联网”**必将成为新的一年不变的话题，如何将当前工业中遇到的问题通过**虚拟现实**结合起来，让我们可以更近的去交流，去感受技术带给我们的变化。在今年苹果的发布会上，相信大家都知道苹果的 **5G** 手机没有问世，说明 **5G** 的应用和发展还处在快速发展的阶段，但是手机结合 **AR** 功能的 APP 已经早就问世，**5G** 的速度加上 **AR, VR** 的身临其境，让我们感受到的不仅仅是技术的革新，更是让我们感受到技术在不同领域的实际应用场景，我相信 2020 年新的一年必定是 **“5G + VR + 工业互联网”** 应用的又一个新的开始，本文接下来所讲的就是 **[HT for Web](https://hightopo.com/)** 结合 [**WebVR**](https://developer.mozilla.org