webgpu

轻量封装WebGPU渲染系统示例＜38＞- 动态构建WGSL材质Shader(源码)

实现原理:基于宏定义和WGSL文件系统实现(还在完善中...)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/DynamicShaderBuilding.ts当前示例运行效果:此示例基于此渲染系统实现，当前示例TypeScript源码如下：exportclass
含影·2023-11-26 20:16

轻量封装WebGPU渲染系统示例＜37＞- 多个局部点光源应用于非金属材质形成的效果(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/BasePbrMaterialMultiLights.ts当前示例运行效果:此示例基于此渲染系统实现，当前示例TypeScript源码如下：exportclassBasePbrMaterialMultiLights
含影·2023-11-24 01:08

轻量封装WebGPU渲染系统示例＜34＞- 数据驱动之Json构建场景

场景和数据之间的互通：场景数据化或者数据化场景，是当前的主流场景数据构成方式。方便传输方便交换甚至是交互。内置数据互通机制更有利于用户在各种应用场合下实现具体的3D相关的应用需求。用户只需要关心标准的或者约定好的数据定义及操作方式就能方便使用。这样，也能方便应用GLB或者USD数据规范。当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob
含影·2023-11-21 10:51

轻量封装WebGPU渲染系统示例＜35＞- HDR环境数据应用到PBR渲染材质

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/BasePbrMaterialTest.ts当前示例运行效果:微调参数之后的效果:此示例基于此渲染系统实现，当前示例TypeScript源码如下:exportclassBasePbrMaterialTest{pri
含影·2023-11-21 10:11

vue2 - SuperMap3D添加S3M图层

文章目录开发环境代码封装1：选择使用WebGL方式加载（默认WebGL2）2：选择使用WebGPU方式加载3：添加影像图层4：添加S3M图层（关键代码）开发环境vue2.6.10nodev12.14.0SuperMap3DSuperMapiClient3D11i
Kingsaj·2023-11-20 14:32

Google codelab WebGPU入门教程源码＜7＞ - 完整的元胞自动机之生命游戏的完整实现(源码)

对应的教程文章:https://codelabs.developers.google.com/your-first-webgpu-app?
含影·2023-11-16 13:50

Google codelab WebGPU入门教程源码＜2＞ - 绘制几何形状(源码)

对应的教程文章:https://codelabs.developers.google.com/your-first-webgpu-app?
含影·2023-11-16 13:19

Google codelab WebGPU入门教程源码＜3＞ - 绘制网格(源码)

对应的教程文章:https://codelabs.developers.google.com/your-first-webgpu-app?
含影·2023-11-16 13:19

Google codelab WebGPU入门教程源码＜4＞ - 使用Uniform类型对象给着色器传数据(源码)

对应的教程文章:https://codelabs.developers.google.com/your-first-webgpu-app?
含影·2023-11-16 13:19

Google codelab WebGPU入门教程源码＜5＞ - 使用Storage类型对象给着色器传数据(源码)

对应的教程文章:https://codelabs.developers.google.com/your-first-webgpu-app?
含影·2023-11-16 13:19

Google codelab WebGPU入门教程源码＜6＞ - 使用计算着色器实现计算元胞自动机之生命游戏模拟过程(源码)

对应的教程文章:https://codelabs.developers.google.com/your-first-webgpu-app?
含影·2023-11-16 13:19

Google codelab WebGPU入门教程源码＜1＞ - 初始化WebGPU(源码)

对应的教程文章:https://codelabs.developers.google.com/your-first-webgpu-app?
含影·2023-11-16 13:05

轻量封装WebGPU渲染系统示例＜27＞- 浮点RTT纹理(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/FloatRTT.ts当前示例运行效果:此示例基于此渲染系统实现，当前示例TypeScript源码如下:constfloatRTT={diffuse:{uuid:"rtt0",rttTexture:{},forma
含影·2023-11-14 04:57

轻量封装WebGPU渲染系统示例＜29＞- 深度模糊DepthBlur(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/DepthBlur.ts当前示例运行效果:此示例基于此渲染系统实现，当前示例TypeScript源码如下:constblurRTTTex0={diffuse:{uuid:"rtt0",rttTexture:{}}}
含影·2023-11-14 04:57

轻量封装WebGPU渲染系统示例＜28＞- MRT纹理(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/MRT.ts当前示例运行效果:此示例基于此渲染系统实现，当前示例TypeScript源码如下:exportclassMRT{privatemRscene=newRendererScene();initialize(
含影·2023-11-14 04:55

轻量封装WebGPU渲染系统示例＜26＞- PingpongBlur模糊效果(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/PingpongBlur.ts当前示例运行效果:WGSL片段shader@group(0)@binding(0)varparam:vec4f;@group(0)@binding(1)varsampler0:samp
含影·2023-11-13 10:16

轻量封装WebGPU渲染系统示例＜25＞- 颜色附件数据更新替换(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/ColorAttachmentReplace.ts此示例基于此渲染系统实现，当前示例TypeScript源码如下:constrttTex0={diffuse:{uuid:'rtt0',rttTexture:{}}}
含影·2023-11-13 09:42

轻量封装WebGPU渲染系统示例＜23＞- 可渲染对象添加到多个渲染Pass节点(源码)

渲染和计算混合系统，可以看做基于算力驱动设计理念的一种实现。此系统中，可渲染(rendering)/计算(computing)实体可以任意添加到一个渲染器pass节点。若干个这样的节点相关联，就能构成对应的passnodegraph，也就实现了整个3D渲染及GPU计算的应用场景。Passnodegraph也许会复杂，实际上一般的3D场景只需要一个默认的renderingpassnodegraph节
含影·2023-11-12 23:39

轻量封装WebGPU渲染系统示例＜24＞- Rendering Pass Graph基本用法(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/PassNodeGraphTest.ts此示例基于此渲染系统实现，当前示例TypeScript源码如下:classPassGraphextendsWGRPassNodeGraph{constructor(){sup
含影·2023-11-12 23:32

轻量封装WebGPU渲染系统示例＜22＞- 渲染到纹理(RTT)(源码)

(便捷)易用性，灵活性，正确性，在用户直接接触的层面，比性能或者专业性要重要得多。如何才能做到使用丝滑的感觉呢？书到用时方恨少，来来去去很烧脑。当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/RTTTest.ts当前示例运行效果:此示例基于此渲染系统实现，当前示
含影·2023-11-10 17:06

轻量封装WebGPU渲染系统示例＜21＞- 3D呈现元胞自动机之生命游戏(源码)

实现原理:基本PBR光照与gpucompute计算当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/GameOfLife3DPBR.ts当前示例运行效果:其他效果截图:此示例基于此渲染系统实现，当前示例TypeScript源码如下:constgridSize=25
含影·2023-11-09 03:33

轻量封装WebGPU渲染系统示例＜19＞- 使用GPU Compute材质多pass元胞自动机(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/GameOfLifeMultiMaterialPass.ts系统特性:1.用户态与系统态隔离。细节请见：引擎系统设计思路-用户态与系统态隔离-CSDN博客2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲
含影·2023-11-06 23:00

轻量封装WebGPU渲染系统示例＜17＞- 使用GPU Compute之元胞自动机(源码)

更简洁的实现请见:轻量封装WebGPU渲染系统示例＜19＞-使用GPUCompute材质多pass元胞自动机(源码)-CSDN博客当前示例源码github地址:https://github.com/vilyLei
含影·2023-11-06 23:30

轻量封装WebGPU渲染系统示例＜18＞- 材质多pass实现GPU Compute计算(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/ComputeMaterialTest.ts系统特性:1.用户态与系统态隔离。细节请见：引擎系统设计思路-用户态与系统态隔离-CSDN博客2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据(内外部相
含影·2023-11-06 23:00

轻量封装WebGPU渲染系统示例＜20＞- 美化一下元胞自动机(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/GameOfLifePretty.ts系统特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据(内外部相关资源)和渲染机制分离。5.用户操作和渲染系统调度并行机制。6.数
含影·2023-11-06 22:23

轻量封装WebGPU渲染系统示例＜16＞- 使用GPU Compute计算(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/ComputeEntityTest.ts系统特性:1.用户态与系统态隔离。细节请见：引擎系统设计思路-用户态与系统态隔离-CSDN博客2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据(内外部相关资
含影·2023-11-06 07:35

轻量封装WebGPU渲染系统示例＜14＞- 多线程模型载入(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/ModelLoadTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。细节请见：引擎系统设计思路-用户态与系统态隔离-CSDN博客2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据(内外部相关资源)和渲染机制分离
含影·2023-11-04 13:29

轻量封装WebGPU渲染系统示例＜15＞- DrawInstance批量绘制(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/DrawInstanceTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。细节请见：引擎系统设计思路-用户态与系统态隔离-CSDN博客2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据(内外部相关资源)和渲染机
含影·2023-11-04 13:43

轻量封装WebGPU渲染系统示例＜13＞- 屏幕空间后处理效果(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/ScreenPostEffect.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。细节请见：引擎系统设计思路-用户态与系统态隔离-CSDN博客2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据(内外部相关资源)和渲染机
含影·2023-11-04 06:32

轻量封装WebGPU渲染系统示例＜12＞- 基础3D对象实体(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/PrimitiveEntityTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。细节请见：引擎系统设计思路-用户态与系统态隔离-CSDN博客2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据(内外部相关资源)和
含影·2023-11-04 05:16

AIGC时代下的WebGPU轻量级3D渲染引擎！

1Orillusion引擎WebGPU经过六年的时间，终于在2023年4月6日，由Chrome团队发布。5月2号，在Chrome113版本上，WebGPU被默认启动。
Orillusion·2023-11-02 08:22

WebGPU 从入门到放弃 01（你的第一个三角形）

本教程中，我们使用WebGPU实现自己的第一个demo，绘制一个三角形，效果如下。你的第一个三角形WebGPU初始化获取顶点buffer生成着色器创建渲染管线开始渲染WebGPU的初始化if(!
张德朝·2023-11-02 05:40

WebGL 和 WebGPU[2] - 初始化篇

文章目录1.获取高频操作对象1.1WebGL获取上下文对象1.2WebGPU获取设备对象2.初始化参数的异同2.1WebGL2.2WebGPU分两步2.2.1GPUAdapter2.2.2GPUDevice3
岭南灯火·2023-11-02 05:05

轻量封装WebGPU渲染系统示例＜11＞- WebGP实现的简单PBR效果(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/SimplePBRTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果:顶点shader:@g
含影·2023-11-02 05:30

轻量封装WebGPU渲染系统示例＜9＞- 基本光照(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/SimpleLightTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果:顶点shader:
含影·2023-10-31 15:27

轻量封装WebGPU渲染系统示例＜4＞-CubeMap/天空盒(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/ImgCubeMap.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果:此示例基于此
含影·2023-10-31 15:57

轻量封装WebGPU渲染系统示例＜5＞-多重纹理(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/MultiTexturedCube.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果
含影·2023-10-31 15:57

轻量封装WebGPU渲染系统示例＜8＞- 渲染器基本场景管理(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/RSceneTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果:此示例基于此渲染系统实现，当
含影·2023-10-31 15:57

轻量封装WebGPU渲染系统示例＜2＞-彩色立方体(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/VertColorCube.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果:此示例
含影·2023-10-31 15:27

轻量封装WebGPU渲染系统示例＜3＞-纹理立方体(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/ImgTexturedCube.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果:此
含影·2023-10-31 15:27

轻量封装WebGPU渲染系统示例＜1＞-彩色三角形(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/VertColorTriangle.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果
含影·2023-10-31 15:26

轻量封装WebGPU渲染系统示例＜10＞- 容器(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/REntity3DContainerTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。关于3D引擎中容器的更
含影·2023-10-31 14:13

轻量封装WebGPU渲染系统示例＜6＞-混合模式(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/BlendTest.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果:此示例基于此渲
含影·2023-10-30 06:59

轻量封装WebGPU渲染系统示例＜7＞-材质多pass(源码)

当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/MultiMaterialPass.ts此示例渲染系统实现的特性:1.用户态与系统态隔离。2.高频调用与低频调用隔离。3.面向用户的易用性封装。4.渲染数据和渲染机制分离。5.用户操作和渲染系统调度并行机制。当前示例运行效果
含影·2023-10-30 06:26

WebGPU-初识各名词概念Adapters与Device

WebGPU是一个将GPU硬件功能暴露给Web的API。该API从零开始设计，以便有效地映射到（2014年后的）原生GPUAPI。WebGPU与WebGL无关，也没有显式地针对OpenGLES。
Jedi Hongbin·2023-10-20 03:09

计算机图形学笔记：从 WebGL 到 WebGPU

目前WebGPU的标准还没有完全确定下来，需要下载开发者版本的ChromeCanary才能开启WebGPU。
谷雨の梦·2023-10-18 21:13

五、WebGPU Vertex Buffers 顶点缓冲区

顶点缓冲区就像任何其他WebGPU缓冲区一样。它们保存着数据。不同之处在于我们不直接从顶点着色器访问它们。相反，我们告诉WebGPU缓冲区中有什么类型的数据，以及它在
碳学长·2023-10-18 05:32

一种正在取代WebGL的新技术-WebGPU

它是由W3C的GPU为来自苹果、Mozilla、微软、谷歌和其他公司的工程师开发的与WebGL不同，WebGPU不是任何现有的本地API的直接端口。
Real游戏引擎开发者·2023-10-13 04:13

三、WebGPU Uniforms

三、WebGPUUniformsUniform有点像着色器的全局变量。你可以在执行着色器之前设置它们的值，着色器的每次迭代都会有这些值。你可以在下一次请求GPU执行着色器时将它们设置为其他值。我们将再次从第一篇文章中的三角形示例开始，并对其进行修改以使用一些统一格式。constmodule=device.createShaderModule({label:'triangleshaderswithu
碳学长·2023-10-11 05:24

二、WebGPU阶段间变量（inter-stage variables）

二、WebGPU阶段间变量（inter-stagevariables）在上一篇文章中，我们介绍了一些关于WebGPU的基础知识。
碳学长·2023-10-11 05:54
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他