netcy的专栏

上面分享的三维地图大屏。echart使用json解析生成地图projection投影svg 解析生成三维地图模型动态材质修改贴图的offset和repeat算法等经纬度定位，双线性差值三维的三维坐标转平面坐标的投影算法最终多个技术的融合，做出了文章开头的效果。其中比较难的是中间三维地图的生成和效果优化方案，如果有类似需求的读者可以参考。如果你有好的经验，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。

本文介绍了通过代码生成楼层的功能，其中用到了PathCubeGeometry，ExtrudeGeometry，BSP相关技术，其中PathCubeGeometry由于需要自己构建，会稍晚难点;ExtrudeGeometry是threejs本身就存在的对象，BSP也可以找到开源的包可以使用。如果你有好的思路，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。

本文所示只是一个demo级别得尝试，如果要做一个强度得路面编辑器系统，可能要考虑得还有很多，比如多车道效果，更重得衔接形状等等。这在后续得产品中会持续强化相关功能。如果你有好的思路，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。...

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

楔子在上一篇文章 《# [https://juejin.cn/post/7074771064286347301] webgl未使用独立显卡报告》发表后，有读者在公众号给我发了一段评论，如下图所示：我通过找电脑测试，发现确实有这个情况，而我之前的文章没有提到这种情况：“在windows下面进行图形设置”，所以做个补充。设置步骤对于前面下面把详细的设置步骤说明下：右键在windows桌面点击，选择显示设置：选择显示设置，如下图可以看到google chrome如果没有看

大多数情况下，三维模型使用PNG，JPG作为模型的贴图，当然为了性能优化，有时候也会使用压缩贴图来提高渲染效率和较少GPU压力。今天提供一种新的思路，使用SVG作为模型的贴图，可以达到动态调整图片精度的效果。使用svg作为贴图的思路，有两种。#直接作为贴图直接使用贴图，其实和png jpeg的图片没有多少差别，加载的贴图效果，最终也会比 较模糊。 大致代码如下： var cube2 = new mono.Cube(105 * 10,1094 * 10,1);

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

在2d图形可视化开发中，经常要绘制对象的选中效果。 一般来说，表达对象选中可以使用边框，轮廓或者发光的效果。  发光的效果，可以使用canvas的阴影功能，比较容易实现，此处不在赘述。绘制边框绘制边框是最容易实现的效果，比如下面的图片要绘制边框，只需要使用strokeRect的方式即可。效果如下图所示：这个代码也很简单，如下所示： ctx1.strokeStyle = "red"; ctx1.lineWidth = 2; ctx1.drawImage(im

前言最近做了一个制冷系统的三维组态监控系统。大致的效果如下图所示：其中涉及到的设备有冷却塔、水泵、螺杆机、离心机 、分水器（集水器）、阀门，以及管路。其中冷却塔，水泵，螺杆机，离心机都有停机/开机状态，开机状态下要有叶轮转动效果。因此我们需要给这几种模型，在开机状态下做叶轮转动的动画。分离模型发方案我们知道一般模型的动画主要是模型的位置，旋转角度等发生变化。位置旋转角度的变化是比较容易实现的一种动画。直接调用模型的setPosition方法和setRotation方法即可。因此要做叶轮的旋转

canvas多重阴影发光效果前言在一个项目中，客户提了一个发光的效果，效果图如下：阴影有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。比如ctx.shadowColor = 'rgba(255,0,0,1)'; ctx.shadowBlur =10; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fil

webgl智慧楼宇发光系列之线性采样下高斯模糊前面一篇文章 <webgl智慧楼宇发光效果算法系列之高斯模糊>, 我们知道了 高斯模糊的本质原理，就是对每个像素，按照正态分布的权重去获取周边像素的值进行平均，是一种卷积操作。同时我们可以指定周边像素的数量，比如可以是3X3，或者5X5，通用的表达就是N X N， 数字N通常称之为模糊半径，这在之前的文章的代码中有体现（uRadius）：uniform float uRadius;float gaussianPdf(in float x,

canvas可视化效果之内阴影效果楔子在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。 可以参考 之前的一篇文章 《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》效果图中的轨道，就同时存在外发光和内发光效果的效果。外发光效果我们知道外发光效果是很容易实现的，直接通过设置阴影效果即可达到。比如我们随便绘制一条线段，加上阴影效果，看起来就是外发光的效果： ctx.clearRect(0,0,canvas.width,canvas.height); ctx

事件代理功能点分享看过前面几篇文章的读者相信也应该有所了解了，我们借助于团队内部开发的编辑器实现了很多成功的项目案例，已经多次看到我们点击一个文本、一个按钮等等…去弹出一个表格之类的交互，有些同学难免有些好奇我们是如何实现在 canvas 图形对象上实现事件派发和监听的，接下来听我娓娓道来。准备工作其实在实现事件代理对象之前，我实现过一个文本对象，就是在 canvas 上绘制出一个固定默认宽高的矩形，用户双击时可输入文字，它的实现可谓是非常简单。但是其中也有不容忽视的小细节需要注意。文本对象的实现

图表绘制之RepeatNode的妙用前言最近接到许多大屏项目，其中有一个智慧大楼的项目，大致是由3d场景+数据图表组成，需要能监控实时数据、安防监控、出入统计以及消防安全等功能如下图但是在开发项目的时候碰到一个难题，设计稿中有一个图表类的模块，如下图。是一个由多个递增的矩形拼接而成的类似柱状图的进度条，来表示当前车位占用率的图表。使用echarts的问题拿到这个设计稿时，第一反应是用大家常用的Echarts来绘制这种图表，于是在chart的社区各种找已经做好的案例。经过一番搜索，找到了一个最

利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果前言近日公司接到一个轨道系统的需求，需要将地铁线路及列车实时位置展示在大屏上。既然是大屏项目，那视觉效果当然是第一重点，咱们可以先来看看项目完成后的效果图。可以看到中间线路里轨道的效果是非常炫酷的，那么本文的主要内容就是讲解如何在canvas上绘制出这种效果。分析设计稿先看看设计稿中的轨道效果程序员解决问题时经常喜欢用到的方法是把一个大问题拆解为若干个小问题然后逐一处理，也就是分而治之，所以我在思考这个轨道效果的实现时，也是先考虑到将

随着国家近来几次重要会议开展以及落地。企业转型及可视化布控迎来热潮。所以一款能效力于管理层——运筹帷幄、省力于运维层——降低维护成本的可视化编辑器是很有必要的。关键在于，它很轻便。给大家展示一下最近一个竣工项目的效果图：该项目实现了企业核心指标的实时观测，以及整体布控。另外其还易于上手。并且是由编辑器与3D（数字孪生理念）联合完成。那么话不多说，言归正传。我将站在开发者角度，以项目为原型。通过系列文章，带领大家了解这款编辑器。**本篇主旨:  数据源配置编辑器针对不同主题设计了三个数据源

目前数据信息可视化的发展趋势越来越快，纬度宽广、数量庞大、结构复杂的数据展示仅仅只依靠二维平面图表已经不能满足了。为了更加清晰，快速的认知和理解一份数据，构建基于现实的三维虚拟可视化效果，被广泛应用到各行业中，迅速成为信息数字化管理的重要组成部分。 三维场景还原了现实的虚拟效果，而各种各样的动画则赋予其更加饱满、灵动的视觉冲击。基于路径集合的三维动画链，它充实了场景中元素的动画效果，接下来我会具体介绍动画链的实现过程。1、配置路径数据此次示例中模型均采用gltf格式，以上图场景中小车为例

自动化车间3D可视化设计思路随着国内制造业企业的高速发展，再加上政策支持，高效的生产模式和先进的管理方式越来越受到企业重视。更多的企业将工业信息化技术进行广泛的应用，比如MES系统、数字孪生以及生产管理可视化等技术的研究应用。近期我们团队利用自主开发的大屏编辑器与3D编辑器结合做了一个智能实验室三维可视化平台项目。在这个智能实验室三维可视化平台里主要支持下列功能：智能巡检设备自动告警实时视频监控实时数据的展示数据融合动画视角的自动切换任务的进度展示全局自动巡检可视化页面初始化后

在我们做的可视化大屏项目中，经常会遇到飞线的效果。 在我们的大屏编辑器中，可以通过拖拽+配置参数的方式很快就能够实现。下面是我们使用大屏编辑器实现的一个项目效果：中间地图就有飞线的效果。抛开编辑器的快速实现不说，我们大致来说下canvas绘制飞线的大致原理。贝塞尔曲线飞线的路径主要是一个贝塞尔曲线，canvas绘制贝塞尔曲线比较容易。canvas支持绘制二次和三次，在本次示例中，主要还是绘制二次贝塞尔曲线为主。canvas中指定二次贝塞尔曲线路径的函数如下：ctx.quadraticCurveT

从去年年初开始，我们团队内部就在做两个编辑器：3d编辑器 支持搭建3d场景。拓扑/大屏编辑器 支持搭建大屏/拓扑/组态场景。开发编辑器的主要目是为了提高团队内部项目的交付效率，目前 两个编辑器都引用到团队的相关项目中。当然，编辑器目前也支持和其他公司的项目合作。 下面是几个项目的示例图：中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。

在之前这篇文章，WebGL 单通道wireframe渲染我们介绍了webgl如何实现单通道wireframe的效果。本篇文章就是在此技术原理基础之上，来实现发光的wireframe效果。要实现发光的效果所谓的发光的效果，就是颜色的渐变。 渐变越慢，发光的效果越明显，渐变越快，发光效果越不明显。其实wireframe本身就是在两种颜色之间进行渐变,从代码也可以看出：gl_FragColor.rgb = mix(vec3(.0,.0,.0), vec3(1.0,1.0,1.0),edgeFacto

通过canvas可以协助我们做很多颜色计算的辅助，比如颜色转换，渐变颜色计算。对于颜色转换，之前写过一篇文章：《通过canvas转换颜色为RGBA格式及性能问题》, 读者可以查阅该篇文章来了解。本文着重讲解渐变计算颜色的插值计算。计算任意两个颜色的插值实际应用中通常要计算两个颜色的之间插值结果，比如计算“red”和“green” 之间的插值。 比较通用的方法就是首先通过《通过canvas转换颜色为RGBA格式及性能问题》中提到的方法把颜色转换成RGBA格式，由于RGBA格式是都是数字的形式，可以直

项目背景前几天有客户打电话过来，说想了解我们公司的编辑可视化产品，最近在网上看到过我司编辑可视化的相关解决方案，感觉挺不错也想给自己的工业流程进行一个定制的编辑可视的管理平台。经过沟通，了解到该客户属于钢铁冶炼工业，想通过一个编辑可视化管理软件进行自己钢铁冶炼工艺业务流程的编辑和管理，提高产品竞争力，节省人力，物力，减少冶炼环节的故障。其中还提出需要有冶炼设备的实时监控信息；当设备出现故障或...

0x00 项目背景该项目用于高速公路监管。高速公路监管包括：高速公路的设备运行情况，设备维护情况，道路维护情况；交通流量分析，交通拥堵分析，拥堵溯源；事故分析，事件信息发布等。0x01设计图该项目目前主要是一个预演形式的项目，所以设计图层面主要还是用了客户提供的图片。 我们的设计团队参与的并不多。下面是客户的设计图纸：0x02 绘制公路公路的实际效果还是比较复杂的，比如公路上面有各种线...

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

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

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