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的动画过程。

我们都知道在canvas 可以通过clip来实现剪裁功能，其步骤一般是先设置要裁剪的区域（路径），然后通过ctx.clip()的实现裁剪，裁剪之后，后续的绘制只能在裁剪的区域显示效果，比如如下一段代码，实现了一个圆形裁剪：

负责这块功能开发的小伙，姑且称之为L吧，最开始是通过数学计算的方式来实现这种双线，也就是在原来的路径的基础上，计算出两条路径。但是这个过程的计算算挺复杂，而是最终实现的效果很耗性能，性能损耗估计主要在于路径的计算上。

做这个需求的是一个新入职的小伙，思考摸索了很久，他也没有找到合适的方法。不得不说，部分新入职的小伙的思维能力还是有待提高啊。其实这个问题很简单，就是对元素按照坐标进行排序。从图上可以看出规则是x坐标优先于y坐标，具体来说，两个元素a和b：如果a.x > b.x 则 a > b,如果a.x < b.x 则 a < b,如果a...

恩，很简单嘛，可以回家睡觉了。等等，客户要求绘制的极限是10万个，而且每次绘制不能卡顿。先看下绘制10万个圆圈的时间是多久，用console.time 统计绘制时间：

实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染一个物体时从CPU到GPU的通信时间。实例数组是这样的一个对象，使用它，可以把原来的的uniform变量转换成attribute变量，而且这个attribute变量对应的缓冲区可以被多个对象使用；这样在绘制的时候，可以减少webgl的调用次数。

使用此种方式绘制线框的时候，深度值偏移是必要的。那是因为，线条的光栅化过程和多边形的光栅化过程并不是完全一致的。这就导致绘制一个多边形的边和绘制多边形本身，相同位置的片元，其深度值可能并不一样。

在实际的项目中，我们经常会有如下的需求：从一个map中获取某key的值，如果发现对应的key的值为null，则为该key创建一个值(一般为初始值)，然后把这个值存回到map中，代码如下：

在WebGL1中，纹理包括2D纹理和立方体纹理，在实际的使用中，如果纹理的图片是宽和高是2的幂，可以自动生成纹理的mipmap。除此之外，还可以通过gl.texImage2D函数独立指定纹理的每个mipmap的级别。因此，这会导致一个一般的编程人员不易觉察的问题，这涉及到显卡底层驱动。简单来说，就是会导致驱动程序无法在绘图之前确...

在使用WebGL绘制图形的时候，大多数情况下，绘制一个图形的时候，其各个图元都是相连的。 但是在一些情况下，我们需要绘制图元不相连的图形，如果绘制的模式是gl.TRAINGLES或者gl.LINES，也是可以达到的，但是如果绘制的模式是gl.TRAINGLE_STRIP，gl.TRAINGLE_FAN，gl.LINE_STRIP，gl.LINE_LOOP的时候，就没法在一次绘制...

abc{1220}cde{2222}def{cccc}替换成abc{1}cde{2}def{3}也就是把{}匹配到的内容，用匹配的索引替代掉。

使用了顶点缓冲技术后，绘制效率有了较大的提升。但是还有一点不尽如人意，那就是顶点的位置坐标、法向量、纹理坐标等不同方面的数据每次使用时需要单独指定，重复了一些不必要的工作。WebGL2提供了一种专门用于解决此问题的对象——顶点数组对象（VAO）。本节将介绍顶点数组对象。