![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgl
文章平均质量分 87
搞GIS图形的sky.
三维GIS、图形相关,公众号:sky的数孪技术
展开
-
【数字孪生平台示例解析】风格化城堡效果
更多精彩内容尽在。本示例场景具有独特的风格化外观,除了动画角色(骑士和鸟类)之外,没有使用任何纹理。为了增加场景的深度效果,还应用了简单的线性顶点雾和实时阴影。场景总大小(包含静态和动态对象)为 95k 个三角形。原创 2024-03-15 13:25:38 · 850 阅读 · 0 评论 -
数字孪生平台示例解析——高质量花草场景效果
更多精彩内容尽在。原创 2024-03-08 10:32:40 · 492 阅读 · 0 评论 -
webgl与webgpu比较
WebGPU 虽然也有一个总管家一样的对象 —— device,类型是 GPUDevice,表示可以操作 GPU 设备的一个高层级抽象,它负责创建操作图形运算的各个对象,最后装配成一个叫 “CommandBuffer(指令缓冲,GPUCommandBuffer)”的对象并提交给队列,这才完成 CPU 这边的劳动。在 WebGL 中,始终会调用着色器的入口main函数,但在 WebGPU 中,当使用着色器时,可以指定要调用的函数。当然,仍然可以自己检查错误,但即使什么都不做,仍然可以获得一些有用的信息。原创 2023-09-10 17:48:35 · 1042 阅读 · 2 评论 -
漂浮岛场景WebGL效果解析
访问,代码在。原创 2023-09-02 16:21:46 · 204 阅读 · 0 评论 -
风机可视化效果实现
风机效果图如上所示,这个效果是网上看到的,就分析了一下。主要用Threejs来实现,大致效果是一个风机,从原来白色表面材质,逐渐过渡到线框效果,并且底部也有一些类似于流线浮动的效果。原创 2023-02-08 09:57:09 · 546 阅读 · 0 评论 -
Cesium学习笔记(4)
1.方位与方向(orientation和position)Orientation:若以正北为参照。Heading:初始方向为正北,正角度为向东旋转,即水平旋转Pitch:正角度为平面之上,负角度为平面之下,即前后旋转Roll:左右旋转Position:关于position有多种类型,如SampledPositionProperty类型,是一个含有多个样本点位置的对象,主原创 2016-09-24 20:10:12 · 23141 阅读 · 5 评论 -
Cesium学习笔记(3)
1.解决czml生成轨迹后,模型无法转向的问题生成运动轨迹:在czml文件中储存轨迹点数据,通过load方法加载该czml文件,return一个CzmlDataSource类型的Promise对象,然后在回调中处理该对象。viewer.dataSources.add(Cesium.CzmlDataSource.load(czmlTest)).then(function(ds){原创 2016-09-17 13:42:23 · 8715 阅读 · 3 评论 -
Cesium学习笔记(2)
Cesium学习笔记(2)(1).坐标系转换cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系(世界坐标)。我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标,笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等。二者的联系如下图, 笛卡尔空间坐标的原点就是椭球的中心. Pick----屏幕坐标 Cartesian----世界坐标 cartog原创 2016-09-11 12:12:40 · 24232 阅读 · 9 评论 -
Cesium学习笔记
一、Cesium简介Cesium 是一个JavaScript库用于在Web浏览器创建 3D 地球和 2D 地图,无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化;跨平台;跨浏览器;实现真正的动态数据进行可视化。Cesium 基于 Apache 开源协议,支持商业和非商业免费使用。该框架不需要任何插件支持,但是浏览器必须支持WebGL。Cesium 主要特性原创 2016-08-06 22:30:31 · 5575 阅读 · 0 评论 -
WebGL中的OpenGL着色器语言
来自http://www.cnblogs.com/zhiyishou/p/4592888.html,作者为纸异兽。在webgl中,调用了OpenGL-ES-2.0的API,而在OpenGL-ES专为嵌入式设备设计,其和其它设备一样,都是使用GLSL(GL Shading Language)来编写片段程序并执行于GPU的着色器上,来完成对对象的渲染。GLSL在其中起着相当重要的作转载 2016-10-02 16:59:43 · 746 阅读 · 0 评论 -
Cesium之Primitive相关探索
Primitive: 它代表着场景(scene)中的几何体,这个几何体可以是一个几何实例,或者由一组几何实例合并而成,即便它们是不同种类的几何体,例如一个矩形和一个椭球。 primitive通过把几何体和外观进行解耦,能够让我们混合和匹配他们中的大多数来添加一个新的几何体,或者彼此独立的外观。 它主要由两部分组成: ①.几何实例(GeometryInstance):定义了primitive的原创 2016-10-07 15:46:53 · 9909 阅读 · 1 评论 -
在WebGL应用中使用Web Worker提升效率
Web Worker介绍: js本身是一种单线程设计,我们无法在同一时刻并行运行多个脚本。虽然可以用setInterval,setTimeout方法来模拟多线程,但实际上这些方法都是存在于主线程使用的一个事件循环里,一旦存在一个耗时操作,就会牵制主线程的操作,导致页面卡顿。Web Worker通过引入类似线程的机制使这种问题得到了解决,通过在当前js主线程中使用worker类加载一个js文件来开辟原创 2017-06-24 14:14:47 · 6438 阅读 · 1 评论 -
GitHub上的WebGL库调研
1.three.js star: 32.9K 更新速率:频繁 这个无需多说,当下最流行的WebGL库, 轻量级,容易使用,很多webgl库都是基于它来构建。 官网地址:https://threejs.org/ GitHub地址:https://github.com/mrdoob/three.js2.phaser.js star: 15.3k 更新速率:频繁 Pha原创 2017-05-22 10:43:05 · 8591 阅读 · 1 评论 -
Cesium-3D Tiles 跳跃式层级细节
翻译自http://cesiumjs.org/2017/05/05/Skipping-Levels-of-Detail/ ,有改动 Cesium的3D Tiles使用分层细节(HLOD)来自适应地加载和优化3D模型。这样做能够使模型在离相机很远的时候能够渲染低分辨率的瓦片,在离相机近的时候渲染高分辨的瓦片。但是,展示HLOD模型的通用方法是加载每一级别分辨率的瓦片直到所需的翻译 2017-05-11 16:17:39 · 10782 阅读 · 3 评论 -
Cesium热力图实现
生成热力图的算法我是用的一个热力图插件 heatmap.js。heatmap中热力图生成原理:heatmap中首先会根据输入的渐进色参数,在内部生成一个0-255色值的调色板。var _getColorPalette = function(config) { var gradientConfig = config.gradient || config.defa原创 2017-05-14 10:01:46 · 21230 阅读 · 7 评论 -
Cesium之地形(1)
Cesium地形简介Cesium支持多种地形格式和服务,Cesium的母公司AGI提供了两份免费使用的地形数据,一个叫“STK World Terrain”,它是高分辨率,基于mesh的地形数据;另一个叫“PAMap Terrain”,处于美国宾夕法尼亚州的一处地形数据。在Cesium中,地形和影像是不同处理的,默认是影像覆盖在地形上,任何的影像的provider都可以在任何的地形原创 2017-05-11 12:28:17 · 20110 阅读 · 1 评论 -
Cesium学习笔记(5)
1.更改cesium的选择框大小 在Souce/Widgets/SelectionIndicator/SelectionIndicator.js中修改: 在Souce/Widgets/SelectionIndicator/ SelectionIndicator.css中修改: 2.对于label和billboard字体或图片不清晰问题的解决方案:原因:billboard是栅格图像,处在原创 2016-12-25 16:08:27 · 8699 阅读 · 1 评论 -
基于Cesium的demo赏析(持续更新)
更新于2017.1.14Cesium的强大不用多说,所以有很多政府、组织基于cesium做了一些应用,其中不乏有很多优秀的示例,我们大都可以从中获得对自己的项目有益的东西。另:有的网站需要翻墙。 1.一个NASA的海洋风向可视化项目 网址:http://mwsci.jpl.nasa.gov/rapidscat/ 2.Cesium官网的一个滑雪的demo,里面还有视频播放 网址:http原创 2016-12-05 22:42:29 · 36396 阅读 · 22 评论 -
Cesium加载MBTiles矢量切片
MBTiles 是由 MapBox 制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用,管理和分享的规范。该规范由MapBox制定,详见http://mapbox.com/mbtiles-spec/。 透过数据库索引的方式提高瓦片索引的效率,比通过瓦片文件方式的读取要快的多。MBTiles其实只是一个SQLite数据库文件,优点在于小,方便迁移,可以存在于移动端。 MBTiles切分后原创 2016-11-27 22:28:57 · 19328 阅读 · 14 评论 -
WebGL风向图
前面关于webgl的基本知识点就没翻译,原文地址概述制作风向图通常步骤 1. 在屏幕上生成一系列随机粒子位置并绘制粒子。 2. 对于每一个粒子,查询风数据以获得其当前位置的粒子速度,并相应地移动它。 3. 将一小部分粒子重置为一个随机的位置。这就确保了风从不会变成空的区域。 4. 淡出当前屏幕,并在顶部绘制新定位的粒子。这有后续的性能限制: * 风粒子的数量应该保持在低水平(例如地球使用<翻译 2017-08-06 18:22:29 · 9594 阅读 · 2 评论