- 博客(167)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 数字孪生开发之 Three.js 插件资源库（9）
本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。对于之前分享的插件，可以关注公众号，后台回复相关信息（如“threejs加载3dtiles的插件”、“threejs描边功能插件”等）即可获取相应信息。THREE.Terrain是一个用于Three.js 3D图形库的程序生成地形引擎。该引擎支持多种地形生成方法，如Perlin噪声和等，用户可以生成、导出和导入高度图。它还提供了动态地形材质的生成功能，允许根据地形的高度和位置自动纹理化地形。
2025-03-25 13:39:29
408
原创 数字孪生开发之 Three.js 插件资源库（8）
欢迎关注公众号：【sky的数孪技术】本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。对于之前分享的插件，可以关注公众号，后台回复相关信息（如“threejs加载3dtiles的插件”）即可获取相应信息。本期整理出关于轮廓渲染的插件库。在 ThreeJS 和 PlayCanvas 中实现后期处理轮廓着色器。通过后处理着色器，结合深度缓冲区和表面法线缓冲区，可以渲染出轮廓效果。
2025-03-25 13:38:19
442
原创 Cesium开发基础之坐标参考系统（2）
世界大地测量系统（WGS84）定义了地球的参考椭球体、水平基准、垂直基准和坐标系统。WGS84同时定义了一个地心坐标系统和地理坐标系统。通常，当我们想到ECEF坐标（x, y, z）或地理坐标（经度、纬度、高度）时，我们就会想到WGS84。WGS84定义了一个以地球为中心、固定在地球上的（ECEF）右手坐标系统。它的原点位于地球的中心。X轴通过赤道和本初子午线的交点，Y轴通过赤道和90°经线的交点，Z轴指向北极。默认单位是米。半长轴为6,378,137米，扁率为298.257223563。
2025-03-12 17:05:53
981
原创 Cesium开发基础之坐标参考系统（1）
笛卡尔坐标是二维或三维直线坐标。地心坐标是相对于地球中心的笛卡尔坐标。由于地球赤道的半径大约是6,378,137米，地球表面的地心坐标通常在六百万到七百万之间。地心地固（ECEF）坐标是固定在地球上的地心坐标；随着地球的旋转，这个系统也会旋转，定义在ECEF中的物体相对于地球保持不变。ECEF与ECI（地心惯性）相对，后者的坐标轴是固定的，而地球在自转。ENU坐标是在一个局部的东-北-上参考框架中的笛卡尔坐标，其中X代表东，Y代表北，Z代表上。对局部区域的瓦片集应用缩放因子。
2025-03-12 17:05:13
891
原创 数字孪生开发之 Three.js 插件资源库（7）
本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。对于之前分享的插件，可以关注公众号【sky的数孪技术】，后台回复信息（如“threejs加载3dtiles的插件”）即可获取相应信息。该工具帮助程序从任意 three.js 场景中提取等距矩形全景图 PNG。
2025-03-04 16:52:02
423
原创 CesiumJS进阶之路：IBL、动态环境贴图与环境光遮蔽技术升级
欢迎关注公众号【sky的数孪技术】随着Cesium在Unreal Engine和Unity中的普及，原生应用开发者对地理空间应用的视觉表现提出了更高要求。游戏引擎特有的动态日光系统、光探针和全局光照等技术已开始应用于地理空间领域。CesiumJS团队一直在探索基于浏览器的地理空间三维应用的次世代光照方案。良好的照明对于充分利用基于物理的渲染（PBR）至关重要，PBR 是模型和 3D Tiles 中常见的渲染技术。想象一下抛光的金属球：它看起来平坦而暗淡，没有任何东西可以反射。
2025-03-04 16:51:24
1218
原创 Cesium开发基础之地理空间概念
椭球体是由以下方程定义的隐式曲面：其中a、b和c分别是沿x、y和z轴的三个半径。如果两个半径长度相同，椭球体就是一个球体。如果第三个轴较短，椭球体就是一个扁球体。较大的相等半径称为长半轴，较小的半径称为短轴。下面的左下角椭球体是一个扁球体。参考椭球体用于近似地球或其他行星体的形状。地球具有扁球体的特征：它在赤道处等距，而在两极比赤道宽。地球的参考椭球体通常由两个参数定义：长半轴和扁平度，其中扁平度由以下方程定义：其中a是长半轴，b是短半轴。
2025-02-25 10:53:54
830
原创 数字孪生开发之 Three.js 插件资源库（6）
本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。对于之前分享的插件，可以关注公众号【】，后台回复信息（如“threejs加载3dtiles的插件”）即可获取相应信息。这是一个基于Three.js的力导向图（Force Directed Graph）库，能够在网页上进行GPU加速的图形可视化。它支持成千上万的节点和链接，具有可配置的点和链接颜色，兼容d3.js的数据格式，支持2D和3D模拟模式。
2025-02-25 10:51:13
497
原创 数字孪生开发之 Three.js 插件资源库（5）
在当今科技飞速发展的时代，数字孪生（Digital Twin）技术正以其独特的魅力和强大的功能吸引着人们的目光。数字孪生是一种将物理实体与虚拟模型相对应的技术，它可以为我们提供物理实体的数字化副本，从而实现对物理实体的监测、模拟、优化和控制等操作。通过数字孪生，我们能够在虚拟世界中对物理世界的对象和系统进行深入分析，为各种复杂问题的解决和决策提供有力支持，涵盖了从工业制造、建筑设计、城市规划，到航空航天、医疗保健等多个领域。为了实现高效、逼真的数字孪生系统，开发人员需要强大的工具和资源。
2025-02-20 10:16:38
882
原创 GIS开源图形库更新内容（2025.02）
此次记录时间为 2025.01.10 - 2025.02.10，其中Maplibre有大版本更新，支持球模式！
2025-02-20 10:16:16
323
原创 数字孪生开发之 Three.js 插件资源库（3）
在当今数字化快速发展的时代，数字孪生技术正逐渐成为各个领域的关键技术之一。它通过创建物理实体的虚拟副本，实现对实体的实时监测、模拟和优化，为企业和组织带来了诸多好处，如提高生产效率、降低成本、改进产品质量等。然而，数字孪生的开发并非易事，需要掌握一系列的技术和工具，以及丰富的资源支持。本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。基于 WebGL 的 three.js 粒子系统引擎，能够从精灵以及 3D 网格创建粒子系统，包含多种粒子行为和初始化器。
2025-02-11 13:27:42
434
原创 数字孪生平台 v5.2 发布
本平台以展示三维可视化应用为主，聚焦可视化相关技术实现，囊括数字孪生、GIS、仿真、Web图形特效等应用。每月初更新版本，发布新的示例以及开源一些示例，基于threejs技术栈，电路板在 Blender 中建模，通过连接不同的引脚来构建线路，然后控制开关来实现仿真效果。基于R3F技术栈，通过用户交互实现雪地地形重塑，并针对性能和视觉保真度进行了优化。基于Babylon.js技术栈，实现建筑加载、水面效果以及飞行动画。基于threejs技术栈，模拟水中潜艇，并加入水中光线，增强效果。新增示例：海底潜艇模拟。
2025-02-11 13:26:54
462
原创 GIS图形库更新2024.11.10-12.10
本期发布了 2.11.0 版本。这是 Cesium for Unreal 支持 Unreal Engine v5.2 的最后一个版本。未来版本将需要 Unreal Engine v5.3+。本期发布了 1.124 版本，此次更新主要集成了 Bentley 旗下的 iTwin 平台。本期发布了 3.8.0 版本。此版本更新了大量的试验性支持，将可能会出现下一个大版本。优化后，AO 效果会变得更模糊，并且在远离相机时仍然可见（尽管强度较低）优化前，AO 效果在缩小时会消失。
2024-12-10 13:24:49
1091
原创 Three.js + Luma 实现高效绘制3DGS
3DGS，即三维高斯溅射技术（3D Gaussian Splashing），是一种先进的三维建模和可视化技术。它主要用于计算机图形学、计算机视觉和相关领域，以实现对三维场景的高效和精确表示。3D 高斯溅射 (3DGS) 的核心技术是通过数百万个微小的、半透明的椭球体（即“高斯溅射”）来创建和渲染 3D 场景。与依赖多边形或复杂神经网络的传统方法不同，3DGS 利用这些溅射点来表现场景。每个溅射点包含其位置、颜色、大小和透明度的信息。当经过组合后，这些溅射点能高度还原场景的真实感。
2024-12-10 13:24:03
2022
1
原创 数字孪生开发之 Three.js 插件资源库（2）
在当今数字化快速发展的时代，数字孪生技术正逐渐成为各个领域的关键技术之一。它通过创建物理实体的虚拟副本，实现对实体的实时监测、模拟和优化，为企业和组织带来了诸多好处，如提高生产效率、降低成本、改进产品质量等。然而，数字孪生的开发并非易事，需要掌握一系列的技术和工具，以及丰富的资源支持。本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。three.js 的一系列着色器材质集合。
2024-11-27 14:13:16
984
原创 【WebGPU Unleashed】1.5 用单个缓冲区绘制彩色三角形
但是，如果我们需要频繁更新顶点颜色（例如在动画中），那么将属性分离到不同的缓冲区中可能会更好。在这种情况下，使用单个缓冲区效率更高，因为它可以避免创建额外的资源，并且无需将数据从 CPU 复制到 GPU 两次。在前面的示例中，我们使用两个单独的缓冲区和两个 location 来提供顶点的位置和颜色，但是使用多个缓冲区并不总是必要的或最佳的。首先，我们修改颜色属性描述符。设置为 24 字节 (4 * 6)，而不是以前的 12，因为每个顶点现在有 6 个与其关联的浮点数（3 个用于位置，3 个用于颜色）。
2024-10-21 13:27:04
338
原创 Cesium里关于Primitive位置更新问题
时，是同步创建，可以在创建时移除，缺点是大量渲染会造成阻塞。但是如果指定异步方式，就会出现渲染闪烁的问题，因为无法确定primitive在哪一帧才能创建完成。中没有位置更新的回调方法，只能先移除再重新创建。创建primitive时，我们可以指定异步方式，当我们设置。来更新实体的位置，但是如果涉及到大量实体（比如线）位置更新的话，用。属性来判断primitive何时创建完成，但是需要通过。在Cesium里面，我们可以用。对于这个问题，我们可以利用。加载实体的方式，来通过。来绘制大量实体，但是。
2024-10-21 13:26:31
1272
2
原创 【WebGPU Unleashed】1.4 对不同的顶点设置不同颜色
值得注意的是，这种插值不仅限于颜色，我们在顶点阶段输出的任何值都将由 GPU 进行插值，以便为每个片段分配适当的值，特别是对于那些不直接位于顶点的片段。这种机制非常有用，因为考虑到场景中的片段通常远多于顶点，单独为所有片段指定值是不切实际的，所以我们可以依靠 GPU 根据仅在每个顶点定义的值有效地生成这些值。通过为不同的顶点分配不同的颜色，我们现在可以解决之前提出的问题：如何为位于三角形中间的那些片段生成片段颜色？然而，最有趣的方面是这些顶点之间发生的情况，我们可以观察到三角形表面颜色的平滑过渡。
2024-10-11 13:13:52
962
原创 【WebGPU Unleashed】1.3 硬编码顶点颜色
在我们之前的教程中，我们在片段着色器中对输出颜色进行了硬编码。这次，我们将把这种硬编码转移到顶点阶段，并将颜色从顶点阶段传递到片段阶段。本节的内容不多，请访问。你可以修改示例代码并亲自尝试这个概念，尝试为每个顶点分配不同的颜色，并观察 GPU 如何在三角形表面上插入这些颜色。在顶点阶段，我们处理单个顶点，而在片段阶段，我们处理单个片段。这里有一个值得思考的有趣问题：如果我们为每个顶点分配不同的颜色，GPU 将如何为片段分配颜色？在顶点和片段阶段之间，有一个称为光栅化的自动过程，由 GPU 处理。
2024-10-11 13:13:30
212
原创 使用 Three.js GPGPU 和着色器进行 RGB 偏移的网格置换纹理
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123在本文中，我们将学习如何使用 Three.js 创建像素/网格位移效果，并通过着色器和 GPGPU 技术进行增强。并介绍了动态响应光标移动的 RGB 移位效果的应用。最后，我们将深入了解如何在 WebGL 中操作纹理和创建交互式视觉效果，从而使用 Three.js 扩展我们的创意能力。
2024-09-25 13:45:46
1009
原创 【WebGPU Unleashed】1.1 绘制具有定义顶点的三角形
一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123在我们之前的教程中，我们在没有提供显式顶点数据的情况下绘制了一个三角形，绘制原理是在着色器中计算顶点位置。虽然这种方法适用于简单的几何形状，但对于大多数现实场景来说是不切实际的。
2024-09-25 13:44:50
872
原创 GIS图形库更新2024.8.4-9.9
更多精彩内容请访问 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信：digital_twin123。
2024-09-09 12:28:45
731
原创 【WebGPU Unleashed】1.1 绘制三角形
在前面的示例中，我们没有创建任何着色器。着色器程序是在GPU上执行的程序，一般来说，着色器程序主要分为三种类型：顶点着色器、片段着色器和计算着色器。计算着色器用于通用计算，而顶点和片段着色器与渲染相关。顶点着色器处理几何体的每个顶点，确定其在屏幕上的最终位置。然后，片段着色器确定由这些顶点定义的形状内每个像素的颜色。这些着色器共同将几何图元（例如点或三角形）转换为我们在屏幕上看到的像素。...</现在我们了解了着色器的作用，接下来我们将它们添加到我们的项目中。
2024-09-09 12:28:15
1344
原创 【WebGPU Unleashed】1.0 创建空画布
一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123创建空画布一开始可能看起来比较枯燥，但对于任何涉及 WebGPU 编程的项目来说，它都是一个重要的起点。在本节中，我们将为全书的所有编程练习奠定基础。
2024-09-02 13:22:23
803
原创 【WebGPU Unleashed】0.1 GPU管线
在结束本节之前，我们首先讨论一下为什么需要 GPU。为什么我们不能只使用强大的 CPU 来处理图形工作？打个比方，想象一下你是一个工厂主，你总是想雇用拥有博士学位的员工来替你打工吗？如果你正在建设一家专利工厂，那么聘请博士是非常有意义的。然而，如果你正在建造一家香蕉罐头工厂，并且任务只是剥香蕉皮，那么雇用 100 只猴子可能是更好的选择。使用相同数量的资源，可以维持更大的猴子团队。博士非常有能力，可以在研究项目上进行良好的合作，但剥香蕉不需要广泛的研究能力或合作。
2024-09-02 13:21:57
1272
原创 【WebGPU Unleashed】0.0 GPU驱动程序
学校毕业后，我找到了第一份工作，担任系统软件工程师，负责 OpenGL（GPU 驱动程序）工作。但当时我对驱动程序的了解还相当有限。在大学里，GPU和驱动软件并不是计算机科学研究的重点，所以我只知道驱动程序是一个软件，充当硬件和应用程序之间的桥梁。我不知道它是如何工作的，也不知道它传输到硬件的数据类型。直到我加入团队并开始从事该项目后，我才对 GPU 驱动程序的运行方式及其在图形渲染过程中的关键作用有了更深入的了解。作为图形工程师，我们编写程序在屏幕上绘制像素。
2024-08-26 12:39:07
1206
原创 【WebGPU Unleashed】序言
WebGPU 是一种新的图形 API，概念上与其他 API 类似，但目标不同：它的目标是将本机的图形能力引入到Web上。在此概述之后，我们将探索 WebGPU 最简单的用法：绘制三角形，这是 3D 图形的基本元素。我认为涵盖这些主题是至关重要的。在撰写本文时，高斯泼溅是一种尖端的场景表示和渲染技术，能够捕获和渲染现实生活中的 3D 场景，具有高度的真实感和实时性能。对于想学习图形编程的来说，几年前，OpenGL 是初学者的首选 API，而 DirectX 则是那些对游戏开发感兴趣的人的替代选择。
2024-08-26 12:38:19
503
原创 Threejs中的WebGPU实践（1-2）
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123此处接上文：Threejs中的WebGPU实践（1-1）
2024-08-19 13:26:11
1406
原创 Threejs中的WebGPU实践（1-1）
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123对于一直关注 Three.js 的最新发展的人来说，经常会发现陷入了的未知领域，因为直到现在也没有一些官方的思维导图。事实上，虽然 Three.js 的 WebGPURenderer 能够满足大多数项目要求，但在技术上仍处于未完成的状态，许多其他功能仍处于不断改进、重新开发的过程中。
2024-08-19 13:20:00
2828
原创 WebGL2学习(2): GLSL ES 3.0
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123WebGL 2.0 给 GLSL 带来了重大变化。WebGL 1.0 中使用的 GLSL 版本是 GLSL ES 1.0。WebGL 2.0 中仍然可用。但是，通过编写描述符来启用它，可以使用 WebGL 2.0 中的 GLSL ES 3.0。由于GLSL本身的版本已经升级，所以会采用完全不同的编写方式。这次，我们重点关注因 GLSL ES 3.0 而发生变化的部分。
2024-08-12 13:06:51
909
原创 Mapboxgl 实现弧线功能
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-08-12 13:06:24
435
1
原创 WebGL2学习(1): 与1.0的比较
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123WebGL的第一个版本1.0于2011年被正式推荐。随后，在 2016 年举办的 SIGGRAPH 上，宣布 NVIDIA 的驱动程序已全部通过 WebGL 2.0 一致性测试。在这篇文章中，我们来介绍一下WebGL 2.0的典型特征。
2024-08-05 12:26:21
1199
原创 GIS图形库更新2024.7.29-8.4
更多精彩内容请访问 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-08-05 12:25:16
636
原创 实时渲染水体焦散
焦散是光从表面（在我们的例子中是空气/水界面）折射和反射时出现的光斑。由于在水波上发生的反射和折射，水充当了动态放大镜，于是就产生了这些光斑。在这篇文章中，我们重点关注光折射引起的焦散，主要是水下发生的情况。为了能够获得稳定的高帧率（60fps），我们需要在显卡（GPU）上计算它们，因此我们将完全使用 GLSL 编写的着色器来进行计算。计算水面的折射光线（这在 GLSL 中很简单，有内置函数使用相交算法计算这些光线照射到环境的位置通过检查光线会聚的位置来计算焦散强度。
2024-07-29 13:14:49
1256
原创 在mapboxgl上用webgl实现带贴图的自定义图层
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-07-29 13:14:22
435
原创 Cesium雷达扫描线效果
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-07-22 13:11:12
942
4
原创 Raymarching 图形解释
Raymarching 是一种在 Shadertoy 等网站中流行的 3D 渲染技术，它令人惊奇的能力是没有任何 3D 几何图形，构成场景的所有对象都是使用数学函数实时生成的。接下来我们研究下光线行进算法如何从头开始工作，并使用着色器创建我们自己的光线行进器。
2024-07-15 13:11:37
1105
原创 Mapboxgl 生成飞行动画GIF
更多精彩内容尽在数字孪生平台，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123根据两点生成动画的工具。首先，找到你想要开始的视图，点击“设置起点视图”，然后调整到目的视图，点击“设置终点视图”。点击“开始动画”来创建一张gif图。源码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Fly to
2024-07-15 13:11:05
1318
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人