WebGL

前言 　　许多世纪以来，风力机同水力机械一样，作为动力源替代人力、畜力，对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现，使风机发电机的发展缓慢下来。 70年代初期，由于“石油危机”，出现了能源紧张的问题，人们认识到常规矿物能源供应的不稳定性和有限性，于是寻求清洁的可再生能源遂成为现代世界的一个重要课题。风能作为可再生的、无污染的自然能源又重新引起了人们重视。 现在我希望可以通过这个风机 demo 使风力发电机的各个功能近距离的展示给大家，使大家能更了解风力发电机。 本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。 demo 链接： https://hightopo.com/demo/fan3d-magic/ 风机主要功能介绍 效果： 　　 周围环境功能： 　　一. 风速值。 　　虚拟一个风速值，风速值会影响风机的发电效率和变桨系统的变化。 　　 二. 数据统计 。 　　 　　环境温度、机舱温度、齿轮箱温度、风速的图形百分比会随着时间发生改变。 　　 三. 环境监测 。 　　 　　左边对风机的各个参数实施了监测，右面是风速变化的折线图。 　　 四. 数据监测 。 　　 　　 　　风机在发电的过程中发生的异常情况，发生的故障部位及故障发生的时间。异常信息的收集有利于人们进行异常分析以及异常处理。 　　五.

海外党玩F***book的时候可能有接触过这个酷炫的3d图片效果： 只要通过客户端的这个入口—— 或者网页版的这个入口—— 就能生成。不知道咋玩的请参考官方的 帮助手册 。今天就教大家手撸出一个这样的功能，不要担心，所有代码加起来不超过200行并且不使用任何第三方库。虽然canvas2D也能做出这个效果，但是基于这种像素级操作的性能考虑，WebGL显然是更好的方案，我前面的有些教程也用到了WebGL，核心的API我就不做过多介绍，直接详细地注释在最终的代码里面了，代码仍然使用WebGL 1.0版本。 老规矩，还是先介绍原理，推荐有想法的读者略过教程，自己直接根据原理去撸出来，因为我还是秉持着话痨的特色，想到什么说什么，教程中掺杂一些自己的干货，对一些人来说可能过于啰嗦。夹，哈吉咩马修！（工地日语 非死不可 客户端在上传图片的时候你有两种可选操作： 一种是上传带深度通道的图片，即图片的每个像素是RGB-D格式，如果你是苹果手机可能在相机里会有人像模式或景深模式，拍出来的照片在本地是heic格式的文件，一般这种就是带深度信息的（有兴趣的可以去维基了解下这种heif编码的图片，可以做到很多神奇的事）。通常有TOF镜头的手机都能拍出这种图片，但是不知道为啥F***book似乎只支持三星系列和自己发布的安卓机？ 另一种办法就是上传两张图，一张普通的RGB像素的原图，一张灰度图

0x00 楔子 最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。 效果如下图所示： 首先当然是上模型，设计人员跟进。 有了相关的模型，使用我们开发的一个编辑器，通过模型拖拽编辑，管路编辑等等，很快就能够编辑出以上的场景： 一切进展的都很顺利。 直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。 0x01 寂静无声 一开始我们是比较懵逼的。毕竟我们主要做JavaScript前端开发，对于C# 之类的接触的很少。 抱着试一试的态度在开发群里面问了下，有人懂WPF的开发吗？ 寂静无声。。。 因为基本上专业在前端开发，可以理解。 0x02 初步尝试 既然都没有人会，那怎么办，只能我亲自出马了。虽然我没有太多接触过C#相关开发， 但是做过Java，Python，C，Flex，JavaScript等等的开发。凭借多年开发经验，所以相信并不会太难。当然第一步，是下载vs studio， 当看到n个G的下载时候，内心还是挺崩溃。 在漫长等待之后，终于下载并安装了 vs studio。 因为我们的三维管理是基于网页的WebGL开发出来的，所以我想，寻找的方向是在WPF中找是否有类似浏览器的控件。 经过查找找到了，就是WebBrowser 控件，大致使用如下， <WebBrowser x:Name=

不久前在项目中碰到一个问题，实时的在XZ平面上产生一系列顶点，并且是一个闭环，用于表示建筑物。我需要渲染一个有高度的建筑物，还需要带有纹理。 一. 首先根据顶点生成三角形，构成物体，构成物体分两步：物体的墙壁和屋顶。 1. 墙壁的生成策略如下：根据相邻的两个顶点，深克隆它们，并且这两个克隆的顶点在Y轴上位移一段距离(这个距离就是建筑物的高度)，这样就有了四点顶点，通过这四个顶点生成一个平面(注意两个三角形顶点的顺序都是逆时针)。 2. 屋顶的生成策略如下：根据墙壁生成时的克隆顶点，查找出X最大值和最小值，以及Z的最大和最小值，然后根据这些最大最小值计算出X轴和Z轴的中心点。然后每两个相邻的克隆顶点和中心点，构成一个三角形。 二. 到这里建筑物已经生成完毕，但是不能放松，因为还有很棘手的一步：给建筑物贴图。给建筑物贴图我用到了两个纹理，一个用于墙壁，一个用于屋顶。 (1). 墙壁纹理坐标的生成策略如下： 1. 将纹理uv坐标在u轴上分割为很多片段，piece = 1 /（XZ轴上顶点数量-1） 2. 为墙壁上的每个三角形生成纹理坐标，在XZ平面上每个顶点uv坐标的u值比前一个顶点的u值加上piece(第一个顶点的u值为0), v值一直为0；克隆出的每个顶点的纹理u值也比前一个顶点的u值加上piece, v值一直为1 (2). 屋顶纹理坐标的生成策略如下： 1.

前言 近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破，以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及，宇宙空间中那些原本遥不可及的事物离我们越来越近，人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上，作为人类这个物种中的一员，我们理所应当对我们生活的星球、所在的太阳系有一定的认识，对 8 大行星各自的运行轨道、质量、资源存储量甚至是地形有一定的了解。 本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景。 Solar System 这套系统主要用于两种场景： 　　1.作为科研成果、新发现的载体，做 3D 太空数据可视化呈现，用于向普通民众科普太阳系的构成、各行星组织结构等知识，可置于博物馆大屏、学校大屏，也可用于互联网产品，作为航空航天类网站的门户页、展示页。 　　2.作为宇航局、航空航天相关研究机构的驾驶舱，在 3D 可视化界面中对行星相对位置、星体状态、星体气象、星体地形有一个直观快速的了解，在宇宙空间探索越来越成功的当下，在数据传输技术得到速度和质量上的突破后，甚至可以通过该系统对行星状态做实时监控呈现，对宇航员的作业点、作业情况做在线监控。在配置上人造卫星轨道、监控区域的数据后，本系统可用作卫星系统，描述覆盖范围和呈现观测数据。 预览地址： www

前言 近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破，以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及，宇宙空间中那些原本遥不可及的事物离我们越来越近，人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上，作为人类这个物种中的一员，我们理所应当对我们生活的星球、所在的太阳系有一定的认识，对 8 大行星各自的运行轨道、质量、资源存储量甚至是地形有一定的了解。 本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景。 Solar System 这套系统主要用于两种场景： 　　1.作为科研成果、新发现的载体，做 3D 太空数据可视化呈现，用于向普通民众科普太阳系的构成、各行星组织结构等知识，可置于博物馆大屏、学校大屏，也可用于互联网产品，作为航空航天类网站的门户页、展示页。 　　2.作为宇航局、航空航天相关研究机构的驾驶舱，在 3D 可视化界面中对行星相对位置、星体状态、星体气象、星体地形有一个直观快速的了解，在宇宙空间探索越来越成功的当下，在数据传输技术得到速度和质量上的突破后，甚至可以通过该系统对行星状态做实时监控呈现，对宇航员的作业点、作业情况做在线监控。在配置上人造卫星轨道、监控区域的数据后，本系统可用作卫星系统，描述覆盖范围和呈现观测数据。 预览地址： www

百度地图WebGL版本的3d效果显示的方式与高德不同。高德地图是采用建筑轮廓，并通过高度进行拉伸得到的三维模型。百度地图则是采用预先生成三维模型，然后将三维模型保存为顶点缓冲和索引，最后直接通过WebGL的方式显示到画布上。 最开始没有注意到百度地图还提供矢量瓦片数据，于是希望通过下载内容比较少的栅格数据，然后通过识别其中的颜色色块来提取建筑轮廓。这种方式由于识别图形本身就是一个比较复杂的事情，所以，止步于此； 之后发现百度地图提供了矢量数据，于是按照处理栅格数据瓦片的思路，希望将其从服务器中下载下来，然后通过本地的集中解析来达到获取矢量数据的目的（对于高德地图的矢量瓦片数据就是通过这种方式获得的）。但是，百度对其矢量瓦片的请求url进行的封装，无法直接通过瓦片编号和等级直接获取。于是对代码进行跟踪，拿到了加密函数，于是，瓦片获取就没有问题了。 获取到的矢量瓦片是二进制文件，虽然请求参数可以获取json格式的明文，但其文件格式仍旧非常复杂，而其中又包含了各种内容（道路面、桥梁、运动场停车场等）一一解析工作量还是比较大。 最终，通过对workerManager进行分析，直接从worker返回消息处入手，将解析后的顶点缓冲和索引进行解析，直接获得建筑的平面数据和高度。把这些数据保存下来，并通过后期的处理，即可以获得比较完整的百度地图建筑轮廓数据。 注：本文中所述内容仅作为研究用途

什么是WebGL？ WebGL使用了GLSL ES(OpenGL ES)着色器语言，通过配合调用js相关的绘制接口来实现3D效果。 采用页面中的<canvas>元素来定义绘图区域，canvas支持三维图形的绘制，但它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形。 绘制流程 获取画布canvas和3D绘制上下文 1 var canvas = document.getElementById('canvas'); 2 var gl = canvas.getContext('webgl'); 具体的参数可以参考这里： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext 编写顶点着色器和片段着色器 1 // 着色器是字符串形式的glsl代码 2 var VSHADER_SOURCE = "..."; 3 var FSHADER_SOURCE = "..."; 编译着色器并提交到GPU 1.创建Shader对象 createShader方法，需要传递参数指明是顶点着色器还是片段着色器； 2.将写好的着色器附加到Shader上 shaderSource方法，可以指定着色器代码添加到指定的Shader上； 3.编译着色器 compileShader方法