WebGL

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软件，及其Bentley的MicroStationCONNECTEdition

　　自公司前后分离上手React以来，一个坑一个坑的踩，Class的全生命周期云里雾里，还么屡明白，就抱上了Hook的大腿不松手，确实爽到飞起。修改到Hook的过程基本比较顺畅，直接少了三分之一的代码，组件更容易封装，调试更方便，诸多优点在此不再赘述，已有各路大佬纷纷评价，此处贴上中文官方地址： React-Hook文档 。这里主要讲讲修改到一块关于 Unity 3D模型加载的踩坑记。 　　 背景：React 加载 Unity 3D模型 ，使用到一个插件 react-unity-webgl ，感兴趣的盆友可以自行查阅。 　　因为Class改Hook处理语法变动，逻辑代码基本不用怎么改动，所以基本没有阻力，但是当我把这块业务代码改成Hook时，跟模型交互时通信失败，无法驱动模型动作。百思不得其解，弄了俩测试页面，test_hook、test_class，只能debugger，一步一步调，发现一些端倪。 　　Class 有些初始化的代码 都写在了constructor(props){}，这个大家都明白，第一次加载页面的时候会走。hook呢，最外层是一个大方法，之前迁移的时候就写在方法里最顶部了，也没什么问题。加载模型第一句是 const unityContent = new UnityContent(参数1,参数2)；两个页面都能加载出来模型，但是跟断点发现hook页面的

　　从 Unity 弃用两个跟网页相关的API之后, 就开始使用 jslib 了: [Obsolete( " Application.ExternalEval is deprecated. See https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html for alternatives. " )] public static void ExternalEval( string script); [Obsolete( " Application.ExternalCall is deprecated. See https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html for alternatives. " )] public static void ExternalCall( string functionName, params object [] args); 　　 来源： oschina 链接： https://my.oschina.net/u/4406751/blog/4377937

当 微信小程 序遇到 AR ，会擦出怎么样的 火花 ？ 期待 与 激动 ...... 通过该教程，可以从基础开始打造一个微信小程序的AR框架，所有代码开源，提供大家学习。 本课程需要一定的基础：微信开发者工具，JavaScript，Html，Css 第四章：基石-摄像头与Three.js结合 【前情提要】 　　上一章，前面的两章内容，我们学习了基本的摄像头数据读取以及Three.js三维场景的创建。这两章内容学习之后，我们已经可以做很多更定制化的开发了。例如： 　　1. 我们已经可以做基于摄像头图像的AR内容开发，（比如人脸识别，AR美妆涂口红，戴帽子，适眼镜等等） 　　2. WebGL的三维游戏。 　　这一章，既是基础也是升华，主要是探讨，如何在微信小程序中出现摄像头画面的背景，然后在背景之上渲染出WebGL的三维内容。 1. 实现在微信小程序中访问摄像头，并且可以实时的拿到每一帧画面的数据。 2. 实现在微信小程序中访问WebGL接口，实现绘制三维物体。该教程采用Three.js引擎 3. 实现在背景为摄像头实时画面的背景上显示WebGL的3D物体。 4. 整体框架搭建 5. 图像算法接入 【目的】 微信小程序中实现摄像头画面为背景，之上渲染WebGL内容 [方案] 　　在开始开发之前，我们想罗列一下各种可能的方案。 　　要想在摄像头画面之上渲染出WebGL的内容

只要一提起可视化，很多人第一个想到的，肯定就是火得一塌糊涂的大屏了。 从我身边很多从事可视化的朋友来看，越来越多的公司都将可视化大屏作为企业数据工作展示的“高级手段”和“对外平台”，这就苦了这些做大屏的人，甚至造成很多IT人最怕听到老板的一句话就是： “给我做一个高端大气的可视化大屏！” 其实，可视化大屏不仅是要在视觉上美观炫酷和与数据契合的科技感，更重要地是突出重点数据，做到美观性与实用性共存的效果。我之前也曾经在一个团队里为公司做过可视化大屏，经历了与需求方的不断交涉、修改，最终做出了几张比较满意的大屏： 这样的大屏不仅拥有着高端的科技感，而且都是经过了多次的版面设计和修改，这次大屏效果在同行业内部交流过程中反响不错，在这次大屏的开发过程中，我亦总结了一些独家的大屏技巧略作分享。 一、大屏经验分享 首先要说一下我们制作大屏使用的工具—— FineReport 10.0 ，是采用最新的可视化大屏图表，默认采用深色背景+荧光配色，非常符合浸入式的大屏体验；而且能根据图表类型和数据要求，提供 '轮播'或'刷新'两种动画形式，能够满足不同场景下的业务需求。同时FineReport10.0最厉害之处，在于它基于webgl等技术，对动画不断优化调整，能让做出来的效果更加简洁炫酷。 二、大屏设计原则 一个大屏的设计主要可以分为两块，一个是 数据指标的选用 ，一个是与这些 指标对应的组件的使用

以卡丁车游戏演示 AI 开发过程，来一场速度与激情？自己玩卡丁车的时候总是碰撞？那不如跟着课程作者一起来打造一个可以自己掌控的AI 玩家？哇～想想就很酷，那我们开始吧！ #你将获得# 1、实践将机器学习 AI 应用到游戏的全过程 2、了解设计高质量机器学习 AI 的诀窍 3、课程中所用案例的全部源码 #课程简介# 在过去的一年里，深度强化学习技术从理论的不断革新走向了应用场景。在游戏中实际运用它，是我们今年系列的主题。 本期的课程里，我们将一起完成一款使用机器学习AI对手的卡丁车游戏（基于Unity官方免费美术资产）。游戏具有实际可玩性，玩家的对手完全通过机器学习过程创建。 课程主要分为四个部分： 1. 过去一年的发展与工作环境更新 2. 以卡丁车游戏演示 AI 开发过程 3. 优质 AI 的神经网络、观测与奖励设计 4. 将 AI 整合进入游戏里并进行总结 试玩了WebGL版本，不得不说，AI开得比我好 #关于作者# 张骋： 自动驾驶/AI算法工程师 2006年12月进入游戏行业，2017年转入自动驾驶领域。在国内自主品牌车企参与自动驾驶软件研发工作，目前仍为独立游戏开发者。 周蕴嘉： AI算法/工具开发工程师 更多精彩文章，可下载 【在理】APP 查看~ 来源： oschina 链接： https://my.oschina.net/u/4390329/blog/4462795

以下内容转载自木的树的文章《WebGL着色器32位浮点数精度损失问题》 作者：木的树 链接： https://www.cnblogs.com/dojo-lzz/p/11250327.html 来源：博客园 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前言 Javascript API GL 是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅。 提供丰富的功能接口，包括点、线、面绘制，自定义图层、个性化样式及绘图、测距工具等，使开发者更加容易的实现产品构思。 充分发挥GPU的并行计算能力，同时结合WebWorker多线程技术，大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制，同时可以保持高帧率运行。 同步推出基于Javascript API GL的 位置数据可视化API库 ，欢迎体验。 问题 WebGL浮点数精度最大的问题是就是因为js是64位精度的，js往着色器里面穿的时候只能是32位浮点数，有效数是8位，精度丢失比较严重。 分析 在基础底图中，所有的要素拿到的都是瓦片里面的相对坐标，坐标范围在0-256之间。在每次渲染时都会重新实时计算瓦片相对中心点的一个偏移来计算瓦片自己的矩阵，这种情况下精度损失比较小，而且每个zoom级别都会加载新的瓦片，不会出现精度损失过大问题。 但是对于一些覆盖物，比如marker

以下内容转载自totoro的文章《WebGL-Y轴翻转踩坑实录》 作者：totoro 链接： https://blog.totoroxiao.com/webgl-flipY/ 来源： https://blog.totoroxiao.com/ 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前言 自定义栅格图层 是指用户可以通过特定软件，将自定义的图像按照上文所述的方式切割为瓦片，并生成图片，然后按照瓦片坐标拼接形成地图的图层。常用于手绘地图、卫星图、地形图等。 案例背景 基于 WebGL 的地图渲染API，实现自定义栅格图层（将地图切分为等大的正方形，并以图片进行拼接渲染）时，为了节省纹理上传的开销，将栅格瓦片集中绘制到一张纹理上，然后绘制时根据瓦片各自的纹理坐标取各自的纹理，大概示意图如下： 瓦片根据加载的先后顺序依次排列绘制到大纹理上，占位宽度一致，竖向排列。比如若瓦片大小为256px，那么瓦片1的位置为 {x:0, y:0} , 瓦片2的位置为 {x:0, y:256} 。 然后出现了一系列问题： 瓦片错乱：瓦片1的位置显示了瓦片4的内容； 瓦片内容倒置。 问题分析 根据调试定位，发现问题的根源在于Y轴翻转。 问题1: Y轴翻转是什么？为什么要翻转？ 先看看没有任何处理的情况下如何绘制纹理，我们绘制瓦片的基本顶点模型是一个中心在原点的正方形

1. YouTube - Unity a. Improve your animation workflow with Animation Rigging | Unite Now 2020 ( YouTube ) ( Bilibili ) 　　Unity 2020.1的新功能Animation Rigging介绍 b. Making a flag wave with Shader Graph | Unite Now 2020 ( YouTube ) c. Making a Water Shader in Unity with URP! (Tutorial) ( YouTube ) ( Bilibili ) ( Bilibili官中 ) 　　　以上两部都是ShaderGraph教学 d. Optimization tips for maximum performance - Part 2 | Unite Now 2020 ( YouTube ) e. Optimization tips for maximum performance – Part 1 | Unite Now 2020 ( YouTube ) 　　　性能优化 f. Empowering Storytellers with Real-Time Technology | CG Animation & Film -Unite