WebGL

前言 随着近几年物联网、万物互联等诸多概念的大行其道，智慧城市的概念也早已经被人们耳熟能详，而作为城市的组成部分， 智慧建筑 也是重中之重，智慧园区，智慧小区等也如雨后春笋般的相继出现。 智慧建筑是指通过将建筑物的结构、系统、服务和管理根据用户的需求进行最优化组合，从而为用户提供一个高效、舒适、便利的人性化建筑环境，智慧建筑绝不仅仅只是智慧园区、智慧小区这种模式，这里我就通过 HT for Web 制作了一个以 会展中心 为主体的智慧建筑监控系统。 效果预览 代码实现 场景呈现 通过上面的效果预览，可以分辨出整个监控系统是分为 3 个层次的，分别是主体、楼内、展厅，如果是使用单个 graph3dView 加载所有场景，通过 dm.clear() 清除场景， dm.deserieialize() 加载新场景这种切换方式必然会有一个极短的渲染时间，使切换时不连贯，所以我这里就使用了 3 个 graph3dView ，去呈现各自的层级模型，通过 notifier 事件通知器监听场景切换，代码如下： notifier.add((event) => { if (event.kind === 'sceneChange') { const oldSceneKey = event.oldScene, newSceneKey = event.newScene, oldScene = G

　　之前在测试怎样运行 WebGL 的时候使用了远程加载文件进行测试 : 发布WebGL的过程 　　因为对浏览器不是很熟悉, 现在用编辑器模式直接跑一下, 来看看 UnityWebRequest 的下载和缓存, 我使用了一个叫 WebGL_Test 的工程, 然后获取它的编辑器下的缓存目录看看 : [MenuItem( " Tools/Test " )] public static void Test() { Debug.Log(Caching.currentCacheForWriting.path); } C:/Users/XXXX/AppData/LocalLow/Unity/ DefaultCompany_WebGL_Test UnityEngine.Debug:Log(Object) 　　这是一般的缓存路径, 不过看到它的文件夹是一个 PlayerSettings 里面的设置拼接成的文件夹 : 　　通过远程方式加载 AssetBundle 文件之后, 再看看它在本地进行了怎样的缓存 : 　　跟加载的 AssetBundle 名称一样, 它创建了对应名称的文件夹, 而且是直接在根目录创建的, 没有按照 AssetBundle 包的相对路径来, 进去看之后发现它还是以文件夹的形式来对应哈希值 : 　　而最后的这些缓存文件 __data 应该就是缓存的 AssetBundle了,

SVG只是一种 矢量图 形文件格式， 不仅现在的浏览器都支持，很多主流的系统也都支持。 Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于 2D的API 。 WebGL 是以 OpenGL ES 2.0 为基础的一套 浏览器 3D图形API （HTML5），在编程概念上与OpenGL ES 2.0 几乎是完全通用的，同样采用可编程渲染管线，也就是每个顶点的处理受到一小段Vertex Shader代码的控制，每个像素的绘制过程也受到一小段Fragment Shader代码的控制。WebGL主要是3D为主， 不过2D的绘图要求也可以变通来实现。 WebGL 无论如何都需要一个显示对象来呈现，这个对象就是 Canvas，仅此而已，WebGL不对Canvas有任何附加的操作API， 那部分属于浏览器js支持的范畴。 WebGL 也继承 OpenGL ES 2.0 的兼容性支持能力， 在不同的设备上做有限的支持，需要运行时查询。 Three.js 、Babylon.js、Blender4Web等是几种知名的 WebGL 开发框架，对 WebGL 基础操作做了大量的封装，可以拿来就用， 即使不了解 WebGL规范的细节。 d3.js 是采用svg的数据驱动Dom ，用来对数据进行可视化

VMLogin浏览器配置文件设置非常重要，如果设置有明显的冲突或不符合常理，那么所应用到的场景可能就会受到影响。下面我们来看看哪些不合常理的配置例子： WebGL vendor (供应商): 像苹果手机和苹果电脑一般都是 WebGL vendor ：Apple Inc. WebGL renderer(渲染器)：Apple GPU 如果我们是 Windows 系统情况下，大部分是： WebGL vendor ：Google Inc. 我们在做实验的情况下Chrome浏览器和Internet Explorer（Edge）测试取WebGL vendor 会有两种不同值 ，Chrome 取为 Google Inc. Internet Explorer（Edge）取为 Microsoft ，所以 WebGL vendor 不能完全翻译为《显卡供应商》，因为它和浏览器开发商有关。我们有趣的发现Firefox浏览器取值 WebGL vendor ：Google Inc. 所以这里我们可以得出一个结论：如果我们把User-Agent标识成了Chrome 和 Firefox 浏览器，那么最好 windows 系统 WebGL vendor 设置为Google Inc. 比较合理。 高手 User-Agent 配置不得不熟悉 首先，我们来了解一下什么是 User-Agent。 User

前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 作者：费弗里 1. 简介 Kepler.gl相信很多人都听说过，作为Uber几年前开源的交互式地理信息可视化工具，kepler.gl依托WebGL强大的图形渲染能力，可以在浏览器端以多种形式轻松展示大规模数据集。 更令人兴奋的是Kepler.gl在去年推出了基于Python的接口库keplergl，结合jupyter notebook/jupyter lab的相关拓展插件，使得我们可以通过编写Python程序配合Kepler.gl更灵活地制作各种可视化作品。 而随着近期keplergl的更新，更多的新特性得以同步到其Python生态中，本文就将针对其中的路径动画的制作方法进行介绍。 2.基于keplergl的路径动画 我们要制作的路径动画图主要用于表现特定路径上流的运动，譬如图3的例子来自Kepler.gl官方示例： 而在官方的说明中描述了要绘制路径动画需要输入的数据格式： 这是一个典型的GeoJSON格式LineString要素，特别的是其"coordinates"键对应的值不同于常规的[经度, 纬度]格式，而是代表着[经度, 纬度, 高度, 时间戳]，其中高度非必要，可以设置为0，而时间戳则声明了轨迹动画在该时间点会到达的该点位置，即线要素上连续的点位置

以下内容转载自木的树的文章《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

　　从 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/4414849/blog/4377203

前言 先上一个辛苦弄出来的gif效果。写公众号时间不长，很多技巧还在慢慢跟小伙伴学习。可关注公众号，回复“绘图”或者“填色”都可获得demo的git地址。请使用Creator2.4.0运行 填色游戏种类也挺多的，我今天要说的是一种相对简单的填色。 对于填色游戏的做法，我在论坛里搜到不少帖子，尤其是这个帖子的留言比较多： 油漆桶填色效果怎么实现啊，找了两天都找不到资源 其中有一条留言跟我的想法不谋而合， 尤其是做了之前的取色，绘图等功能后，对webgl的readPixels()函数返回的数据处理起来越来越顺手。所以就用了替换数据的方式。 还有一种填色游戏采用的纯Graphics的方式，各种贝塞尔曲线，矩形，直线和moveTo，实现几个区块填指定颜色的填色游戏，我感觉那种应该是借助工具的，因为生成的文件相当大。如果有知道的同学可以在下方留言，一起交流。 制作方式 先上一张图 这是一张我在《绘图游戏调色盘取色方法》的文章中展示的一张图，图片左侧的色盘是原始图，右侧是使用相机截屏获得的数据更新后的图。当时是为了验证截屏的正确性而做的。这次正好用来做填色游戏。 制作原理 实际上更改的就是右侧这张图使用的数据。左侧的图接收触摸事件，通过触摸点的位置，更新颜色数据。所以只要将两张图片重叠，用右边的图片盖住左边的图片，然后使用处理过的颜色数据更新右边的这张图，效果也就出来了。这里需要说一嘴