netcy的专栏

本文介绍js中数组的at函数，属于比较简单的知识普及性文章，难度不大。首先，我们可以思考如下一个问题，如果要获取一个数组的最后一个元素(这是很常用的操作)，我们应该怎么做？ 相信大部分人能够想到的代码是这样的：嗯，这是最常用的获取数组最后一个元素的方式，依此类推获取倒数第二个，第三个的方式类似。 当然除了这种方式之外，还有其他的方式，比如：先通过slice获取后面一个元素的数组，然后通过下标0获取最后一个元素。在比如通过pop获取最后一个元素：但是 通过pop的方式会改变数组本身，所以一般不建议用。无

业务平台EasyBPM（易实管理软件）有一个功能是模板打印的功能。就是可以使用一个docx格式的模板，输出一个docx格式的单据的文档。打印的逻辑是先从服务端获取模板，如果没有对应的模板，就提示先上传模板：遇到的问题是，按照提示上传模板之后，再次打印依然会报没有模板。缓存的问题通过思考发现，可能的原因是因为使用了缓存。 后端使用Node + Express进行静态资源的发布。 通过Express发布的资源，默认会开启缓存。所以当第一次去获取模板资源的时候，由于此时没有对应的模板，此时会跳转到

最近有读者加我微信咨询这个问题：其中的效果是一个折线路径动画效果，如下图所示：要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。如果用canvas来绘制，其中的难点在于：需要计算子路径，这块计算比较复杂。（当然是可以实现的）渐变的计算， 从图中可以看出，动画的子路径是有渐变效果的，如果要分段计算渐变也很复杂。本文介绍一种思路，使用clip方法，动态移动clip的区域，来达到近似的效果。具体怎么做。绘制灰色路径绘制路径的代码比较简单，此

体积光介绍首先，我们要确认一下什么是体积光。体积光通俗来说是我们能看见的”光路“，并不是所有灯光都会形成体积光效果，它是光照到大气中粒子散射后得到的效果（丁达尔效应）。我们有时候还会看到一束束光散开的效果，这是光在传播过程中遇到了障碍物（比如穿过云层、树木的光束）导致的。根据物理原理，我们知道体积光是粒子散射的结果，如果我们用体素的思想来考虑体积光，我们所看到的某一点处的体积光颜色是眼睛到当前点的射线上，光路中所有粒子散射光的叠加。体积光经常模拟Sun Shaft(太阳散射)的效果。常用实现思路常

径向模糊简介径向模糊，是一种从中心向外呈幅射状，逐渐模糊的效果。 因此径向模糊经常会产生一些中心的发散效果，在PS中同样也有径向模糊的滤镜效果。 径向模糊通常也称为变焦模糊。径向模糊（Radial Blur）可以给画面带来很好的速度感，是各类游戏中后处理的常客，也常用于Sun Shaft等后处理特效中作为光线投射（体积光）的模拟。在游戏中，常常使用径向模糊来模拟一些运动的动感效果。如鬼泣4中的场景切换特效，和一些技能打击特效；赛车游戏也尝用来模拟动感模糊，如狂野飙车，极品飞车等。 径向模糊还是实现体积光

这场疫情打乱了所有人的节奏，让很多人期望的自由工作变成了现实，过上了穿着睡衣开视频会，躺床上撸猫回邮件的生活。 但是在家办公到底怎么样呢？在家远程办公和传统办公相比，有劣势也有优势。 远程办公的最大优势在于，可以解除物理的隔阂更加灵活的处理各种情况。 比如这次疫情，没法去公司办公，通过远程办公至少可以极大的减少损失。从2月3号开始，我们开始在家里面远程办公。 到现在为止，我们团队已经工作了快...

在很多可视化项目中，会用到不少的小图标或者简单的chart图表之类的。实际项目开发中，往往是让设计人员把相关的图标做成矢量图或者位图，交给开发人员，开发人员直接使用到实际的项目中去。事实上，一些简单的图标，也可以直接使用代码来绘制生成。通过代码来生成的优势在于：一是不占用太多的空间，太多的图片资源对于项目的加载会有性能瓶颈。二是，通过代码生成的图标，可以通过配置属性来实现不同的风格，甚至...

HTML5 WebGL 在三维中的应用，已经发展的如火如荼，使其在三维组态（工业控制）方面也变得简单易行！ 三维组态软件提高了工业控制的管理效率，让工业控制的资源管理、风险管控得到很大的改善。传统的三维组态一般都是本地应用， 该案例使用的是基于浏览器B/S架构下的三维组态的应用。该案例模拟的是一个油田简单的工业控制场景， 模型大致包括油井、分离器、 加热炉、天然气、外输泵。还包括管路流...

楔子最近要做一个基站站点的可视化呈现项目。 我们首先尝试的是三维的可视化技术来程序，但是客户反馈的情况是他们的客户端电脑比较差，性能效率都会不好，甚至有的还是云主机。 因此我们先做了一个性能比较极致的3Ddemo，如下图所示：为了能够尽可能的性能最优，所以想了各种性能优化手段。当然效果上也会有折扣，这个demo与我们本身的一些产品比如3D机房等相比较，效果上面肯定有了很大的差距。不过性能方面还...

前几天周六的时候，公司组织了团建活动。 租了一辆中巴车到景区，大家集中在公司楼下上车。其中一个人不小心迟到了（在此还是建议大家不要迟到，要多守时哈），最终我们决定先走。然后人事小姑凉和师傅商量，是否可以到指定的地点，让那名迟到的同事打车和我们汇合，我们接上他，然后再去目标地点。师傅说可以，然后说了，从三环下来的地方的xxx路，哪儿有个酒店啥的。可以在哪儿等下。 因为大家都不熟悉，所以人事小...

0x01项目背景本项目是一个机器人制证的可视化系统。 其中包括制证设备的显示和监控，质检设备的显示和监控；同时也包括AGV机器人的显示和监控。 制证设备用于制作证书，质检设备用于合格检查，而AGV机器人用于运输；AGV机器人还需要监控电量和充电情况和行进位置。0x02设计稿接到项目之后，大家就开始开心(谁知道呢)得干活了。 首先就是要出设计稿，设计小姐姐在经过和客户多次的交涉讨论之后，交付了...

0x00 楔子最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。 效果如下图所示：首先当然是上模型，设计人员跟进。 有了相关的模型，使用我们开发的一个编辑器，通过模型拖拽编辑，管路编辑等等，很快就能够编辑出以上的场景：一切进展的都很顺利。 直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。0x01 寂静...

需求这是从一个项目中提取的需求。 大致的思路是： 通过获取后端的一系列人员的点位信息，在前端模拟人员的一段时间内的行动过程。我们的开发人员首先想到的思路是，把获取的点位列表信息，每两个取取来，组成一条直线路径。然后基于每一条直线路径，创建一个动画Animate对象。（Animate是我们内部的一个管理/播放动画的类）。其中创建每一个Animate动画的代码大致如下：new Animate(...

转换任意颜色为RGBA格式前端编程过程中，经常会遇到要把各种颜色格式（比如 “red”、“#F00”、“#FF0000”等）转换成RGBA格式，搜索网络也可以发现一堆的解决方案：此处介绍一种方法： 通过canvas的像素获取方法，来获取任意颜色的RGBA数值。大致步骤如下：首先创建一个尺寸为1*1的canvas，并获取canvas的绘制上下文ctx设置ctx.fillStyle为指定的颜...

最近遇到了一个需求，是要去掉一张图片的黑色背景，如下图所示：如果使用OPENCV ，加上一些图像处理的算法，是可以实现去除任何背景的。但是由于这个需求就是去掉黑色背景，感觉没必要用到哪些比较复杂的算法。于是打算在网络上搜索了一下，开始没有搜搜到，倒是搜索到一篇用ps如何来去掉黑色背景的思路：去掉图片黑背景输出为透明png(算法和工具)但是里面主要是说用PS的操作，而且里面说的原理，也不是很...

我们知道，清空canvas画布内容有以下两个方法。第一种方法是cearRect函数：context.cearRect(0,0,canvas.width,canvas.height)第二种方法就是用原值重新设置一下canvas的宽（或者高）canvas.width = canvas.width// or canvas.height = canvas.height第二种方法可以起作用，...

本文适合JavaScript初学者。一元正号介绍一元正号运算符(+)位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。 尽管一元负号也能转换非数值类型，但是一元正号是转换其他对象到数值的最快方法，也是最推荐的做法，因为它不会对数值执行任何多余操作。转换字符串一元正号可以用于转换数值字符串为数字，比如如下代码：+"123"//12...

如果要把一个对象的线框绘制出来，一般的方法是先绘制实体对象，然后通过gl.LINES的模式再绘制一遍模型，此时模型的线框就会被绘制出来。gl.LINES的问题此方法需要绘制两遍对象，因此会造成性能的损失。 使用此种方式绘制线框的时候，深度值偏移是必要的。那是因为，线条的光栅化过程和多边形的光栅化过程并不是完全一致的。这就导致绘制一个多边形的边和绘制多边形本身，相同位置的片元，其深度值可能...

这是一个项目中遇到的实际需求。场景是一个智能仓库管理系统，场景里面有直线和曲线构成的环穿轨道。环穿轨道上面会有小车运动，后台推动小车的两个点位A和B，其中A和B都会在轨道上面，前端需要根据这两个推送点，自动播放小车从A点沿轨道到B点的动画。下面是项目截图：项目中使用的是二次贝塞尔曲线，所以本文也主要以二次贝塞尔曲线为讲解重点。要实现上述动画，需要首先确定A点和B点在曲线上面的比例值ta和tb...

前言在WebGL1中，纹理的图片和采样信息都是写在纹理对象之中.采样信息告诉GPU如何去读取贴图上图片的信息。如果我们希望从同一个图片多次读取像素信息，但是每次读取的时候使用的过滤方式不一样, 此时我们需要创建两个不同的纹理对象。"你说这样是不是很烦啊"WebGL: “。。。”采样器对象在WebGL2中，引入了采样器对象，使用采样器对象，可以把纹理的过滤方式封装到采样器...

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

在最近给客户交付的一个项目中，客户反映系统跑一段时间就会奔溃掉。我的第一直觉就是可能发生了内存泄漏。复现bug为了能够让bug复现，我让开发的小伙，先把模拟系统在本地跑起来。要知道，bug复现是很重要的。bug复现，能够让开发人员直观的感受到bug发生的过程。另外如果bug不能复现，程序员的反应可能是这样的：我的这边是好的呀，没有什么问题。哎呀，是不是你的使用方法不对啊。看到...

什么是断点操作（Breakpoint action）做前端开发的小伙伴，或许对这个断点操作不是很熟悉。不过你要是问其他语言（比如C，C++ ，C #等）的开发者，他们应该都挺熟悉断点操作，这种断点操作在诸如XCode或者Visual Studio的IDE中都会有提供。以下一段话来自知乎断点操作 （Action） 的意义是设置追踪点 （Tracepoint）。追踪点相当于是一种临时的有...

上一篇已经讲述了通过面模拟线条时候，每一个顶点的顶点数据包括：端点坐标、偏移量、前一个端点坐标、后一个端点坐标，当然如果我们通过索引的方式来绘制的话，还包括索引数组，下面的代码通过传递一组线条的端点数组来创建上述相关数据： ```bk.Line3D = function (points,colors){     this.points = points;     this.colors =...

基本思路上一篇文章简单介绍了WebGL绘制Line的bug，这一篇文章会讲述解决这个问题的work around。上一篇文章结尾简单提了下解决的思路，就是通过三角形来模拟线条。以两个端点组成的线段为例，绘制line的时候只用指定两个端点，如果通过三角形来模拟一条线段，则至少需要两个三角形，如下图：两个三角形模拟的线段因此要绘制一条线段，则需要六个顶点，两个三角形；当时从上图中，可以看出有些顶点是共...

熟悉WebGL的同学都知道，WebGL绘制模式有点、线、面三种；通过点的绘制可以实现粒子系统等，通过线可以绘制一些连线关系；面就强大了，通过面，我们可以绘制我们想绘制的所有的三维对象。一切看起来都很完美，perfect。然而，不幸的是，WebGL在绘制线条的时候，存在一个缺陷，那就是在一些机器的一些浏览器上面（应该是大多数情况下）线宽只能设置为1，而不能设置成其他的值。通过网址http://alt...

在实际的项目中，我们经常会有如下的需求：从一个map中获取某key的值，如果发现对应的key的值为null，则为该key创建一个值(一般为初始值)，然后把这个值存回到map中，代码如下：var value = map[key];if(value == null){ value = ""; map[key] = value;}但是总感觉这段代码很恶心，为啥，太啰...

最近公司的一个开发项目，后端用的是nodejs。这两天需要打包给客户演示，就让公司一个小伙把之前3D机房的打包工具移植过来。打包之后，发现原本在开发环境下的跑的好好的项目，不能访问了。出现项目的首页不能访问的问题：can not get file index.htmlexpress.static问题出在哪儿？nodejs后端的用了express，index.html是一个静态文件。我们知道，通过...

最近的一个客户项目中，简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难，上手就可以做,写两个for循环。原始绘制方法首先定义了很多Circle对象，在遍历循环中调用该对象的draw方法。代码如下：for (var i = 0; i < column; i++) { for (var j = 0; j < row; j++) { var cir...

最近的一个项目中的需求要对一堆元素进行排序，排序的依据是元素在页面上面的坐标位置，然后按照顺序给所有元素一个编号。如下图所示： 排序并编号做这个需求的是一个新入职的小伙，思考摸索了很久，他也没有找到合适的方法。不得不说，部分新入职的小伙的思维能力还是有待提高啊。其实这个问题很简单，就是对元素按照坐标进行排序。从图上可以看出规则是x坐标优先于y坐标，具体来说，两个元素a和b：如果a...

本文适合JavaScript初学者阅读剩余操作符之前这篇文章JavaScript展开操作符(Spread operator)介绍讲解过展开操作符。剩余操作符和展开操作符的表示方式一样，都是三个点 '…',但是他们的使用场景会不同。剩余参数定义函数的时候，如果函数的参数以… 为前缀，则改参数是剩余参数（rest parameter）。剩余参数表示参数个数不确定的参数列表。在函数被...

本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。偏导数函数（HLSL中的ddx和ddy，GLSL中的dFdx和dFdy）是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令（函数）。在WebGL中，使用的是dFdx和dFdy，还有另外一个函数fwidth = dFdx + dFdy。偏导数计算在三角形栅格化期间，GPU会同时跑片元着色器的多个实例，但并不是...

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

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

记得几年前，我的一个同事J需要做一个动画功能，大概的需求是实现球面上一个点到另外一个点的动画。当时他遇到了难度，在研究了一个上午无果的情况下，咨询了我。我就告诉他说，你先尝试一个简化的版本，就是实现圆环上一个点到另外一个点的动画。如下图所示，要实现点A插值渐变到B的动画过程。image.png同事J的解决方案是，先计算出来A点和圆心O的连线和水平方向（与X轴平行)的夹角1，再计...

本文介绍JavaScript的展开操作符(Spread operator)...。本文适合ES6初学者。你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串。展开运算符（spread）是三个点（…）,可以将可迭代对象转为用逗号分隔的参数序列。如同rest参数的逆运算。用于数组以数组为例，首先创建一个数组，consta=[1,2,3],...

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

楔子最近一个项目，需要绘制双线的效果，双线效果表示的是轨道（类似铁轨之类的），如下图所示：负责这块功能开发的小伙，姑且称之为L吧，最开始是通过数学计算的方式来实现这种双线，也就是在原来的路径的基础上，计算出两条路径。但是这个过程的计算算挺复杂，而是最终实现的效果很耗性能，性能损耗估计主要在于路径的计算上。优化技巧后来他找到我来看这个问题，我在分析了项目背景的情况下，给予了一个简单的...

最近公司系统需要做一个app，经过调查研究，决定用html5 + phonegap技术来开发，一方面对于html5技术已经很熟悉（虽然之前android也有所研究，但是还是在html5方面倾注精力更多），而且公司的项目pc端本身就是B/S的，移植到手机端比较容易，研发成本也比较低；另外基于html5技术的开发，可以做到跨平台，同时跑在android 和iOS两大系统没有问题。app需要用到一些