WebGL

之前实现过，是利用的sprite永久朝向相机的特性实现的效果。但是这种效果对于雪还比较好，如果贴图修改成长条形的雨的话，从上往下看，就会有一种说不出的感觉，不真实。 而我也通过修改shader和自己拼接渲染数据，实现了一个比较简单的渲染效果。接下来讲解一下实现逻辑： 第一步，创建一个包围盒，来设置范围 const box = new THREE.Box3( new THREE.Vector3(-2000, -2000, -2000), new THREE.Vector3(2000, 2000, 2000) ); 第二步，创建一个默认材质，并修改材质的shader 这里简单的提一句，three.js的材质对象是生成webgl的原生的program的工具，内置的那些材质都有相应的字符串拼接组成。 相应的，我们也可以通过拼接的方式，修改材质的默认着色器代码，从而达到自己的需求。 material = new THREE . MeshBasicMaterial ( { transparent : true , opacity : .8 , map : new THREE . TextureLoader ( ) . load ( "./color.png" ) , depthWrite : false , } ) ; material . onBeforeCompile = function

BIM与GIS的跨界整合，使微观领域的BIM信息内容与宏观领域的GIS信息内容完成互换和互操作，提高了BIM运用深度，将BIM的运用从单体拓宽到建筑群乃至城市级，为GIS行业发展提供了新的突破口，另外也提供了一些新的挑战。应对挑战，GIS基本服务平台要具有什么工作能力？文中将分析 BIM+GIS 运用过程中碰到的难题及其解决方式 。 在GIS平台中载入高架桥的BIM数据（左），并累加在影像数据上（右） 挑战一：将BIM数据连接到GIS平台 世界各国BIM三维建模软件类型各种，不同的软件有不同的储存方法。这种数据文件格式相互差异，且相对性较为封闭没有公布文档构造，给BIM数据连接到GIS平台提供了最直接的挑战。 BIM数据取决于BIM系统软件，例如Revit的rvt文档自身不是带材质贴图的，是存在于Revit安装文件的材质库中，要载入Revit数据的详细信息内容，包含特性、材料、几何图形等，不可或缺Revit系统软件自身。完成载入BIM数据现阶段最务实的方式 便是依托于BIM到GIS数据格式转换工具或软件，也就是依托于BIM软件库的原生态支撑，将BIM数据变换到GIS数据库。 ZTMAP依次带来了几款BIM流行制图软件的变换软件和专用工具，如Autodesk主打产品的Revit、AutoCAD及其Civil3D软件

一谈到数据可视化，很多人就会联想到各种精美的图表、炫酷的数字大屏： 其实数据可视化，并不仅仅指数据可视化产品，在工作中，除了数字大屏、数据 BI、可视化分析工具之外，日常我们写报告、PPT 都需要用到数据可视化。 然而你有没有想过，为什么我们在进行数据分析时必须要使用可视化图表进行表达？其实这是因为人的大脑需要图像，我们的大脑可以在大约13毫秒内处理整个图像，并理解它。 简而言之，数据可视化可以将数据转换为图像，让受众轻松、快速地对其进行处理。例如，查看条形图时，我们可以清晰地知道哪个部分比例更高。但如果我们只是观察同样几列数字，则必须将它们全部做一些基本的数学运算才能知道比例的高低。 从数据可视化到动态可视化 说起可视化的历史，最早甚至可以追溯到史前的洞穴时期，人类已经开始使用石头的排列来表示自己的狩猎次数，自那时起，人们就一直在使用数据可视化。 而随着时间的流逝，各类行业已经使用数据可视化来制定作战计划，应对各类传播并计算用户画像与偏好。 这时候的数据可视化更偏向于利用各种静态图表，来帮助用户理解图表背后的数据，这时候用户只能看到“死”的数据，也就是相对静止的信息，而无法实现动态数据的获取。 比如这样的图表展示了A-E五个平台近五年的销售情况，如果你给这样的图表给老板看，老板看起来是十分费劲的，因为老板关心的肯定是不同平台之间的对比，而不是每个平台不同年份的对比

JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。ThingJS在js交互元素上加入3D可视化功能，大屏效果丰富。 HTML绘制平面图形可以采用canvas标签，但是功能上只能呈现2D图形，想要呈现3D图像需要特殊上下文，于是引入了webGL技术。如果想看它的场景演示，可以访问谷歌团队Data Arts出品的基于webGL的3D场景库，前端技术圈也视它为一个蓝海技术，3D开发应用普及指日可待。 国内的物联网可视化技术厂商ThingJS纯JS语法开发，3D效果也不输于原生应用，一切源于谷歌浏览器对webgl技术的支持。从开发生态的角度，webGL技术可以调用显卡、调用麦克风、调用摄像头等一切能用的硬件去提升服务质量，同时也支持引用js脚本和css演示，让你的3D开发效果更加有特色。 官方如何引入外部资源呢？注意在平台新建或者上传文件仅允许js, css, html, json格式。 我们默认js脚本和css样式会带上时间戳，且按urls数组中的顺序加载，浏览器会缓存之前的js，css的版本，我们更新了js，css文件后，浏览器不会更新。所以我们在引入相关css、js文件时使用时间戳，能够让浏览器加载我们的最新版本。如下所示。 THING.Utils.dynamicLoad(\[ '/static/vendor/twitter-bootstrap/3

📖前言 上篇文章我们绘制了第一个立方体，色彩十(花)分(里)绚(胡)丽(哨)😜但是如果我们把立方体的各个面换成朴素的白色呢？就会呈现出下图的效果： 可是在我们现实生活中，一个纯白色的立方体出现在我们面前的时候却不是这个效果，即使是纯白色，但是我们也能很清晰的看清立方体的棱角，以及明暗面！这就体现了 光照 的重要性， 光照 可以让我们的 WebGL 世界更加真实😉 🔆光 光 在我们的生活中起着至关重要的作用，作物生长、人类生产都离不开光。太阳为我们提供了所需的光芒，而太阳神阿波罗是众神之神宙斯的孩子这一身份也说明了光的重要性。 阿波罗常被现代人说成是太阳神，而事实上，公元前5世纪已经将他赫利俄斯等希腊土著文明所信奉的太阳神进行并同。在古希腊神话晚期，阿波罗已经有太阳神属性🔥 神说：”要有光。“就有了光。 （引自《圣经》）： 于是就给我们的白色立方体加了缕缕阳光， ”夕阳从来都不说话却也温暖了晚霞“ ，”夕阳“照在白色的物体上也变得温暖了，这种结果也是符合我们生活常识的。至于如何给我们的 WebGL 世界添加光照先卖个关子，在添加光照之前各位先思考下面两个问题： 我们生活中光的来源有太阳，还有灯、火焰等，那么光源都有什么类型呢？ 物体呈现的颜色与反射的光的颜色有关（所以黑洞来者不拒就是个”黑窟窿“），那么物体如何反射光线呢？ 光源类型 有光就会有光源

每个画布都有两个尺寸，一个是 drawingbuffer 的尺寸， 这个表示画布中有多少个像素。另一是画布显示的尺寸， CSS决定画布显示的尺寸。 你可以通过两种方式设置画布的 drawingbuffer尺寸。一种是使用HTML: <canvas id="c" width="400" height="300"></canvas> 另一种是使用JavaScript: <canvas id="c" ></canvas> var canvas = document.getElementById("c"); canvas.width = 400; canvas.height = 300; 如果我们在画布上绘制以一个单像素宽度的线，就会得到这样的结果: "use strict"; function main() { // Get A WebGL context /** @type {HTMLCanvasElement} */ var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl"); if (!gl) { return; } // setup GLSL program var program = webglUtils.createProgramFromScripts(gl, ["2d