随笔分类 - 图形/WebGPU
1
摘要：1. 丐版 HelloWebGPU 最简单的 WebGPU 程序应该是这样的： <script> const init = () => { if ('gpu' in navigator) { console.log(navigator.gpu) } else { console.log('浏览器不支
阅读全文
摘要：原文 https://github.com/OmarShehata/webgpu-compute-rasterizer/blob/main/how-to-use-timestamp-queries.md 本文如何使用 WebGPU 的时间戳查询（timestamp-query）功能来计算你的 GPU
阅读全文
摘要：1. 核心概念 这部分不会详细展开，以后写教程时会深入。以下只是核心概念，是绝大多数 WebGPU 原生程序要接触的，并不是全部。 ① 适配器和设备 适配器，也就是 GPUAdapter，指代真正的物理显卡，WebGPU 给了个对象来代替它： const adapter = await naviga
阅读全文
摘要：1. 常见问题 ① WebGL、ThreeJS 会淘汰吗？WebGL 是不是过时了？WebGPU 性能是不是比 WebGL 强？ ThreeJS 会淘汰吗？ ThreeJS、BabylonJS 两个应用级 3D 库一直在设计 WebGPU 为底层的新渲染器，后者尤为积极。 什么是应用级？这两个库都屏
阅读全文
摘要：1. 技术说明 使用最新 Edge/Chrome Canary 浏览器 使用 VSCode 插件 LiveServer 的 HTTP 服务器对本机提供 5500 端口的页面服务，即 http://localhost:5500/index.html 使用 es-module 风格的 JavaScrip
阅读全文
摘要：WGSL 还在积极讨论中，虽然各位大佬不是很满意这个新生儿。 不过，社区已经有了基础的实验性工具（VSCode 插件），并支持了较新的语法。 ① WGSL 插件 这个插件支持对文件扩展名为 .wgsl 的源代码文件进行高亮显示。 ② WGSL Literal 插件 这个插件允许你在 JavaScri
阅读全文
摘要：原文译名：WebGPU - 专注于处理核心（GPU Cores），而不是绘图画布（Canvas） 原文发布于 2022年3月8日，传送门 https://surma.dev/things/webgpu 这篇东西非常长，不计代码字符也有1w字，能比较好理解 WebGPU 的计算管线中的各个概念，并使用
阅读全文
摘要：系列完结后记 林林总总写了一些文章来对比 WebGL 与 WebGPU 的常规功能，兴许在 API 的理解上有些业余，甚至不排除有表述错误，但是写对的部分，我希望对读者与未来的图形开发者有所启迪。 过去，WebGL 给 Web 图形开发者打开了一扇新的大门： 原来浏览器可以不借助插件搞酷炫的三维效果
阅读全文
摘要：1. 综述 其实，写到第六篇比对基本上常规的 API 就差不多比对完了（除了 GPGPU、查询方面的 API 未涉及），但是有一个细节仍然值得我开一篇比对文章进行思考、记录，那就是渲染到何处。 WebGL 的上下文对象是与 canvas 元素强关联的，没有 canvas 创建不了上下文，也就是说，W
阅读全文
摘要：图形编程中的纹理，是一个很大的话题，涉及到的知识面非常多，有硬件的，也有软件的，有实时渲染技术，也有标准的实现等非常多可以讨论的。 受制于个人学识浅薄，本文只能浅表性地列举 WebGL 和 WebGPU 中它们创建、数据传递和着色器中大致的用法，格式差异，顺便捞一捞压缩纹理的资料。 1. WebGL
阅读全文
摘要：前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的（纹理留到下一篇），当渲染所需的原材料准备完成后，就要进入逻辑组装的过程。 WebGL 在这方面通过指定“WebGLProgram”，最终触发“drawArrays”或“drawElements”来启动渲染
阅读全文
摘要：众所周知，在 GPU 跑可编程管线的时候，着色器是并行运行的，每个着色器入口函数都会在 GPU 中并行执行。每个着色器对一大片统一格式的数据进行冲锋，体现 GPU 多核心的优势，可以小核同时处理数据；不过，有的数据对每个着色器都是一样的，这种数据的类型是“uniform”，也叫做统一值。 这篇文章罗
阅读全文
摘要：1. WebGL 中的 VBO 1.1. 创建 WebGLBuffer WebGL 使用 TypedArray 进行数据传递，这点 WebGPU 也是一样的。 下面的代码是 WebGL 1.0 常规的 VertexBuffer 创建、赋值、配置过程。 const positions = [ 0, 0
阅读全文
摘要：OpenGL 体系给图形开发留下了不少的技术积累，其中就有不少的“Buffer”，耳熟能详的就有顶点缓冲对象（VertexbufferObject，VBO），帧缓冲对象（FramebufferObject，FBO）等。 切换到以三大现代图形开发技术体系为基础的 WebGPU 之后，这些经典的缓冲对象
阅读全文
摘要：1. 什么是缓冲映射 就不给定义了，直接简单的说，映射（Mapping）后的某块显存，就能被 CPU 访问。 三大图形 API（D3D12、Vulkan、Metal）的 Buffer（指显存）映射后，CPU 就能访问它了，此时注意，GPU 仍然可以访问这块显存。这就会导致一个问题：IO冲突，这就需要
阅读全文
摘要：1. 获取高频操作对象 1.1 WebGL 获取上下文对象 WebGL 获取的是 WebGLRenderingContext/WebGLRenderingContext2 对象，必须依赖于有合适宽度和高度的 HTMLCanvasElement，通常命名为 gl，gl 变量有非常多方法，允许修改 We
阅读全文
摘要：来自 2022 WebGL & WebGPU Meetup 的 幻灯片，文末有资料。 1 在能用的地方都用 label 属性 WebGPU 中的每个对象都有 label 属性，不管你是创建它的时候通过传递 descriptor 的 label 属性也好，亦或者是创建完成后直接访问其 label 属性
阅读全文
摘要：1 VAO 是 OpenGL 技术中提出来的 参考： 外链 其中有一段文字记录了 VAO 是什么： A Vertex Array Object (VAO) is an object which contains one or more Vertex Buffer Objects and is des
阅读全文
摘要：支持 WebGPU API 的环境，可不止浏览器一个。 虽说 NodeJS 没什么消息说要支持，但是 Deno 这个 js/ts 运行时老早就支持了，能脱离浏览器直接在控制台访问 GPU，感觉十分有趣。 确保 Deno 版本 至少要高于 1.8，最好装最新 > deno --version deno
阅读全文
摘要：这篇讲讲历史，不太适合直奔主题的朋友们。 1 为什么是 WebGPU 而不是 WebGL 3.0 你若往 Web 图形技术的底层去深究，一定能追溯到上个世纪 90 年代提出的 OpenGL 技术，也一定能看到，WebGL 就是基于 OpenGL ES 做出来的这些信息。OpenGL 在那个显卡羸弱的
阅读全文
1
浙公网安备 33010602011771号