netcy的专栏

本文主要阐述了电力行业三维布局的主要功能特点。最后，关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。

在用UE4 开发数字孪生应用的过程中，有很多业务会涉及到actor的查找，和actor标签的使用。比如下面的场景中，找出所有的物联网设备进行标注。

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

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

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

关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。

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

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

前言大部分的webgl框架，比如threejs和babylon等，都可以加载obj和gltf模型。 我们的引擎，基于three封装，同样有加载模型的loader，因此加载obj和gltf模型也是很简单就可以实现的。不过加载文件都是在线的文件，也就是通过url的形式进行加载。 团队开发的三维可视化平台框架，需要能够上传obj和gltf等格式的模型，在上传前，需要先对模型预览，这就涉及到如何加载本地模型的问题了。加载本地模型本文以gltf为例，进行说明。 加载本地模型的思路是这样的：既然引擎可以通过u

webgl，显卡

前言使用webgl开发三维应用的时候，经常会发现三维场景加载比较慢，往往需要等待挺长时间，这样用户的体验就很不友好。 造成加载慢的原因，主要是三维应用涉及到的资源文件会特别多，这些资源文件主要是模型及其图片，往往这些模型和图片都会比较大。为了加快三维场景的加快速度，可以使用IndexedDB在客户端进行资源缓存。IndexedDB，即客户端持久化数据库！使用本缓存技术，在初次访问后，3D场景中的文件级别数据将写入访问设备本地缓存数据库，在客户端实现永久的生命周期，清除浏览器缓存也不影响已缓存的3D模型文

引言在三维可视化中，会涉及到很多动画，其中贴图动画是其中很重要的一种，本文介绍几种贴图动画的思路，供大家一起探讨。流动动画流动动画通过设置贴图的repeat属性，并不断改变贴图对象的offset让贴图产生流动效果。 这种动画不难实现，首先加载贴图，如下所示：let img = new Image();img.src = './images/path.png';let texture = new eg.Texture(img);img.onload = function () { tex

最近有客户试用我们的三维平台，在导入模型的时候，会出现模型全黑和不可见的情况。上一篇文章说了全黑的情况。此文说下不可见的情况。经过测试，发现可能有如下两种情况。导入的模型不在镜头视野内导入的模型不在镜头视野内，所以看不到模型。有可能模型就不在视野内，也有可能模型位置超过了镜头的far参数值。 这种情况下，调整镜头的参数（包括position，center，far等）。模型的建模中心不在几何中心比较隐蔽的一种情况是模型的建模中心点不在模型本身的几何中心，建模中心在模型自身之外，此时模型的位置虽然都在

最近有客户试用我们的三维平台，在导入模型的时候，会出现模型全黑和不可见的情况。本文说下全黑的情况。经过测试，发现可能有如下几种情况。obj 模型没有法线向量如果obj模型导出的时候没有导出法线向量，会导致模型不能接受光照，从而导出的模型是全黑的。 此种情况下，高光反射也没有。解决方案上，一种是让建模人员重新导出模型，导出的时候勾选上导出法线向量。另外也可以从程序上兼容一下，判断模型是否有法线向量，如果没有，程序自己计算法线向量。以threejs为例，调用computeVertexNormals计

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

背景最近有不同行业的客户咨询我司能不能提供一种解决方案，可以快速实现三维建筑效果，能快速响应市场需要，满足投标、交付、技术服务、厂房建设等需求。客户主要行业领域为新能源光伏逆变器铺设、房地产建筑、工厂厂房等三维建筑领域。首先我们对他们的需求进行了分析，发现他们的共同需求是三维建筑，他们都想使用简单快速的编辑方式实现三维建筑，然后是业务需求。最终我们决定根据他们的需求，做一个简单的设计工具来实现三维建筑，然后再依次添加他们额外的业务需求。下边就简单的介绍下我们设计工具技术的尝试，如果你有更好的意见和思路可

前言随着《中国制造2025》的提出，制造业迎来了全新的发展机遇。更多的企业将制造业信息化技术进行广泛的应用，如 MES 系统、数字孪生以及生产管理可视化等技术的研究应用，已经成为社会各界共同关注的热点。21世纪是光电子的时代，全球性的市场增长为光电子的发展提供了巨大的空间，“武汉·中国光谷”的建设又为各个高新企业的发展提供了良好的外部环境，使得高新产业蓬勃发展。本文将以芯片生产流水线车间为例，介绍TWaver丰富的 2D、3D 组态进行可视化数字孪生，搭建出一个芯片生产线可视化系统。打造集智能化、绿色

前言随着《中国制造2025》的提出，制造业迎来了全新的发展机遇。更多的企业将制造业信息化技术进行广泛的应用，如 MES 系统、数字孪生以及生产管理可视化等技术的研究应用，已经成为社会各界共同关注的热点。​21世纪是光电子的时代，全球性的市场增长为光电子的发展提供了巨大的空间，“武汉·中国光谷”的建设又为各个高新企业的发展提供了良好的外部环境，使得高新产业蓬勃发展。​本文将以芯片生产流水线车间为例，介绍TWaver丰富的 2D、3D 组态进行可视化数字孪生，搭建出一个芯片生产线可视化系统。打造集智能

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

三维场景中常用的路径动画前言在三维场景中，除了用逼近真实的模型代表现实中的设备、标识物外，通常还会使用一些动画来表示模型在现实中一些行为和作用。常见的动画比如路径动画、旋转动画、发光动画、流动动画等。本文将为大家介绍几种常用的路径动画。首先，最简单的自然是直线路径动画。直线路径动画比如以下场景，地铁需要从上一站A驶入当前站B，在此过程中，我们将AB组合成一条路径(假设路径为直线)，使用动画，不停的设置地铁(模型)的在路径上的位置，就可以实现地铁从A站-B站的动画过程。const points =

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

智慧园区可视化设计思路前言随着物联网技术的不断发展，推动了园区的智能化管理与服务不断升级。科技的进步激发市场诉求，智能化园区的市场规模也越来越大。在经济快速发展和政府政策的推动下，伴随着国内智慧城市建设步伐的加快，园区规划建设整体性越来越强，更加注重各种基础配套设施，以更好的服务促进高新产业的发展。尤其是注意产业园区的信息化建设，构建互联互通、资源共享的信息资源化网络。智慧园区是在园区搭建的IT基础设施之上，运用物联网、云计算、多媒体等现代信息技术，帮助园区在信息化建设方面构建统一的组织管理协调架构

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

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

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

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

webgl智慧楼宇发光效果算法系列之高斯模糊如果使用过PS之类的图像处理软件，相信对于模糊滤镜不会陌生，图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。在我们的智慧楼宇的项目中，要求对楼宇实现楼宇发光的效果。 比如如下图所示的简单楼宇效果：楼宇发光效果需要用的算法之一就是高斯模糊。高斯模糊简介高斯模糊算法是计算机图形学领域中一种使用广泛的技术, 是一种图像空间效果，用于对图像进行模糊处理，创建原始图像的柔和模糊版本。使用高斯模糊的效果，结合一些其他的算法，还可以产生发光，光晕，景深，热

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

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

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

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

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

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

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

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

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

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

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

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

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