- 博客(110)
- 资源 (4)
- 收藏
- 关注
原创 【数字孪生平台示例解析】风格化城堡效果
更多精彩内容尽在。本示例场景具有独特的风格化外观,除了动画角色(骑士和鸟类)之外,没有使用任何纹理。为了增加场景的深度效果,还应用了简单的线性顶点雾和实时阴影。场景总大小(包含静态和动态对象)为 95k 个三角形。
2024-03-15 13:25:38 764
原创 Cesium的Picking过程原理
这时,会更新screenSpaceRectangle,只对点击的相关区域进行渲染,也就是只会更新局部区域,并返回PickFramebuffer中的FBO,因此渲染结果都是保存在PickFramebuffer的帧缓冲中,完成ID纹理。其实拾取的思路很简单,就是来一张“ID”纹理,对每一个渲染的Object赋予一个唯一的ID并将ID转为RGBA,在渲染到“ID纹理”时,渲染的是ID颜色。这时用户点击想要拾取每一个地物,则查找对应ID纹理中的颜色值并转为ID,根据ID找到对应的地物。
2024-03-15 13:24:03 223
原创 Maplibre自定义图层
墨卡托坐标->裁剪空间 | mercatorMatrix | (missing) || 世界坐标->屏幕空间 | pixelMatrix | pixelMatrix3D |
2024-03-08 10:34:48 303
原创 Cesium插件系列——3dtiles压平
中获得该顶点的模型局部坐标。如果我们要实现压平,最好是在ENU坐标下来进行修改顶点坐标的高度。所以我们要实现的逻辑就是:将顶点坐标转成ENU坐标 -----> 判断是否在多边形范围内 -----> 若是则修改高度 -----> 转回模型坐标。我们转成ENU坐标后,其实可以在EN平面上去进行判断。将多边形的经纬度点都转成ENU坐标,只取xy值,然后跟该顶点进行平面判断。这里是根据Cesium提供的CustomShader来实现的。本系列为自己基于cesium写的一套插件具体实现。
2024-03-01 18:05:17 646
原创 Cesium地表透明
通过将地表的drawCommand放到透明队列里渲染。现在发现有了新的方法(其实2020年就有该方法了):GlobeTranslucency。之前Cesium是不能地表透明的,需要改内部代码,将GlobeSurfaceTileProvider.js中的。也可以设置根据到相机的距离获取或设置地球背面的近和远半透明属性。当相机位于地下时,背面和正面会交换,即背面几何形状被视为正面。来计算的,所有这些都可能包含半透明度。还可以设置矩形范围,来呈现范围内的透明表面。下面代码是修改影像的透明度,可以看到地下。
2024-03-01 17:51:12 214
原创 Babylon.js 的 TAA(时间抗锯齿) 简介
在处理计算机生成的图像时,锯齿是最令人头痛的问题之一。锯齿以锯齿状线(几何锯齿)或亮点(镜面/着色锯齿)的形式出现,并且随着移动而变得更严重。由于屏幕(由像素组成)的离散性质以及每个像素只能是一种颜色,因此存在锯齿。每个像素实际上是场景一部分上的一个小窗口,并且应该能够显示从该窗口可见的所有颜色以准确描述场景,但由于它只能是一种颜色,因此我们必须决定使用哪种颜色显示。有很多算法可以处理这个问题,时间抗锯齿(TAA,Temporal Anti-Aliasing)就是其中之一。
2024-02-20 14:25:29 1016
原创 程序化生成glTF文件
虽然 glTF可用于单独存储Mesh,但更常见的是将Mesh放置在默认场景中。该库压缩后的重量约为 20kb,比 Three.js 或 Babylon.js 等完整 3D 引擎小得多。虽然在Blender等软件中创建 3D 模型更为常见,但有时我们希望在代码中创建模型。gltf-transform库可以做的不仅仅是创建新文件,它更常用于优化现有的 glTF 文件,我们可以通过在模型中。最后,我们将结果保存为新的 glTF 文件。提供了顶点位置和 UV 的数组,以及连接这些顶点的三角形的索引。
2024-02-01 13:38:08 337
原创 使用 TurfJS 寻找垂直线
在最近的一个项目中有个需求,我需要确定从单个点 © 到由其他两个点(A 和 B)的连线的垂直距离。通常我们可以只使用,但是只有当C点位于前两点之间时才有效。但是点 C 可以在任何位置,不一定在点 A 和 B 之间。因此,需要沿着垂直于由点 A 和 B 创建的假想无限延长的直线来测量距离。这可以通过其他一些 turf 函数方法来完成 - 比如以及线的斜率。
2024-01-19 13:41:02 414
原创 详解对数深度
归根到底,是因为 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 895
原创 使用Ray Marching进行3D渲染
要使用Ray Marching渲染 3D 场景,我们需要为每个像素发射一条光线。通过选择屏幕上的一个点(一个像素),并从视点绘制一条射线,我们可以确定它是否击中一个对象,并决定应该在该像素上绘制什么。使用着色器,我们可以并行处理所有像素以完成整个图像。下面的例子演示了这个想法。光线的起始位置和方向由视点(眼睛)和当前像素(crd)的位置确定。函数是此次演示的主要函数。我们沿光线射线移动一个点并使用 SDF(有符号距离函数)检查它是否足够接近表面。如果距离低于阈值,该函数将返回距离,否则返回 -1.0。
2024-01-10 13:24:45 333
原创 计算机图形学理论(6):光线追踪
该方法是通过跟踪穿过图像平面中每个像素的光路来生成图像。在现实世界中,光从光源出发,然后到达我们的眼睛。然而,我们在光线追踪中以相反的方式做到这一点。
2024-01-10 13:23:12 458
原创 计算机图形学理论(5):光能传递
光能传递是一种模拟从光源开始的光漫反射传播的方法。因此,它对于静态场景是可预先计算的。比如一面墙原来是白色,由于房间里物体的原因,使得墙面反射物体的那一部分变成物体的原色,这种现象叫做Color bleeding。相反,我们可以利用像“Gauss-Seidel”方法这样的近似。Form factor(Fij)是“离开表面 j 并到达表面 i 的光能的分数”。计算准确的Form factor很困难,我们可以在这里采用相同的近似值。我们考虑从半球上的区域投影到地面上的某个区域。只考虑从物体表面到眼睛的直射光。
2023-12-28 13:25:57 915
原创 计算机图形学理论(4):缓冲区
缓冲区是保存某些数据的临时存储空间。为什么我们需要缓冲区?原因很简单,当数据量很大时,因为计算机无法同时处理整个数据,因此在处理当前数据集时需要额外的空间来存储其余数据。在计算机图形学中,缓冲区有多种定义方式。分辨率:宽度(n) x 高度(m)深度(或精度):k位数/像素例如,如果我们想要每个像素使用 RGB 通道,则一个通道需要 8 位,总共 24 位(3 x 8 位)。
2023-12-24 14:57:37 859
原创 不同光照渲染算法对比
Forward+是在屏幕空间中划分Tile进行光源过滤来降低消耗的,这个划分是在XY 2D平面进行的,而Clustered Forward Rendering则是在这个基础上更进一步,在Depth方向上也同样进行一次划分,进一步缩小光照的影响范围,降低光照计算的浪费。将渲染分为两个阶段,第一阶段处理光照计算需要的数据,并将他们储存到GBuffer中,这些数据包括片元位置、漫反射贴图,法线贴图,镜面反射强度图等。最常见的渲染,所谓的前向渲染,就是将物件串成一个队列,一个接一个的进行渲染。
2023-12-20 13:34:33 364
原创 计算机图形学理论(2):网格表达
在百度百科上的解释比较难以理解,可以看下面的例子:可以看到两个红色顶点之间的连线并不满足“每条边仅与一个或两个面相关”,是与三个面相关,那么这个就是个非流形几何。二维流形应满足与顶点相接的面形成封闭或开放的扇形:但是下面的网格与另一个三角形相关联,没有共享边,所以它不是二维流形。
2023-12-20 13:31:07 951
原创 CesiumJS 中绘制大多边形
尽管它们通常会扭曲面积(这就是为什么这种类型的投影在极地区域之外的映射中不常见的原因),但保留形状对于我们在多边形上执行的几何操作至关重要。从性能的角度来看,在创建几何图形时,分割多边形可能是一项昂贵的操作,因为该算法对每个多边形和每个分割平面进行操作。但是,一旦进行三角剖分,任何分割的多边形都会稍后在管道中重新组合,作为几何批处理步骤的一部分,以确保与以前相同的渲染性能。在Cesium的早期版本和一些引擎中,我们绘制这种跨度比较大的多边形,经常会看到一些奇怪的冲突问题,如下图所示。一种简单的解决方案是。
2023-10-22 19:46:47 295
原创 WebGPU学习(10)---如何利用 WebGPU 实现高性能
使用WebGPU,我们需要自己优化绘图命令,类似于驱动层对WebGL所做的事情。因此,如果编码没有适当优化,结果可能会比WebGL慢。确定每个 WebGPU 函数调用的性能特征并优化渲染代码非常重要。为了做到这一点,在某些情况下可能需要检查我们正在创建的库或应用程序的设计。在许多情况下,需要将着色器可以访问的大部分数据预先部署到 GPU 上的缓冲区中。
2023-09-17 09:54:25 268
原创 webgl与webgpu比较
WebGPU 虽然也有一个总管家一样的对象 —— device,类型是 GPUDevice,表示可以操作 GPU 设备的一个高层级抽象,它负责创建操作图形运算的各个对象,最后装配成一个叫 “CommandBuffer(指令缓冲,GPUCommandBuffer)”的对象并提交给队列,这才完成 CPU 这边的劳动。在 WebGL 中,始终会调用着色器的入口main函数,但在 WebGPU 中,当使用着色器时,可以指定要调用的函数。当然,仍然可以自己检查错误,但即使什么都不做,仍然可以获得一些有用的信息。
2023-09-10 17:48:35 780 2
原创 WebGPU学习(9)---使用Pipeline Overridable Constants
首先,在着色器中定义一个常量。稍后可以从 JavaScript 端覆盖该常量。这次我们在片段着色器中定义它。@fragment} else {通过在常量名称之前添加override,该常量就成为可以从 JavaScript 端覆盖的常量。是否指定默认值并不重要,但如果不指定,则必须始终从 JavaScript 端覆盖它。如果不覆盖,将使用着色器端定义的默认值。
2023-09-02 17:32:06 729
原创 WebGPU学习(8)---使用RenderBundle
此时用作参数的描述符是一个名为 GPURenderBundleDescriptor 的类型, 注意创建RenderPassEncoder时与GPURenderPassDescriptor不同。由于注册的绘图命令在内部被转换为GPU可以理解的命令格式, 比绘制时每次都用RenderPassEncoder进行转换效率更高。命令可以重复使用,这减少了为每个绘制调用注册命令的成本。创建 RenderBundleEncoder 后,像注册 RenderPassEncoder 一样注册绘图命令。
2023-09-02 17:18:55 576
原创 WebGPU学习(7)---渲染到纹理
我们可以从屏幕上看到三角形被绘制到纹理上。在WebGL中,需要生成一个FBO(Framebuffer对象)来设置渲染目标,并且FBO中的绑定操作也很复杂。WebGPU 上的纹理渲染给人的印象是编码变得更加直观。
2023-08-05 16:38:22 318
原创 在UE5中制作可拖动的控件
在这篇文章中,我们将探讨如何在 UE 中制作可拖动的控件。部分内容源自虚幻引擎中的,因此如果有任何不清楚的地方,可以从文档中查找。
2023-08-05 10:26:39 1601
原创 UE5内容示例
Blueprint_Input_Examples:主要是键盘交互事件,控制物体移动等。Blueprint_Mouse_Interaction:主要是鼠标交互事件,用鼠标拖拽物体,或者鼠标点击物体后自动移动。Blueprint_Splines:样条线生成案例,动态样条线,mesh样条线,附加粒子特效的样条线,动画样条线等。BlueprintRnederToTarget:利用“渲染到纹理”技术,可以做画板,水面交互。Blueprints_Advanced:一些高级应用,如随机摆放mesh位置,根据
2023-07-12 12:21:35 558
原创 延迟着色(Deferred Shading)
我们先说一下前向渲染(forward rendering),它是对场景中所有物体对象进行渲染并执行光照计算。但是光照计算其实是一项非常耗性能的操作,在前向渲染中,我们会做很多次像素着色器的调用,但是其中大部分是不必要的。比如场景中有四个物体,互相之间存在叠压关系,按照前向渲染的流程,先渲染了一个物体之后,它的一部分被后一个渲染的物体挡住了,那么被挡住的这部分就是做了无效的计算,这就会很浪费资源和计算能力。如果场景中有大量的灯光,那么像素数*灯光数这种渲染逻辑将是非常糟糕的。
2023-07-08 16:06:15 747
原创 解释齐次坐标和投影几何
齐次坐标有一个额外的维度W,它可以缩放X,Y和Z的值。用于平移和透视投影变换的矩阵只能应用于齐次坐标,这就是为什么它们在3D计算机图形中如此常见。当W=1时,X、Y和Z值被认为是“正确的”。任何齐次坐标都可以通过四维数除以W值来转换为W=1,除非W=0。当W=0时,坐标表示无穷远处的点(一个无限长的矢量),这通常用来表示方向光的方向。
2023-07-08 16:00:27 455
原创 Cesium阴影技术
【以前的文章存档】Cesium的阴影技术用的是Cascaded Shadow Mapping(简称CSM),先来说下两种阴影类型,一种是另一种是。
2023-07-02 10:07:44 1409
原创 Cesium之雾的实现
以前记录的文章。雾是一种让远处几何渐隐的图形技术。早期的游戏引入了雾来隐藏在远处渲染的几何图形。即使在不再需要它之后,游戏仍然支持fog,因为它增加了场景的真实性,减少了draw call的数量,因为完全在fog中的几何体可以被剔除。在Cesium中,雾是大气颜色和地平线上地形的混合。部分处于雾中的地形瓦片会增加其屏幕空间误差(SSE),这样可以渲染低分辨率的地形。完全在雾中的瓦片将被完全剔除,甚至不被请求。这些优化将地平线视图中渲染的瓦片和从服务器请求的瓦片的数量都减少了35%。
2023-07-02 10:02:27 456
原创 3DTiles Next研究
3DTiles Next是Cesium发布的下一代3DTiles规范。元数据在这一代规范中,更重视元数据(metadata,如建筑物ID或者类型等),通过这些元数据可以对3dtiles进行样式调整或者过滤显示。关于详细的元数据规范介绍看这里。下图显示了3DTiles Next中不同粒度实体(tilesets、tiles、contents和groups)之间的关系:每个纹素的最精细粒度允许元数据比几何图形更频繁地变化。例如,考虑建筑物的一侧可以用两个三角形建模,然后应用元数据纹理来定义什么是玻
2023-07-02 09:53:30 652
原创 MapboxGL坐标体系
透视矩阵 * flipY矩阵 * 相机到瓦片中心的距离矩阵 * pitch(rotateX)矩阵 * angle(rotateZ)矩阵 * 平移矩阵 * 维度垂直scale矩阵 * 位置平移矩阵 * scale/zoom矩阵。ecef球的y轴朝上,跟cesium的z轴朝上不一样。x轴朝向经度90°,z轴朝向经度0°。TileCoordinates:瓦片坐标,范围8192,左上角(0, 0)NDC:NDC坐标,上面的GL坐标除以w。,设置的是6371008.8。,大概是1303.797像素。
2023-07-02 09:48:32 1071
原创 Cesium for UE 使用
skysun和wordterrain都需要设置坐标系,参考选择在聚焦某块数据时,会发现相机好像是在数据下面,是因为UE中的相机一直维持Z轴朝上的角度,所以我们需要把UE世界的坐标和地理坐标对齐。选择CesiumGeoreference面板下面的,这样当前的位置和高度都会更新。如果黑屏,就调整一下时间。
2023-06-27 11:51:18 562
原创 mapboxgl中的symbol碰撞检测随笔
在mapboxgl里,在线程里添加symbol的时候,会有个anchor的局部瓦片锚点坐标,如果坐标超出瓦片8192就不会绘制,同时如果是球面模式下,还会对锚点坐标进行投影,具体算法就是根据锚点的局部瓦片坐标,通过。这个过程完成的是一个从平面的anchor坐标转变成球面的anchor坐标的过程。(该半径的意思就是在0级瓦片下的球半径的像素数,所以单位不是米,是像素),所以算出来的世界坐标是基于像素的。值已经很小了,它是字体的位置坐标,所以重点还是在锚点坐标上,看下怎么计算锚点坐标到当前屏幕坐标的映射。
2023-06-22 12:25:02 567
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人