随着《中国制造2025》的提出，制造业迎来了全新的发展机遇。更多的企业将制造业信息化技术进行广泛的应用，如 MES 系统、数字孪生以及生产管理可视化等技术的研究应用，已经成为社会各界共同关注的热点。

最近有客户咨询我们三维可视化编辑器，说看到我们三维可视化编辑器做的案例，也想实现自己水厂净水处理流程这块的可视化展示。想通过这种真实的三维可视化展示，进行线上销售，以便成交更多的客户，减少疫情对自己的影响。通过沟通交流，客户提出了几个难题，想让我们根据他们的水厂场景图片，做一些三维可视化场景的dem...

智能制造芯片车间生产线可视化

最近有读者加我微信咨询这个问题：其中的效果是一个折线路径动画效果，如下图所示：要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。如果用canvas来绘制，其中的难点在于：需要计算子路径，这块计算比较复杂。（当然是可以实现的）渐变的计算， 从图中可以看出，动画的子...

在2d图形可视化开发中，经常要绘制对象的选中效果。 一般来说，表达对象选中可以使用边框，轮廓或者发光的效果。  发光的效果，可以使用canvas的阴影功能，比较容易实现，此处不在赘述。

在三维场景中，除了用逼近真实的模型代表现实中的设备、标识物外，通常还会使用一些动画来表示模型在现实中一些行为和作用。常见的动画比如路径动画、旋转动画、发光动画、流动动画等。本文将为大家介绍几种常用的路径动画。首先，最简单的自然是直线路径动画。

其中涉及到的设备有冷却塔、水泵、螺杆机、离心机 、分水器（集水器）、阀门，以及管路。其中冷却塔，水泵，螺杆机，离心机都有停机/开机状态，开机状态下要有叶轮转动效果。

有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。比如

随着物联网技术的不断发展，推动了园区的智能化管理与服务不断升级。科技的进步激发市场诉求，智能化园区的市场规模也越来越大。在经济快速发展和政府政策的推动下，伴随着国内智慧城市建设步伐的加快，园区规划建设整体性越来越强，更加注重各种基础配套设施，以更好的服务促进高新产业的发展。尤其是注意产业园区的信...

随着国内制造业企业的高速发展，再加上政策支持，高效的生产模式和先进的管理方式越来越受到企业重视。更多的企业将工业信息化技术进行广泛的应用，比如MES系统、数字孪生以及生产管理可视化等技术的研究应用。近期我们团队利用自主开发的大屏编辑器与3D编辑器结合做了一个智能实验室三维可视化平台项目。在这个智能实验...

webgl智慧楼宇发光效果算法系列之高斯模糊如果使用过PS之类的图像处理软件，相信对于模糊滤镜不会陌生，图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。在我们的智慧楼宇的项目中，要求对楼宇实现楼宇发光的效果。 比如如下图所示的简单楼宇效果：楼宇发光效果需要用的算法之一就是高斯模糊。高斯模糊简介高...

canvas可视化效果之内阴影效果楔子在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。 可以参考 之前的一篇文章 《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》效果图中的轨道，就同时存在外发光和内发光效果的效果。外发光效果我们知道外发光效果是很容易实现的，直接通过设置阴影效果即可达到。比...

近日公司接到一个轨道系统的需求，需要将地铁线路及列车实时位置展示在大屏上。既然是大屏项目，那视觉效果当然是第一重点，咱们可以先来看看项目完成后的效果图。可以看到中间线路里轨道的效果是非常炫酷的，那么本文的主要内容就是讲解如何在canvas上绘制出这种效果。

canvas可视化效果之内阴影效果楔子在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。 可以参考 之前的一篇文章 《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》效果图中的轨道，就同时存在外发光和内发光效果的效果。外发光效果我们知道外发光效果是很容易实现的，直接通过设置阴影效果即可达到。比...

前面一篇文章 <webgl智慧楼宇发光效果算法系列之高斯模糊>,   我们知道了 高斯模糊的本质原理，就是对每个像素，按照正态分布的权重去获取周边像素的值进行平均，是一种卷积操作。

开发编辑器的主要目是为了提高团队内部项目的交付效率，目前 两个编辑器都引用到团队的相关项目中。当然，编辑器目前也支持和其他公司的项目合作。 下面是几个项目的示例图：

径向模糊，是一种从中心向外呈幅射状，逐渐模糊的效果。 因此径向模糊经常会产生一些中心的发散效果，在PS中同样也有径向模糊的滤镜效果。 径向模糊通常也称为变焦模糊。径向模糊（Radial Blur）可以给画面带来很好的速度感，是各类游戏中后处理的常客，也常用于Sun Shaft等后处理特效中作为光线投射（体积光）的模拟。

在之前这篇文章，WebGL 单通道wireframe渲染我们介绍了webgl如何实现单通道wireframe的效果。本篇文章就是在此技术原理基础之上，来实现发光的wireframe效果。要实现发光的效果所谓的发光的效果，就是颜色的渐变。 渐变越慢，发光的效果越明显，渐变越快，发光效果越不明显。其实wireframe本身就是在两种颜色之间进行渐...

实际应用中通常要计算两个颜色的之间插值结果，比如计算“red”和“green” 之间的插值。 比较通用的方法就是首先通过《通过canvas转换颜色为RGBA格式及性能问题》中提到的方法把颜色转换成RGBA格式，由于RGBA格式是都是数字的形式，可以直接进行插值运算。大致的代码如下：

最近一个小伙遇到一个需求，客户需要绘制圆点样式的线条。 大致效果是这样的： 思路一：计算并使用arc填充 他自己实现了一种思路，然后咨询我有没有更好的思路。 先看看他的思路是如何实现的，大致代码如下： {代码...} 通过上面的简单的示意代码可以看出，绘制逻辑是通过计算直线之间的点位，然后再相应的点上面绘制圆...

大家都知道，我们主要提供的是前端可视化研发的，包括2d拓扑可视化，2d电力，工业组态可视化，三维可视化，大屏可视化等。大约效果是长这个样子吧：

前几天有客户打电话过来，说想了解我们公司的编辑可视化产品，最近在网上看到过我司编辑可视化的相关解决方案，感觉挺不错也想给自己的工业流程进行一个定制的编辑可视的管理平台。经过沟通，了解到该客户属于钢铁冶炼工业，想通过一个编辑可视化管理软件进行自己钢铁冶炼工艺业务流程的编辑和管理，提高产品竞争力，节...

该项目用于高速公路监管。高速公路监管包括：高速公路的设备运行情况，设备维护情况，道路维护情况；交通流量分析，交通拥堵分析，拥堵溯源；事故分析，事件信息发布等。

定义函数的时候，如果函数的参数以… 为前缀，则改参数是剩余参数（rest parameter）。剩余参数表示参数个数不确定的参数列表。在函数被调用时,该形参会成为一个数组,数组中的元素都是传递给该函数的多出来的实参的值。

在很久很久以前，盘古开辟了天地，他的头顶着天，脚踩着地，最后他挂了。他的毛发变成了森林，他的血液变成了河流，他的肌肉变成了大地。。。。。。卡！ 哦，不对，在很久很久以前，你属于我，我拥有你。你还有没有程序员的自我修养啦。不好意思，串戏了，下面进入。。。主题本文适合对webgl、计算机图形学、前端可视化...

所有的事情都会有一个起因。最近产品上需要做一个这样的功能：给一些图形进行染色处理。想想这还不是顺手拈来的事情，早就研究过图形染色的技术。于是我把之前写好的两种算法发给了小伙伴，让他参照实现，第一种算法是操纵像素、第二种使用了图像合成：globalCompositeOperation。所有的事情都可能会有意外，写程序更是...

偏导数函数（HLSL中的ddx和ddy，GLSL中的dFdx和dFdy）是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令（函数）。在WebGL中，使用的是dFdx和dFdy，还有另外一个函数fwidth = dFdx + dFdy。

一元正号运算符(+)位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。 尽管一元负号也能转换非数值类型，但是一元正号是转换其他对象到数值的最快方法，也是最推荐的做法，因为它不会对数值执行任何多余操作。

你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串。展开运算符（spread）是三个点（…）,可以将可迭代对象转为用逗号分隔的参数序列。如同rest参数的逆运算。

记得几年前，我的一个同事J需要做一个动画功能，大概的需求是实现球面上一个点到另外一个点的动画。当时他遇到了难度，在研究了一个上午无果的情况下，咨询了我。我就告诉他说，你先尝试一个简化的版本，就是实现圆环上一个点到另外一个点的动画。如下图所示，要实现点A插值渐变到B的动画过程。