- 博客(147)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 使用 Three.js GPGPU 和着色器进行 RGB 偏移的网格置换纹理
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123在本文中，我们将学习如何使用 Three.js 创建像素/网格位移效果，并通过着色器和 GPGPU 技术进行增强。并介绍了动态响应光标移动的 RGB 移位效果的应用。最后，我们将深入了解如何在 WebGL 中操作纹理和创建交互式视觉效果，从而使用 Three.js 扩展我们的创意能力。
2024-09-25 13:45:46
786
原创 【WebGPU Unleashed】1.1 绘制具有定义顶点的三角形
一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123在我们之前的教程中，我们在没有提供显式顶点数据的情况下绘制了一个三角形，绘制原理是在着色器中计算顶点位置。虽然这种方法适用于简单的几何形状，但对于大多数现实场景来说是不切实际的。
2024-09-25 13:44:50
681
原创 GIS图形库更新2024.8.4-9.9
更多精彩内容请访问 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信：digital_twin123。
2024-09-09 12:28:45
483
原创 【WebGPU Unleashed】1.1 绘制三角形
在前面的示例中，我们没有创建任何着色器。着色器程序是在GPU上执行的程序，一般来说，着色器程序主要分为三种类型：顶点着色器、片段着色器和计算着色器。计算着色器用于通用计算，而顶点和片段着色器与渲染相关。顶点着色器处理几何体的每个顶点，确定其在屏幕上的最终位置。然后，片段着色器确定由这些顶点定义的形状内每个像素的颜色。这些着色器共同将几何图元（例如点或三角形）转换为我们在屏幕上看到的像素。...</现在我们了解了着色器的作用，接下来我们将它们添加到我们的项目中。
2024-09-09 12:28:15
1169
原创 【WebGPU Unleashed】1.0 创建空画布
一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123创建空画布一开始可能看起来比较枯燥，但对于任何涉及 WebGPU 编程的项目来说，它都是一个重要的起点。在本节中，我们将为全书的所有编程练习奠定基础。
2024-09-02 13:22:23
642
原创 【WebGPU Unleashed】0.1 GPU管线
在结束本节之前，我们首先讨论一下为什么需要 GPU。为什么我们不能只使用强大的 CPU 来处理图形工作？打个比方，想象一下你是一个工厂主，你总是想雇用拥有博士学位的员工来替你打工吗？如果你正在建设一家专利工厂，那么聘请博士是非常有意义的。然而，如果你正在建造一家香蕉罐头工厂，并且任务只是剥香蕉皮，那么雇用 100 只猴子可能是更好的选择。使用相同数量的资源，可以维持更大的猴子团队。博士非常有能力，可以在研究项目上进行良好的合作，但剥香蕉不需要广泛的研究能力或合作。
2024-09-02 13:21:57
1128
原创 【WebGPU Unleashed】0.0 GPU驱动程序
学校毕业后，我找到了第一份工作，担任系统软件工程师，负责 OpenGL（GPU 驱动程序）工作。但当时我对驱动程序的了解还相当有限。在大学里，GPU和驱动软件并不是计算机科学研究的重点，所以我只知道驱动程序是一个软件，充当硬件和应用程序之间的桥梁。我不知道它是如何工作的，也不知道它传输到硬件的数据类型。直到我加入团队并开始从事该项目后，我才对 GPU 驱动程序的运行方式及其在图形渲染过程中的关键作用有了更深入的了解。作为图形工程师，我们编写程序在屏幕上绘制像素。
2024-08-26 12:39:07
1082
原创 【WebGPU Unleashed】序言
WebGPU 是一种新的图形 API，概念上与其他 API 类似，但目标不同：它的目标是将本机的图形能力引入到Web上。在此概述之后，我们将探索 WebGPU 最简单的用法：绘制三角形，这是 3D 图形的基本元素。我认为涵盖这些主题是至关重要的。在撰写本文时，高斯泼溅是一种尖端的场景表示和渲染技术，能够捕获和渲染现实生活中的 3D 场景，具有高度的真实感和实时性能。对于想学习图形编程的来说，几年前，OpenGL 是初学者的首选 API，而 DirectX 则是那些对游戏开发感兴趣的人的替代选择。
2024-08-26 12:38:19
369
原创 Threejs中的WebGPU实践（1-2）
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123此处接上文：Threejs中的WebGPU实践（1-1）
2024-08-19 13:26:11
812
原创 Threejs中的WebGPU实践（1-1）
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123对于一直关注 Three.js 的最新发展的人来说，经常会发现陷入了的未知领域，因为直到现在也没有一些官方的思维导图。事实上，虽然 Three.js 的 WebGPURenderer 能够满足大多数项目要求，但在技术上仍处于未完成的状态，许多其他功能仍处于不断改进、重新开发的过程中。
2024-08-19 13:20:00
1267
原创 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
671
原创 Mapboxgl 实现弧线功能
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-08-12 13:06:24
239
原创 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
923
原创 GIS图形库更新2024.7.29-8.4
更多精彩内容请访问 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-08-05 12:25:16
517
原创 实时渲染水体焦散
焦散是光从表面（在我们的例子中是空气/水界面）折射和反射时出现的光斑。由于在水波上发生的反射和折射，水充当了动态放大镜，于是就产生了这些光斑。在这篇文章中，我们重点关注光折射引起的焦散，主要是水下发生的情况。为了能够获得稳定的高帧率（60fps），我们需要在显卡（GPU）上计算它们，因此我们将完全使用 GLSL 编写的着色器来进行计算。计算水面的折射光线（这在 GLSL 中很简单，有内置函数使用相交算法计算这些光线照射到环境的位置通过检查光线会聚的位置来计算焦散强度。
2024-07-29 13:14:49
996
原创 在mapboxgl上用webgl实现带贴图的自定义图层
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-07-29 13:14:22
247
原创 Cesium雷达扫描线效果
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。
2024-07-22 13:11:12
440
原创 Raymarching 图形解释
Raymarching 是一种在 Shadertoy 等网站中流行的 3D 渲染技术，它令人惊奇的能力是没有任何 3D 几何图形，构成场景的所有对象都是使用数学函数实时生成的。接下来我们研究下光线行进算法如何从头开始工作，并使用着色器创建我们自己的光线行进器。
2024-07-15 13:11:37
946
原创 Mapboxgl 生成飞行动画GIF
更多精彩内容尽在数字孪生平台，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123根据两点生成动画的工具。首先，找到你想要开始的视图，点击“设置起点视图”，然后调整到目的视图，点击“设置终点视图”。点击“开始动画”来创建一张gif图。源码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Fly to
2024-07-15 13:11:05
1185
原创 【源码下载】瓦房店农村电商大数据平台模板
用 echarts 和 jquery 实现的大屏模板效果，访问 dt.sim3d.cn，公众号后台回复【瓦房店农村电商大数据平台模板】获取源码。
2024-07-08 13:20:07
390
原创 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
592
原创 Mapboxgl创建经纬度网格
关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123。//修整经度，防止最大值溢出。//创建geojson数据。
2024-07-02 09:16:42
1237
原创 【源码下载】宇宙星空
用threejs和gsap实现的宇宙星空效果，访问 http://8.130.10.148:3000/digitaltwin/index.html，公众号后台回复【宇宙星空】获取源码。【源码下载】宇宙星空。
2024-06-24 09:31:01
258
原创 使用 SDF 和 WebGL 塑造镜头模糊效果
介绍如何利用有符号距离场 (SDF) 的功能在 WebGL 中绘制形状并创建交互效果，例如镜头模糊，关注公众号后台回复“SDF镜头模糊”即可获取源码。更多精彩内容尽在，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123有符号距离函数 (SDF) 的功能非常强大，这些函数对于渲染复杂的几何和形状以及创建动态视觉效果非常有效。它们简化了边缘检测和形状操作所需的计算，使其成为高级图形应用的理想选择。
2024-06-24 09:30:02
734
原创 【数字孪生平台】光幻示例解析
本文。更多精彩内容尽在，关注公众号：sky的数孪技术，技术交流、源码下载请添加VX：digital_twin123。
2024-06-03 14:27:43
1048
1
原创 WebGPU学习（11）--- 独立于 Canvas 绘制
更多精彩内容尽在，关注公众号：sky的数孪技术，技术交流、源码下载请添加VX：digital_twin123。
2024-06-03 14:26:03
504
原创 深度精度可视化
GPU 硬件深度缓冲区通常不会存储物体位于相机前面的距离的线性表示，这与人们第一次遇到这种情况时的预期相反。相反，深度缓冲区存储与世界空间深度的倒数成比例的值，下面解释一下原因。在本文中，我们使用d表示存储在深度缓冲区中的值（在 [0, 1] 区间），使用z表示世界空间深度，即沿相机中心的距离，以世界单位（例如米）表示。一般来说，它们之间的关系是这样的形式从表面上看，我们可以将d视为的z的任何函数。那么为什么要做出这样的特殊选择呢？主要有两个原因。首先，1/z 很适合透视投影的框架。
2024-05-17 13:31:51
921
原创 使用Three.js绘制快速而逼真的水
GPGPU代表通用图形处理单元（General-Purpose Graphic Processing Unit），意思是用GPU计算图形以外的计算任务。在 Three.js 里，指的是我们使用片段着色器来计算其他内容（例如粒子的位置或速度）的技术。通过使用 GPU（GLSL 着色器）而不是 CPU（Javascript）来进行这些计算，我们可以从并行计算中获得巨大的性能提升。但是我们在 Three.js 中并不经常看到这个术语，更常见的是“帧缓冲区对象”或 FBO 一词。
2024-05-11 13:22:11
1701
原创 【数字孪生平台】使用 Three.js 以 3D 形式可视化日本新宿站地图
在本文中，我们将使用日本新宿站的室内地图数据，并使用 Three.js 将其进行 3D 可视化。更多精彩内容尽在。
2024-03-29 13:47:23
1621
原创 【数字孪生平台】使用 Three.js 绘制月球陨石坑
在本文中，我们将使用 NASA 发布的月球地形数据“SLDEM2015”在 Three.js 上绘制月球陨石坑。更多精彩内容尽在。
2024-03-29 13:46:14
1267
原创 【数字孪生平台示例解析】风格化城堡效果
更多精彩内容尽在。本示例场景具有独特的风格化外观，除了动画角色（骑士和鸟类）之外，没有使用任何纹理。为了增加场景的深度效果，还应用了简单的线性顶点雾和实时阴影。场景总大小（包含静态和动态对象）为 95k 个三角形。
2024-03-15 13:25:38
883
原创 Cesium的Picking过程原理
这时，会更新screenSpaceRectangle，只对点击的相关区域进行渲染,也就是只会更新局部区域，并返回PickFramebuffer中的FBO，因此渲染结果都是保存在PickFramebuffer的帧缓冲中，完成ID纹理。其实拾取的思路很简单，就是来一张“ID”纹理，对每一个渲染的Object赋予一个唯一的ID并将ID转为RGBA，在渲染到“ID纹理”时，渲染的是ID颜色。这时用户点击想要拾取每一个地物，则查找对应ID纹理中的颜色值并转为ID，根据ID找到对应的地物。
2024-03-15 13:24:03
458
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人