- 博客(131)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Cesium雷达扫描线效果
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-07-22 13:11:12
248
原创 Raymarching 图形解释
Raymarching 是一种在 Shadertoy 等网站中流行的 3D 渲染技术，它令人惊奇的能力是没有任何 3D 几何图形，构成场景的所有对象都是使用数学函数实时生成的。接下来我们研究下光线行进算法如何从头开始工作，并使用着色器创建我们自己的光线行进器。
2024-07-15 13:11:37
909
原创 Mapboxgl 生成飞行动画GIF
更多精彩内容尽在数字孪生平台，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123根据两点生成动画的工具。首先，找到你想要开始的视图，点击“设置起点视图”，然后调整到目的视图，点击“设置终点视图”。点击“开始动画”来创建一张gif图。源码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Fly to
2024-07-15 13:11:05
1114
原创 【源码下载】瓦房店农村电商大数据平台模板
用 echarts 和 jquery 实现的大屏模板效果，访问 dt.sim3d.cn，公众号后台回复【瓦房店农村电商大数据平台模板】获取源码。
2024-07-08 13:20:07
359
原创 Mapboxgl 根据 AWS 地形的高程值制作等高线
更多精彩内容尽在dt.sim3d.cn，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123使用mapboxgl 3.0版本，根据 AWS 地形图块的高程值制作等高线，源码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Contours</title> <meta name="v
2024-07-08 13:19:50
544
原创 Mapboxgl创建经纬度网格
关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。//修整经度，防止最大值溢出。//创建geojson数据。
2024-07-02 09:16:42
1149
原创 【源码下载】宇宙星空
用threejs和gsap实现的宇宙星空效果，访问 http://8.130.10.148:3000/digitaltwin/index.html，公众号后台回复【宇宙星空】获取源码。【源码下载】宇宙星空。
2024-06-24 09:31:01
233
原创 使用 SDF 和 WebGL 塑造镜头模糊效果
介绍如何利用有符号距离场 (SDF) 的功能在 WebGL 中绘制形状并创建交互效果，例如镜头模糊，关注公众号后台回复“SDF镜头模糊”即可获取源码。更多精彩内容尽在，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123有符号距离函数 (SDF) 的功能非常强大，这些函数对于渲染复杂的几何和形状以及创建动态视觉效果非常有效。它们简化了边缘检测和形状操作所需的计算，使其成为高级图形应用的理想选择。
2024-06-24 09:30:02
688
原创 【数字孪生平台】光幻示例解析
本文。更多精彩内容尽在，关注公众号：sky的数孪技术，技术交流、源码下载请添加VX：digital_twin123。
2024-06-03 14:27:43
997
1
原创 WebGPU学习（11）--- 独立于 Canvas 绘制
更多精彩内容尽在，关注公众号：sky的数孪技术，技术交流、源码下载请添加VX：digital_twin123。
2024-06-03 14:26:03
445
原创 深度精度可视化
GPU 硬件深度缓冲区通常不会存储物体位于相机前面的距离的线性表示，这与人们第一次遇到这种情况时的预期相反。相反，深度缓冲区存储与世界空间深度的倒数成比例的值，下面解释一下原因。在本文中，我们使用d表示存储在深度缓冲区中的值（在 [0, 1] 区间），使用z表示世界空间深度，即沿相机中心的距离，以世界单位（例如米）表示。一般来说，它们之间的关系是这样的形式从表面上看，我们可以将d视为的z的任何函数。那么为什么要做出这样的特殊选择呢？主要有两个原因。首先，1/z 很适合透视投影的框架。
2024-05-17 13:31:51
894
原创 使用Three.js绘制快速而逼真的水
GPGPU代表通用图形处理单元（General-Purpose Graphic Processing Unit），意思是用GPU计算图形以外的计算任务。在 Three.js 里，指的是我们使用片段着色器来计算其他内容（例如粒子的位置或速度）的技术。通过使用 GPU（GLSL 着色器）而不是 CPU（Javascript）来进行这些计算，我们可以从并行计算中获得巨大的性能提升。但是我们在 Three.js 中并不经常看到这个术语，更常见的是“帧缓冲区对象”或 FBO 一词。
2024-05-11 13:22:11
1370
原创 【数字孪生平台】使用 Three.js 以 3D 形式可视化日本新宿站地图
在本文中，我们将使用日本新宿站的室内地图数据，并使用 Three.js 将其进行 3D 可视化。更多精彩内容尽在。
2024-03-29 13:47:23
1536
原创 【数字孪生平台】使用 Three.js 绘制月球陨石坑
在本文中，我们将使用 NASA 发布的月球地形数据“SLDEM2015”在 Three.js 上绘制月球陨石坑。更多精彩内容尽在。
2024-03-29 13:46:14
1127
原创 【数字孪生平台示例解析】风格化城堡效果
更多精彩内容尽在。本示例场景具有独特的风格化外观，除了动画角色（骑士和鸟类）之外，没有使用任何纹理。为了增加场景的深度效果，还应用了简单的线性顶点雾和实时阴影。场景总大小（包含静态和动态对象）为 95k 个三角形。
2024-03-15 13:25:38
850
原创 Cesium的Picking过程原理
这时，会更新screenSpaceRectangle，只对点击的相关区域进行渲染,也就是只会更新局部区域，并返回PickFramebuffer中的FBO，因此渲染结果都是保存在PickFramebuffer的帧缓冲中，完成ID纹理。其实拾取的思路很简单，就是来一张“ID”纹理，对每一个渲染的Object赋予一个唯一的ID并将ID转为RGBA，在渲染到“ID纹理”时，渲染的是ID颜色。这时用户点击想要拾取每一个地物，则查找对应ID纹理中的颜色值并转为ID，根据ID找到对应的地物。
2024-03-15 13:24:03
402
原创 Maplibre自定义图层
墨卡托坐标->裁剪空间 | mercatorMatrix | (missing) || 世界坐标->屏幕空间 | pixelMatrix | pixelMatrix3D |
2024-03-08 10:34:48
510
原创 Cesium插件系列——3dtiles压平
中获得该顶点的模型局部坐标。如果我们要实现压平，最好是在ENU坐标下来进行修改顶点坐标的高度。所以我们要实现的逻辑就是：将顶点坐标转成ENU坐标 -----> 判断是否在多边形范围内 -----> 若是则修改高度 -----> 转回模型坐标。我们转成ENU坐标后，其实可以在EN平面上去进行判断。将多边形的经纬度点都转成ENU坐标，只取xy值，然后跟该顶点进行平面判断。这里是根据Cesium提供的CustomShader来实现的。本系列为自己基于cesium写的一套插件具体实现。
2024-03-01 18:05:17
1021
原创 Cesium地表透明
通过将地表的drawCommand放到透明队列里渲染。现在发现有了新的方法（其实2020年就有该方法了）：GlobeTranslucency。之前Cesium是不能地表透明的，需要改内部代码，将GlobeSurfaceTileProvider.js中的。也可以设置根据到相机的距离获取或设置地球背面的近和远半透明属性。当相机位于地下时，背面和正面会交换，即背面几何形状被视为正面。来计算的，所有这些都可能包含半透明度。还可以设置矩形范围，来呈现范围内的透明表面。下面代码是修改影像的透明度，可以看到地下。
2024-03-01 17:51:12
619
原创 Babylon.js 的 TAA（时间抗锯齿） 简介
在处理计算机生成的图像时，锯齿是最令人头痛的问题之一。锯齿以锯齿状线（几何锯齿）或亮点（镜面/着色锯齿）的形式出现，并且随着移动而变得更严重。由于屏幕（由像素组成）的离散性质以及每个像素只能是一种颜色，因此存在锯齿。每个像素实际上是场景一部分上的一个小窗口，并且应该能够显示从该窗口可见的所有颜色以准确描述场景，但由于它只能是一种颜色，因此我们必须决定使用哪种颜色显示。有很多算法可以处理这个问题，时间抗锯齿（TAA，Temporal Anti-Aliasing）就是其中之一。
2024-02-20 14:25:29
1222
原创 程序化生成glTF文件
虽然 glTF可用于单独存储Mesh，但更常见的是将Mesh放置在默认场景中。该库压缩后的重量约为 20kb，比 Three.js 或 Babylon.js 等完整 3D 引擎小得多。虽然在Blender等软件中创建 3D 模型更为常见，但有时我们希望在代码中创建模型。gltf-transform库可以做的不仅仅是创建新文件，它更常用于优化现有的 glTF 文件，我们可以通过在模型中。最后，我们将结果保存为新的 glTF 文件。提供了顶点位置和 UV 的数组，以及连接这些顶点的三角形的索引。
2024-02-01 13:38:08
531
6
原创 使用 TurfJS 寻找垂直线
在最近的一个项目中有个需求，我需要确定从单个点 © 到由其他两个点（A 和 B）的连线的垂直距离。通常我们可以只使用，但是只有当C点位于前两点之间时才有效。但是点 C 可以在任何位置，不一定在点 A 和 B 之间。因此，需要沿着垂直于由点 A 和 B 创建的假想无限延长的直线来测量距离。这可以通过其他一些 turf 函数方法来完成 - 比如以及线的斜率。
2024-01-19 13:41:02
649
1
原创 详解对数深度
归根到底，是因为 view space 的 z 值是按负反比例函数被分布到 NDC 的 z 坐标中，导致非常小的一部分 zv 值被映射到大部分的 zNDC 中（在 f=100,n=0.1 中，0.1~0.2 的 zv 就瓜分了一半的 zNDC），导致在大场景中产生所谓的 z-fighting 现象。当然，这在数学上没有什么问题，但在计算机中，浮点数是由精度限制的。我们知道，fragment 的深度值是线性插值的，而 varying 变量的插值是透视矫正的线性插值，会考虑 clip space 的 w 值。
2024-01-19 13:35:26
1002
原创 使用Ray Marching进行3D渲染
要使用Ray Marching渲染 3D 场景，我们需要为每个像素发射一条光线。通过选择屏幕上的一个点（一个像素），并从视点绘制一条射线，我们可以确定它是否击中一个对象，并决定应该在该像素上绘制什么。使用着色器，我们可以并行处理所有像素以完成整个图像。下面的例子演示了这个想法。光线的起始位置和方向由视点（眼睛）和当前像素（crd）的位置确定。函数是此次演示的主要函数。我们沿光线射线移动一个点并使用 SDF（有符号距离函数）检查它是否足够接近表面。如果距离低于阈值，该函数将返回距离，否则返回 -1.0。
2024-01-10 13:24:45
419
原创 计算机图形学理论(6)：光线追踪
该方法是通过跟踪穿过图像平面中每个像素的光路来生成图像。在现实世界中，光从光源出发，然后到达我们的眼睛。然而，我们在光线追踪中以相反的方式做到这一点。
2024-01-10 13:23:12
491
原创 计算机图形学理论(5)：光能传递
光能传递是一种模拟从光源开始的光漫反射传播的方法。因此，它对于静态场景是可预先计算的。比如一面墙原来是白色，由于房间里物体的原因，使得墙面反射物体的那一部分变成物体的原色，这种现象叫做Color bleeding。相反，我们可以利用像“Gauss-Seidel”方法这样的近似。Form factor（Fij）是“离开表面 j 并到达表面 i 的光能的分数”。计算准确的Form factor很困难，我们可以在这里采用相同的近似值。我们考虑从半球上的区域投影到地面上的某个区域。只考虑从物体表面到眼睛的直射光。
2023-12-28 13:25:57
977
原创 计算机图形学理论(4)：缓冲区
缓冲区是保存某些数据的临时存储空间。为什么我们需要缓冲区？原因很简单，当数据量很大时，因为计算机无法同时处理整个数据，因此在处理当前数据集时需要额外的空间来存储其余数据。在计算机图形学中，缓冲区有多种定义方式。分辨率：宽度(n) x 高度(m)深度（或精度）：k位数/像素例如，如果我们想要每个像素使用 RGB 通道，则一个通道需要 8 位，总共 24 位（3 x 8 位）。
2023-12-24 14:57:37
996
原创 不同光照渲染算法对比
Forward+是在屏幕空间中划分Tile进行光源过滤来降低消耗的，这个划分是在XY 2D平面进行的，而Clustered Forward Rendering则是在这个基础上更进一步，在Depth方向上也同样进行一次划分，进一步缩小光照的影响范围，降低光照计算的浪费。将渲染分为两个阶段，第一阶段处理光照计算需要的数据，并将他们储存到GBuffer中，这些数据包括片元位置、漫反射贴图，法线贴图，镜面反射强度图等。最常见的渲染，所谓的前向渲染，就是将物件串成一个队列，一个接一个的进行渲染。
2023-12-20 13:34:33
387
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人