- 博客(118)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 深度精度可视化
GPU 硬件深度缓冲区通常不会存储物体位于相机前面的距离的线性表示，这与人们第一次遇到这种情况时的预期相反。相反，深度缓冲区存储与世界空间深度的倒数成比例的值，下面解释一下原因。在本文中，我们使用d表示存储在深度缓冲区中的值（在 [0, 1] 区间），使用z表示世界空间深度，即沿相机中心的距离，以世界单位（例如米）表示。一般来说，它们之间的关系是这样的形式从表面上看，我们可以将d视为的z的任何函数。那么为什么要做出这样的特殊选择呢？主要有两个原因。首先，1/z 很适合透视投影的框架。
2024-05-17 13:31:51
866
原创 使用Three.js绘制快速而逼真的水
GPGPU代表通用图形处理单元（General-Purpose Graphic Processing Unit），意思是用GPU计算图形以外的计算任务。在 Three.js 里，指的是我们使用片段着色器来计算其他内容（例如粒子的位置或速度）的技术。通过使用 GPU（GLSL 着色器）而不是 CPU（Javascript）来进行这些计算，我们可以从并行计算中获得巨大的性能提升。但是我们在 Three.js 中并不经常看到这个术语，更常见的是“帧缓冲区对象”或 FBO 一词。
2024-05-11 13:22:11
1135
原创 【数字孪生平台】使用 Three.js 以 3D 形式可视化日本新宿站地图
在本文中，我们将使用日本新宿站的室内地图数据，并使用 Three.js 将其进行 3D 可视化。更多精彩内容尽在。
2024-03-29 13:47:23
1351
原创 【数字孪生平台】使用 Three.js 绘制月球陨石坑
在本文中，我们将使用 NASA 发布的月球地形数据“SLDEM2015”在 Three.js 上绘制月球陨石坑。更多精彩内容尽在。
2024-03-29 13:46:14
972
原创 【数字孪生平台示例解析】风格化城堡效果
更多精彩内容尽在。本示例场景具有独特的风格化外观，除了动画角色（骑士和鸟类）之外，没有使用任何纹理。为了增加场景的深度效果，还应用了简单的线性顶点雾和实时阴影。场景总大小（包含静态和动态对象）为 95k 个三角形。
2024-03-15 13:25:38
816
原创 Cesium的Picking过程原理
这时，会更新screenSpaceRectangle，只对点击的相关区域进行渲染,也就是只会更新局部区域，并返回PickFramebuffer中的FBO，因此渲染结果都是保存在PickFramebuffer的帧缓冲中，完成ID纹理。其实拾取的思路很简单，就是来一张“ID”纹理，对每一个渲染的Object赋予一个唯一的ID并将ID转为RGBA，在渲染到“ID纹理”时，渲染的是ID颜色。这时用户点击想要拾取每一个地物，则查找对应ID纹理中的颜色值并转为ID，根据ID找到对应的地物。
2024-03-15 13:24:03
319
原创 Maplibre自定义图层
墨卡托坐标->裁剪空间 | mercatorMatrix | (missing) || 世界坐标->屏幕空间 | pixelMatrix | pixelMatrix3D |
2024-03-08 10:34:48
380
原创 Cesium插件系列——3dtiles压平
中获得该顶点的模型局部坐标。如果我们要实现压平，最好是在ENU坐标下来进行修改顶点坐标的高度。所以我们要实现的逻辑就是：将顶点坐标转成ENU坐标 -----> 判断是否在多边形范围内 -----> 若是则修改高度 -----> 转回模型坐标。我们转成ENU坐标后，其实可以在EN平面上去进行判断。将多边形的经纬度点都转成ENU坐标，只取xy值，然后跟该顶点进行平面判断。这里是根据Cesium提供的CustomShader来实现的。本系列为自己基于cesium写的一套插件具体实现。
2024-03-01 18:05:17
865
原创 Cesium地表透明
通过将地表的drawCommand放到透明队列里渲染。现在发现有了新的方法（其实2020年就有该方法了）：GlobeTranslucency。之前Cesium是不能地表透明的，需要改内部代码，将GlobeSurfaceTileProvider.js中的。也可以设置根据到相机的距离获取或设置地球背面的近和远半透明属性。当相机位于地下时，背面和正面会交换，即背面几何形状被视为正面。来计算的，所有这些都可能包含半透明度。还可以设置矩形范围，来呈现范围内的透明表面。下面代码是修改影像的透明度，可以看到地下。
2024-03-01 17:51:12
438
原创 Babylon.js 的 TAA（时间抗锯齿） 简介
在处理计算机生成的图像时，锯齿是最令人头痛的问题之一。锯齿以锯齿状线（几何锯齿）或亮点（镜面/着色锯齿）的形式出现，并且随着移动而变得更严重。由于屏幕（由像素组成）的离散性质以及每个像素只能是一种颜色，因此存在锯齿。每个像素实际上是场景一部分上的一个小窗口，并且应该能够显示从该窗口可见的所有颜色以准确描述场景，但由于它只能是一种颜色，因此我们必须决定使用哪种颜色显示。有很多算法可以处理这个问题，时间抗锯齿（TAA，Temporal Anti-Aliasing）就是其中之一。
2024-02-20 14:25:29
1058
原创 程序化生成glTF文件
虽然 glTF可用于单独存储Mesh，但更常见的是将Mesh放置在默认场景中。该库压缩后的重量约为 20kb，比 Three.js 或 Babylon.js 等完整 3D 引擎小得多。虽然在Blender等软件中创建 3D 模型更为常见，但有时我们希望在代码中创建模型。gltf-transform库可以做的不仅仅是创建新文件，它更常用于优化现有的 glTF 文件，我们可以通过在模型中。最后，我们将结果保存为新的 glTF 文件。提供了顶点位置和 UV 的数组，以及连接这些顶点的三角形的索引。
2024-02-01 13:38:08
414
原创 使用 TurfJS 寻找垂直线
在最近的一个项目中有个需求，我需要确定从单个点 © 到由其他两个点（A 和 B）的连线的垂直距离。通常我们可以只使用，但是只有当C点位于前两点之间时才有效。但是点 C 可以在任何位置，不一定在点 A 和 B 之间。因此，需要沿着垂直于由点 A 和 B 创建的假想无限延长的直线来测量距离。这可以通过其他一些 turf 函数方法来完成 - 比如以及线的斜率。
2024-01-19 13:41:02
523
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
952
原创 使用Ray Marching进行3D渲染
要使用Ray Marching渲染 3D 场景，我们需要为每个像素发射一条光线。通过选择屏幕上的一个点（一个像素），并从视点绘制一条射线，我们可以确定它是否击中一个对象，并决定应该在该像素上绘制什么。使用着色器，我们可以并行处理所有像素以完成整个图像。下面的例子演示了这个想法。光线的起始位置和方向由视点（眼睛）和当前像素（crd）的位置确定。函数是此次演示的主要函数。我们沿光线射线移动一个点并使用 SDF（有符号距离函数）检查它是否足够接近表面。如果距离低于阈值，该函数将返回距离，否则返回 -1.0。
2024-01-10 13:24:45
371
原创 计算机图形学理论(6)：光线追踪
该方法是通过跟踪穿过图像平面中每个像素的光路来生成图像。在现实世界中，光从光源出发，然后到达我们的眼睛。然而，我们在光线追踪中以相反的方式做到这一点。
2024-01-10 13:23:12
473
原创 计算机图形学理论(5)：光能传递
光能传递是一种模拟从光源开始的光漫反射传播的方法。因此，它对于静态场景是可预先计算的。比如一面墙原来是白色，由于房间里物体的原因，使得墙面反射物体的那一部分变成物体的原色，这种现象叫做Color bleeding。相反，我们可以利用像“Gauss-Seidel”方法这样的近似。Form factor（Fij）是“离开表面 j 并到达表面 i 的光能的分数”。计算准确的Form factor很困难，我们可以在这里采用相同的近似值。我们考虑从半球上的区域投影到地面上的某个区域。只考虑从物体表面到眼睛的直射光。
2023-12-28 13:25:57
948
原创 计算机图形学理论(4)：缓冲区
缓冲区是保存某些数据的临时存储空间。为什么我们需要缓冲区？原因很简单，当数据量很大时，因为计算机无法同时处理整个数据，因此在处理当前数据集时需要额外的空间来存储其余数据。在计算机图形学中，缓冲区有多种定义方式。分辨率：宽度(n) x 高度(m)深度（或精度）：k位数/像素例如，如果我们想要每个像素使用 RGB 通道，则一个通道需要 8 位，总共 24 位（3 x 8 位）。
2023-12-24 14:57:37
932
原创 不同光照渲染算法对比
Forward+是在屏幕空间中划分Tile进行光源过滤来降低消耗的，这个划分是在XY 2D平面进行的，而Clustered Forward Rendering则是在这个基础上更进一步，在Depth方向上也同样进行一次划分，进一步缩小光照的影响范围，降低光照计算的浪费。将渲染分为两个阶段，第一阶段处理光照计算需要的数据，并将他们储存到GBuffer中，这些数据包括片元位置、漫反射贴图，法线贴图，镜面反射强度图等。最常见的渲染，所谓的前向渲染，就是将物件串成一个队列，一个接一个的进行渲染。
2023-12-20 13:34:33
378
原创 计算机图形学理论(2)：网格表达
在百度百科上的解释比较难以理解，可以看下面的例子：可以看到两个红色顶点之间的连线并不满足“每条边仅与一个或两个面相关”，是与三个面相关，那么这个就是个非流形几何。二维流形应满足与顶点相接的面形成封闭或开放的扇形：但是下面的网格与另一个三角形相关联，没有共享边，所以它不是二维流形。
2023-12-20 13:31:07
993
原创 CesiumJS 中绘制大多边形
尽管它们通常会扭曲面积（这就是为什么这种类型的投影在极地区域之外的映射中不常见的原因），但保留形状对于我们在多边形上执行的几何操作至关重要。从性能的角度来看，在创建几何图形时，分割多边形可能是一项昂贵的操作，因为该算法对每个多边形和每个分割平面进行操作。但是，一旦进行三角剖分，任何分割的多边形都会稍后在管道中重新组合，作为几何批处理步骤的一部分，以确保与以前相同的渲染性能。在Cesium的早期版本和一些引擎中，我们绘制这种跨度比较大的多边形，经常会看到一些奇怪的冲突问题，如下图所示。一种简单的解决方案是。
2023-10-22 19:46:47
336
原创 WebGPU学习（10）---如何利用 WebGPU 实现高性能
使用WebGPU，我们需要自己优化绘图命令，类似于驱动层对WebGL所做的事情。因此，如果编码没有适当优化，结果可能会比WebGL慢。确定每个 WebGPU 函数调用的性能特征并优化渲染代码非常重要。为了做到这一点，在某些情况下可能需要检查我们正在创建的库或应用程序的设计。在许多情况下，需要将着色器可以访问的大部分数据预先部署到 GPU 上的缓冲区中。
2023-09-17 09:54:25
302
原创 webgl与webgpu比较
WebGPU 虽然也有一个总管家一样的对象 —— device，类型是 GPUDevice，表示可以操作 GPU 设备的一个高层级抽象，它负责创建操作图形运算的各个对象，最后装配成一个叫 “CommandBuffer（指令缓冲，GPUCommandBuffer）”的对象并提交给队列，这才完成 CPU 这边的劳动。在 WebGL 中，始终会调用着色器的入口main函数，但在 WebGPU 中，当使用着色器时，可以指定要调用的函数。当然，仍然可以自己检查错误，但即使什么都不做，仍然可以获得一些有用的信息。
2023-09-10 17:48:35
957
2
原创 WebGPU学习（9）---使用Pipeline Overridable Constants
首先，在着色器中定义一个常量。稍后可以从 JavaScript 端覆盖该常量。这次我们在片段着色器中定义它。@fragment} else {通过在常量名称之前添加override，该常量就成为可以从 JavaScript 端覆盖的常量。是否指定默认值并不重要，但如果不指定，则必须始终从 JavaScript 端覆盖它。如果不覆盖，将使用着色器端定义的默认值。
2023-09-02 17:32:06
743
原创 WebGPU学习（8）---使用RenderBundle
此时用作参数的描述符是一个名为 GPURenderBundleDescriptor 的类型， 注意创建RenderPassEncoder时与GPURenderPassDescriptor不同。由于注册的绘图命令在内部被转换为GPU可以理解的命令格式， 比绘制时每次都用RenderPassEncoder进行转换效率更高。命令可以重复使用，这减少了为每个绘制调用注册命令的成本。创建 RenderBundleEncoder 后，像注册 RenderPassEncoder 一样注册绘图命令。
2023-09-02 17:18:55
595
原创 WebGPU学习（7）---渲染到纹理
我们可以从屏幕上看到三角形被绘制到纹理上。在WebGL中，需要生成一个FBO（Framebuffer对象）来设置渲染目标，并且FBO中的绑定操作也很复杂。WebGPU 上的纹理渲染给人的印象是编码变得更加直观。
2023-08-05 16:38:22
352
原创 在UE5中制作可拖动的控件
在这篇文章中，我们将探讨如何在 UE 中制作可拖动的控件。部分内容源自虚幻引擎中的，因此如果有任何不清楚的地方，可以从文档中查找。
2023-08-05 10:26:39
1866
原创 UE5内容示例
Blueprint_Input_Examples：主要是键盘交互事件，控制物体移动等。Blueprint_Mouse_Interaction：主要是鼠标交互事件，用鼠标拖拽物体，或者鼠标点击物体后自动移动。Blueprint_Splines：样条线生成案例，动态样条线，mesh样条线，附加粒子特效的样条线，动画样条线等。BlueprintRnederToTarget：利用“渲染到纹理”技术，可以做画板，水面交互。Blueprints_Advanced：一些高级应用，如随机摆放mesh位置，根据
2023-07-12 12:21:35
619
原创 延迟着色（Deferred Shading）
我们先说一下前向渲染（forward rendering），它是对场景中所有物体对象进行渲染并执行光照计算。但是光照计算其实是一项非常耗性能的操作，在前向渲染中，我们会做很多次像素着色器的调用，但是其中大部分是不必要的。比如场景中有四个物体，互相之间存在叠压关系，按照前向渲染的流程，先渲染了一个物体之后，它的一部分被后一个渲染的物体挡住了，那么被挡住的这部分就是做了无效的计算，这就会很浪费资源和计算能力。如果场景中有大量的灯光，那么像素数*灯光数这种渲染逻辑将是非常糟糕的。
2023-07-08 16:06:15
771
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人