WebGL

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

前言 风能是一种开发中的洁净能源，它取之不尽、用之不竭。当然，建风力发电场首先应考虑气象条件和社会自然条件。近年来，我国海上和陆上风电发展迅猛。海水、陆地为我们的风力发电提供了很好地质保障。正是这些场地为我们的风力提供了用之不竭的能源。现在我们正在努力探索这些领域。 本文章实现了风力发电场的整体流程。能让大家能够看到一套完整风力发电预览体系。 需要注意的是，本次项目是使用 Hightopo 的 HT for Web 产品来搭建的。 预览地址： https://hightopo.com/demo/wind-power-station/ 大致流程 下面是整个项目的流程图。我们从首页可以进入到场区分布页面和集控页面。 场区分布页面又包括两个不同的 3D 场景，分别是陆地风机场和海上风机场。点击两个 3D 风机场最终都会进入到 3D 风机场景。 预览效果 首页: 1. 世界地图效果 2. 中国地 图效果 2. 城市地图效果 集控中心页面（没有动画效果）： 场区分布页面 （没有动画效果） ： 陆地风机场： 海上风机场： 代码实现 我们可以看到，首页的地球有三种视角状态，世界地图、中国地图、城市地图。点击每个状态相机就会转到对应的位置。在这之前我们要先预先存一下对应的 center 和 eye 。 我们最好新建一个 data.js 文件，专门用来提供数据。 相关伪代码如下： // 记录位置

前言 2019 年 VR , AR , XR , 5G , 工业互联网 等名词频繁出现在我们的视野中，信息的分享与虚实的结合已经成为大势所趋， 5G 是新一代信息通信技术升级的重要方向，工业互联网是制造业转型升级的发展趋势。本文所讲的 VR 是机械制造业与设备的又一次交流，当技术新星遇上制造潮流，无疑将成为制造业，工控业等行业数字化转型的重要驱动力。 “5G + VR + 工业互联网” 必将成为新的一年不变的话题，如何将当前工业中遇到的问题通过 虚拟现实 结合起来，让我们可以更近的去交流，去感受技术带给我们的变化。在今年苹果的发布会上，相信大家都知道苹果的 5G 手机没有问世，说明 5G 的应用和发展还处在快速发展的阶段，但是手机结合 AR 功能的 APP 已经早就问世， 5G 的速度加上 AR, VR 的身临其境，让我们感受到的不仅仅是技术的革新，更是让我们感受到技术在不同领域的实际应用场景，我相信 2020 年新的一年必定是 “5G + VR + 工业互联网” 应用的又一个新的开始，本文接下来所讲的就是 HT for Web 结合 WebVR 开发的具体应用案例。 系统预览 预览地址： 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统 http://www.hightopo.com/demo/vr-training/ VR 拆解还原 VR 操作 VR

前言 2019 年 VR , AR , XR , 5G , 工业互联网 等名词频繁出现在我们的视野中，信息的分享与虚实的结合已经成为大势所趋， 5G 是新一代信息通信技术升级的重要方向，工业互联网是制造业转型升级的发展趋势。本文所讲的 VR 是机械制造业与设备的又一次交流，当技术新星遇上制造潮流，无疑将成为制造业，工控业等行业数字化转型的重要驱动力。 “5G + VR + 工业互联网” 必将成为新的一年不变的话题，如何将当前工业中遇到的问题通过 虚拟现实 结合起来，让我们可以更近的去交流，去感受技术带给我们的变化。在今年苹果的发布会上，相信大家都知道苹果的 5G 手机没有问世，说明 5G 的应用和发展还处在快速发展的阶段，但是手机结合 AR 功能的 APP 已经早就问世， 5G 的速度加上 AR, VR 的身临其境，让我们感受到的不仅仅是技术的革新，更是让我们感受到技术在不同领域的实际应用场景，我相信 2020 年新的一年必定是 “5G + VR + 工业互联网” 应用的又一个新的开始，本文接下来所讲的就是 HT for Web 结合 WebVR 开发的具体应用案例。 系统预览 预览地址： 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统 http://www.hightopo.com/demo/vr-training/ VR 拆解还原 VR 操作 VR

前言 自 2011 年我国城镇化率首次突破 50% 以来，《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一，并提出到 2020 年，建成一批特色鲜明的智慧城市。截至现今，全国 95% 的副省级以上城市、76% 的地级以上城市，总计约 500 多个城市提出或在建智慧城市。 基于这样的背景，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 智慧城市 3D 可视化场景，通过三个角度的转换，更清晰让我们感知到 5G 时代下数字化智能城市的魅力 预览地址： HT 智慧城市 整体预览图 第一个视角下，城市以市中心为圆心缓缓浮现，市中心就如同整座城的大脑 第二个视角下，在楼房间穿过，细致的感受这城市的面貌 第三个视角下，鸟瞰整座城，体会智慧城市带来的不可思议的欣喜 是不是觉得有些神奇，我们接下来就是对项目的具体分析，手把手教你如何搭建一个自己心中的梦想城市 场景搭建 该系统中的大部分模型都是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3D 场景中的所有复杂模型，（当然如果是某些简单的模型可以直接使用 HT 来绘制，这样会比 obj 模型更轻量化，所以大部分简单的模型都是采用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案）我们先看下项目结构

前言 近年来，无人机的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求更加严格、重要。本系统则是通过 Hightopo 的 **HT for Web ** 产品来搭建的一款 无人机 3D 可视化系统，通过对无人机及其信息的全景展示来模拟无人机状态的监控。 系统中包含 4 种展示模式：实体模式 、热力模式、线框模式和内部模式，通过飞机下方操作按钮即可进行模式切换。 预览地址： http://www.hightopo.com/demo/Drones/ 实现过程 加载界面采用 2D 拓扑组件进行绘制，全矢量化图标，与传统的 png、jpg 等格式的图片相比，完美适配移动端、PC 端、大屏等各种尺寸及分辨率屏幕，不会出现失真情况。 无人机及周边信息面板采用 3D 引擎进行场景搭建，用户可从场景任意位置对无人机进行查看。 动画过程采用产品提供的动画函数 ht.Default.startAnim 来驱动图形属性值的改变，应用其 Time-Based 的方式，只需要指定动画周期 duration 的毫秒数，由系统去计算帧数或 action 函数被调用的次数，以保证更加高效、平滑的进行动画过程。 界面 加载界面中通过动态改变图形的属性值来展现加载进度，加载完毕后通过动画的 finishFunc 调用 hidden2d

年前为 NothingJs 实现了一个扩展 NJ_lod_ground ，目标是简单实现加载谷歌瓦片。为了让读者更加容易的理解，我直接改成了 WebGL 实例（总代码800行左右、依赖glMatrix）。并且把相关内容整理到本文，希望能帮助到刚刚入门的同学。 工程地址在文章结尾。 WGS84 大地坐标系 和 Web 墨卡托投影 GIS 领域最离不开的就是坐标变换，首先要搞清楚的就是地球上的一个点如何变换成地图上的一个点。文章不会详细讲解变换方法，因为本文重点并不是算法。但是还是要说清楚整个过程，我们已经清楚地球本身不是一个规则的球体，为了计算方便，需要有一个标准的大地坐标系来简化计算，而 WGS84（World Geodetic System一1984 Coordinate System） 就是这样一个坐标系。但是大地坐标系是三维坐标系，要映射到二维地图上还需要一步，就是投影变换（仿射变换），比如墨卡托投影。 Web 墨卡托 定义的大地坐标系是 WGS84 坐标系，投影方式与墨卡托投影类似，但是投影时地球不再当做是椭球体而是半径是6378137米的标准球体。 首先我们先简单了解一下 Web 墨卡托投影 的历史： 2005年 - 谷歌在谷歌地图中首次使用，当时的 Web墨卡托 使用者还称其为 世界墨卡托（World Mercator）- Spherical Mercator

前几天周六的时候，公司组织了团建活动。 租了一辆中巴车到景区，大家集中在公司楼下上车。其中一个人不小心迟到了（在此还是建议大家不要迟到，要多守时哈），最终我们决定先走。 然后人事小姑凉和师傅商量，是否可以到指定的地点，让那名迟到的同事打车和我们汇合，我们接上他，然后再去目标地点。 师傅说可以，然后说了，从三环下来的地方的xxx路，哪儿有个酒店啥的。可以在哪儿等下。 因为大家都不熟悉，所以人事小姑凉突然不知道怎么处理了，又是搜索地图，又是问人地点在哪儿。 我看她实在不知道如何处理，就说，你让那名同事先打上车，然后给他打个电话，让出租车司机和中巴车司机通话。 不一会儿，那位同事打上了车。我们的人事小姑凉和他通了电话，并都把手机交给了师傅，两边司机很愉快的进行了双边电话会谈，很快双方达成了共识。 我们最终也轻松的在指定的地点接到了那位同事。 为什么这样处理是最好的？ 其实我们所有人都不是很熟悉地点，沟通来沟通去，查来查去，可能最终也不会有结果。但是出租车师傅和中巴车师傅是经常在路上跑的，熟悉路是他们最大的优势，这事情交给他们最容易处理。 这是一件很小的事情，但是其中折射出的道理确实值得我们思考的。 在此引用老祖宗的一句话： 君子生非异也，善假于物也。 大致的意思是：君子的资质与一般人没有什么区别,君子之所以高于一般人,是因为他能善于利用外物。善于利用已有的条件,是君子成功的一个重要途径.

继《 分享数百个 HT 工业互联网 2D 3D 可视化应用案例 》2018 篇，图扑软件定义 2018 为国内工业互联网可视化的元年后，2019 年里我们与各行业客户进行了更深度合作，拓展了 HT for Web 在更多新领域的应用， 图扑软件 作为在工业可视化领域的一线重度参与者，我们觉得有必要将该话题作为系列文章，在此对 2019 年做个总结回顾和分享，依然希望：激发行业和学术工作者对可视化的深度思考，为推进国内工业互联网发展出份薄力！ 2019 我们更新了数百个工业互联网2D/3D可视化案例集： http://www.hightopo.com/demos/index.html 3D 交互拆解发动机引擎 https://hightopo.com/demo/engine/ 3D 病毒模拟视觉试验台 https://mp.weixin.qq.com/s/tihkEPb3w9O9ciuIQlGsFw 3D 科技感风机： https://mp.weixin.qq.com/s/DB43Ye-CdcBCWTiIaxuSIg 3D 城市建筑群： https://mp.weixin.qq.com/s/L48aQPqYkS_EAqpDO1tWKw 3D WebVR 虚拟现实仿真培训 https://mp.weixin.qq.com/s/vpR7p6qZafLtWYvMZNMO5A

前言：以为在学完了COMP30019后，应该不会再接触Unity了，没想到之后实习让我去做把一个Unity项目转到WebGL，而关于Unity的WebGL资料很少，基本除了Unity的Manual就只能看别人零星的记录了。遇到了一堆问题，可能以后会也写在博客上。 浏览器默认禁止从file里直接运行WebGL的。 有三个方法： 1. 在Unity里选择Build and run，build完后unity会直接自动创建本地服务器运行，但这个方法很不方便，总不能要用时都build一遍吧。 2. 修改浏览器设置，强行运行WebGL，方法百度。 3. 创建本地服务器，目前最简单的方法是用python， 详细方法 。 　　a. 在终端中进入目标路径 　　b. 输入"python -m http.server"，默认会使用8000端口号，访问 http://localhost:8000/ 。也可自己指定端口号。这里用的是python3，2的不同看详细方法。 　　不过这方法有个小问题是如果只是终止了这条命令（ctrl + c）而没有关掉终端，这个端口号好像还是占用的，其他webgl还用这个端口号就会报错。关掉终端再打开就没事了。 来源： oschina 链接： https://my.oschina.net/u/4000302/blog/3166911