首页 > TAG信息列表 > webgpu
使用taichi.js进行WebGPU编程
模拟让我们使用taichi.js深入了解生命游戏的实现。首先，我们在速记ti下导入taichi.js库，并定义一个async main()函数，该函数将包含我们所有的逻辑。在main()我们从调用ti.init()开始，它初始化库及其WebGPU上下文。从“path/to/taichi.js”导入*作为tilet main = async () =>WebGPU光追引擎基础课：课程介绍
大家好~我开设了“WebGPU光追引擎基础课”的线上课程，从0开始，在课上带领大家现场写代码，使用WebGPU开发基础的光线追踪引擎 课程重点在于基于GPU并行计算，实现BVH构建和遍历 本课程使用自主开发的Meta3D低代码开发平台来开发和共享老师和学生的代码，方便大家自由分享 线上课程资料： 本WebGPU光追引擎基础课系列目录
大家好~我开设了“WebGPU光追引擎基础课”的线上课程，从0开始，在课上带领大家现场写代码，使用WebGPU开发基础的光线追踪引擎 课程重点在于基于GPU并行计算，实现BVH构建和遍历 本课程使用自主开发的Meta3D低代码开发平台来开发和共享老师和学生的代码，方便大家自由分享 线上课程资料： TOD如何创建前端 WebGPU 项目？
目录1. 丐版 HelloWebGPU① 为什么是 index.html② 你这个代码为什么浏览器没有显示东西？③ 为什么你不用 HTTP 协议打开 index.html2. 我需要类型提示2.1. 使用 VSCode 的 jsconfig 获取类型提示2.2. 在前端工程化的项目中使用类型提示2.3. 在 Vue/React 等项目中3. 画三角形的例在 WebGPU 中使用时间戳查询
目录概述按步教学0. 让浏览器具备时间戳查询功能1. 创建 Queryset 和缓冲对象2. 写入时间戳3. 解析时间戳到缓冲对象中4. 读取查询结果5. (可选)添加标签致谢 原文 https://github.com/OmarShehata/webgpu-compute-rasterizer/blob/main/how-to-use-timestamp-queries.md 本文如WebGPU的计算着色器实现冒泡排序
大家好~本文使用WebGPU的计算着色器，实现了奇偶排序。奇偶排序是冒泡排序的并行版本，在1996年由J Kornerup提出。它解除了每轮冒泡间的串行依赖以及每轮冒泡内部的串行依赖，使得冒泡操作可以并行执行 目录 介绍奇偶排序算法 分析时间复杂度 需求 初步设计 代码实现 发现问题 改WebGPU 导入[2] - 核心概念与重要机制解读
目录1. 核心概念① 适配器和设备② 缓冲、纹理、采样器③ 绑定组④ 着色器与管线⑤ 编码器与队列2. 重要机制① 缓冲映射机制② 时间线 1. 核心概念 这部分不会详细展开，以后写教程时会深入。以下只是核心概念，是绝大多数 WebGPU 原生程序要接触的，并不是全部。 ① 适配器和设备 适WebGL 与 WebGPU比对[5] - 渲染计算的过程
目录1. WebGL1.1. 使用 WebGLProgram 表示一个计算过程1.2. WebGL 没有通道 API2. WebGPU2.1. 使用 Pipeline 组装管线中各个阶段2.2. 使用 PassEncoder 调度管线内的行为2.3. 使用 CommandEncoder 编码多个通道2.4. PassEncoder 和 Pipeline 的关系3. 总结 前两篇文章介绍了 WebWebGL 与 WebGPU比对[4] - Uniform
目录1. WebGL 1.0 Uniform1.1. 用 WebGLUniformLocation 寻址1.2. 矩阵赋值用 uniformMatrix[234]fv1.3. 标量与向量用 uniform[1234][fi][v]1.4. 传递纹理2. WebGL 2.0 Uniform2.1. 标量/向量/矩阵传值方法扩充2.1. 什么是 UniformBlock 与 UniformBuffer 的创建2.2. 状态绑定2.3WebGPU 中消失的 VAO
文章目录 1 VAO 是 OpenGL 技术中提出来的 2 WebGPU 天生就能先保存状态 2.1 WebGL 与 WebGPU 相关 API 对比 2.2 谁替代了 VAO？ 2.3 代码举例 1 VAO 是 OpenGL 技术中提出来的 参考： https://www.khronos.org/opengl/wiki/Tutorial2:_VAOs,VBOs,Vertex_and_FragWebGL 和 WebGPU[1] - 前奏篇
文章目录 1 为什么是 WebGPU 而不是 WebGL 3.0 显卡驱动 图形 API 的简单年表 WebGL 能运行在各个浏览器的原因 WebGPU 的名称由来 2 与 WebGL 比较编码风格 OpenGL 的编码风格 CPU 负载问题 WebGPU 的装配式编码风格 厨子戏法 3 多线程与强大的通用计算（GPGPU）能力WebGPU | 相关知识概述
首先看下WebGPU的目标： 同时支持实时屏幕渲染和离屏渲染。 使通用计算能够在 GPU 上高效执行。 支持针对各种原生 GPU API 的实现：Microsoft 的 D3D12、Apple 的 Metal 和 Khronos 的 Vulkan。 提供一种人类可创作的语言来指定在 GPU 上运行的计算。 可在浏览器的多进程架WebGPU图形编程（3）：构建三角形图元<学习引自徐博士教程>
一、首先修改你的index.html文件 请注意主要在html页面修改添加的是需要加选择项："triangle-list"和"triangle-strip",如果你不理解这两个关键词，移步查看webgpu文档：https://www.orillusion.com/zh/webgpu.html#primitive-state 的第10.3.2节Primitive state查看原始状态可以创建哪WebGPU相关的资源学习和社区
我在网上搜寻了很多关于WebGPU相关的资料； #我觉得首先在B站上看到的徐博士免费教程非常好，讲解详细，并且评论回复比较快，都会有回应，徐博士B站网址：https://space.bilibili.com/1982541803/channel/collectiondetail?sid=96596； #老徐GitHub关于WebGPU案例源代码的网址：https://github.coWebGPU图形编程（1）：建立开发环境 <学习引自徐博士教程>
首先感谢徐博士提供的视频教程，我的博客记录也是学习徐博士进行的自我总结，老徐B站学习视频链接网址：WebGPU图形编程 - 免费视频教程（1）：建立开发环境_哔哩哔哩_bilibili 创建之前你需要安装以下WebGPU开发工具 Visual Studio Code (https://code.visualstudio.com)Node.js (httpsWebGL 与 WebGPU 比对[1] 前奏
目录1 为什么是 WebGPU 而不是 WebGL 3.0显卡驱动图形 API 的简单年表WebGL 能运行在各个浏览器的原因WebGPU 的名称由来2 与 WebGL 比较编码风格OpenGL 的编码风格CPU 负载问题WebGPU 的装配式编码风格厨子戏法3 多线程与强大的通用计算（GPGPU）能力WebWorker 多线程通用计算（GPGPU）4WebGPU性能测试分析
大家好，本文对WebGPU进行性能测试和分析，目的是为了对比WebGL和WebGPU在“渲染”和“计算”两个维度的性能差异，具体表现为CPU性能和FPS性能两个方面的性能数据差异。 我们会分别在苹果笔记本和配备RTX显卡的台式机上，对WebGL和WebGPU分别进行性能测试。 本文对于WebGPU使用了“reuseTVM性能评估分析（三）
TVM性能评估分析（三） Figure 1. TVM’s WebGPU backend close to native GPU performance when deploying models to the web. Figure 2. WebGPU is to write shaders for primitive operators in deep neural networks Figure 3. Build a WebGPU ru【Rust日报】 2019-06-01：用 Rust 实现 WebGPU 协议
dua - 并行的文件统计工具也就是 du 的翻版啦。这个用上了Rust的并行化技术。速度比原来的 du 更快，特别是在SSD下更快。比如像下面这样测试time du -sh real 0m1.003stime dua -t 8 real 0m0.378stime dua -t 1 real 0m0.971sRepo小技巧：cargo clean的时候，不想重新编译依赖，怎么办？carWebGPU学习（九）：学习“fractalCube”示例
学习fractalCube.ts最终渲染结果： 该示例展示了如何用上一帧渲染的结果作为下一帧的纹理。与“texturedCube”示例相比，该示例的纹理并不是来自图片，而是来自上一帧渲染的结果下面，我们打开fractalCube.ts文件，分析相关代码：传输顶点的color它与“texturedCube”示例->“传递顶点的uv数据WebGPU学习（十）：介绍“GPU实现粒子效果”
最终渲染结果：为什么不在CPU端实现粒子效果？虽然在CPU端实现会更灵活和可控，但如果粒子数量很大（如上百万），且与场景有交互，则最好在GPU端实现。示例的实现思想首先执行compute pass代码如下： const numParticles = 1500; ... let t = 0; return function frame()WebGPU[4] 纹理三角形
代码见：https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/04-texture-triangle 原创，发布日 2021年4月5日，@秋意正寒。若代码失效请留言，或自行到官网根据最新 API 修改。 数据预览 NDC 坐标和 纹理坐标（原点、朝向、值域）基础不再补充。 0.1 VBO const vbodata =WebGPU+光线追踪Ray Tracing 开发三个月总结
大家好~这三个月以来，我一直在学习和实现“基于WebGPU的混合光线追踪实时渲染”的技术，使用了Ray Tracing管线（如.rgen、.rmiss等着色器）。 现在与大家分享和介绍我目前的学习成果，希望对大家有所帮助！谢谢！ 通过国外的开源项目，可在WebGPU中使用Ray Tracing管线 这三个月我对Ray TracingWebGPU学习（八）：学习“texturedCube”示例
大家好，本文学习Chrome->webgpu-samplers->texturedCube示例。 上一篇博文： WebGPU学习（七）：学习“twoCubes”和“instancedCube”示例 学习texturedCube.ts 最终渲染结果： 该示例绘制了有一个纹理的立方体。 与“rotatingCube”示例相比，该示例增加了下面的步骤： 传输顶点的uv数据 增加WebGPU学习（七）：学习“twoCubes”和“instancedCube”示例
大家好，本文学习Chrome->webgpu-samplers->twoCubes和instancedCube示例。 这两个示例都与“rotatingCube”示例差不多。建议大家先学习该示例，再学习本文的两个示例 上一篇博文： WebGPU学习（六）：学习“rotatingCube”示例 学习twoCubes.ts 该示例绘制了两个立方体。 与“rotatingCube”