目录 1 为什么是 WebGPU 而不是 WebGL 3.0 显卡驱动 图形 API 的简单年表 WebGL 能运行在各个浏览器的原因 WebGPU 的名称由来 2 与 WebGL 比较编码风格 OpenGL 的编码风格 CPU 负载问题 WebGPU 的装配式编码风格 厨子戏法 3 多线程与强大的通用计算(GPGPU)能力 WebWorker 多线程 通用计算(GPGPU) 4 浏览器的实现 5 未来 参考资料 这篇讲讲历史,不太适合直奔主题的朋友们. 1 为什么是 WebGPU 而不是 We

大家好,本文学习Chrome->webgl-samplers->helloTriangle示例. 准备Sample代码 克隆webgl-samplers Github Repo到本地. (备注:当前的version为0.0.2) 实际的sample代码在src/examples/文件夹中,是typescript代码写的: 学习helloTriangle.ts 打开helloTriangle.ts文件,我们来看下init函数的内容. 首先是shader代码 const vertexShaderG

大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的分析.这是我非常感兴趣的技术方向,也是图形学的发展方向之一.本系列后续文章会围绕这个方向进行更多的研究和实现相关的Demo. 上一篇博文: WebGPU学习(四):Alpha To Coverage 本文内容 前置知识 技术要点 并行 Multiple Queues 同步 多线程 内存管理 延迟渲染

大家好,本文介绍了"GPU实现粒子效果"的基本思想,并推荐了相应的学习资料. 本文学习webgpu-samplers->computeBoids示例,它展示了如何用compute shader实现粒子效果,模拟鸟群的行为. 上一篇博文: WebGPU学习(九):学习"fractalCube"示例 最终渲染结果: 为什么不在CPU端实现粒子效果? 虽然在CPU端实现会更灵活和可控,但如果粒子数量很大(如上百万),且与场景有交互,则最好在GPU端实现. 示例的实现

大家好~这三个月以来,我一直在学习和实现"基于WebGPU的混合光线追踪实时渲染"的技术,使用了Ray Tracing管线(如.rgen..rmiss等着色器). 现在与大家分享和介绍我目前的学习成果,希望对大家有所帮助!谢谢! 通过国外的开源项目,可在WebGPU中使用Ray Tracing管线 这三个月我对Ray Tracing的研究有了质的突破,主要归功于我发现的WebGPU Node开源项目! 该作者首先在dawn-ray-tracing开源项目中对"dawn项目:C

代码见: https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/01-triangle 如果本篇的代码不能跑了,请联系我或自己看看文档试试修改. 2021年3月31日 入口:navigator.gpu WebGL1 或 WebGL2 是从 canvas.getContext('webgl') 这样获取一个上下文对象来进行一切操作的. 而 WebGPU 则直接从浏览器对象中获取一个附件一样的东西:navigator.gp

本节我们来复原一个彩色的正方形,前提告知,本节的shaders和main的代码从结构上有调整,我会更加详细的描述每行的代码意思: 源代码下载地址:https://github.com/jack1232/webgpu07 一.首先需要你安装所有的软件包 安装完软件包,确保你的本地生成node_modules文件夹 npm install 二.创建你的index.html文件 1.<canvas>的"canvas-webgpu"你可以理解为调用webgpu内的canvas接口:

非常兴奋,我坚持了下来,开始更新我的第二篇博客,还是关于WebGPU的,我在学习过程中,对这项技术非常感兴趣,即使它非常抽象,难以理解,因为我看到未来Web3D的发展,WebGPU会成为主流技术,学习这项技术的前景会更加光明. 本节来创建单色三角形,并通过输入color四元数组数值对三角形颜色进行改变. 一.使用搭建好的开发环境进行所有软件包的安装 使用上一章节搭建好的所有配置文件,先进行一步所有软件包的安装(这是徐博士教程里的步骤),为的是产生node_modules文件夹内的所有配置文件,但

目录 1 WebGL 中的 FBO 与 RBO 1.1 帧缓冲对象(FramebufferObject) 1.2 颜色附件与深度模板附件的真正载体 1.3 FBO/RBO/WebGLTexture 相关方法收集 2 WebGPU 中的对等概念 2.1 渲染通道编码器(GPURenderPassEncoder)承担 FBO 的职能 2.2 多目标渲染 2.3 深度附件与模板附件 2.4 非 canvas 的纹理对象作为两种附件的注意点 3 读取数据 3.1 从 FBO 中读像素值 3.2 WebG

目录 1. WebGL 1.0 Uniform 1.1. 用 WebGLUniformLocation 寻址 1.2. 矩阵赋值用 uniformMatrix[234]fv 1.3. 标量与向量用 uniform[1234][fi][v] 1.4. 传递纹理 2. WebGL 2.0 Uniform 2.1. 标量/向量/矩阵传值方法扩充 2.1. 什么是 UniformBlock 与 UniformBuffer 的创建 2.2. 状态绑定 2.3. 着色器中的 Uniform 2.4. 传递纹

目录 1. WebGL 1.1. 使用 WebGLProgram 表示一个计算过程 1.2. WebGL 没有通道 API 2. WebGPU 2.1. 使用 Pipeline 组装管线中各个阶段 2.2. 使用 PassEncoder 调度管线内的行为 2.3. 使用 CommandEncoder 编码多个通道 2.4. PassEncoder 和 Pipeline 的关系 3. 总结 前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的(纹理留到下一

目录 1. WebGL 中的纹理 1.1. 创建二维纹理与设置采样参数 1.2. 纹理数据写入与拷贝 1.3. 着色器中的纹理 1.4. 纹理对象 vs 渲染缓冲对象 1.5. 立方体六面纹理 1.6. WebGL 2.0 的变化 1.7. Mipmapping 技术 2. WebGPU 中的纹理 2.1. GPUTexture 的创建 2.2. 纹理数据写入与拷贝 2.3. 纹理视图 2.4. 着色器中的纹理与采样器 2.5. WebGPU 中的 Mipmapping 3. 纹理压缩编码算法

目录 1. WebGL 2. WebGPU 2.1. 适配器(Adapter)和设备(Device) 2.2. 着色器(Shaders) 2.3. 管线(Pipeline) 2.4. 并行(Parallelism) 2.5. 工作组(Workgroup) 2.6. 指令(Command) 3. 数据交换 3.1. 绑定组的布局(GPUBindGroupLayout) 3.2. 暂存缓冲区(Staging Buffer) 3.3. 过度调度 3.4. 麻烦的结构体(内存地址对齐问题) 3.5. 输

目录 1. 核心概念 ① 适配器和设备 ② 缓冲.纹理.采样器 ③ 绑定组 ④ 着色器与管线 ⑤ 编码器与队列 2. 重要机制 ① 缓冲映射机制 ② 时间线 1. 核心概念 这部分不会详细展开,以后写教程时会深入.以下只是核心概念,是绝大多数 WebGPU 原生程序要接触的,并不是全部. ① 适配器和设备 适配器,也就是 GPUAdapter,指代真正的物理显卡,WebGPU 给了个对象来代替它: const adapter = await navigator.gpu.requestAdapte

大家好~本文在如何用WebGPU流畅渲染百万级2D物体?基础上进行优化,使用WebGPU实现了Ray Packet,也就是将8*8=64条射线作为一个Packet一起去访问BVH的节点.这样做的好处是整个Packet只需要一个维护BVH节点的Stack,节省了GPU Shared Memory:坏处是一个Packet的64条射线是并行计算的,需要实现同步逻辑,并且针对GPU的架构进行并行优化 相关文章如下: 如何用WebGPU流畅渲染百万级2D物体? 目录 成果 算法实现 并行计算的优化点 为什

现在,我学了很长时间的C++,但是自己就是无法精通.许多知识是入门书上没有的.现在写C++最重要的就是风格问题. 我现在的C++风格: 把自己所有的东西都放在一个名称空间下. 没有全局的函数,有的函数没有定义在类中,就把这些函数全部放在一个名称空间中,把所有类外部的函数分类放在特定的名称空间中,有些特殊的类或者函数之是为其他的类或函数做服务,外部不需要他们的,只是内部使用的时候,就把他们放在叫Detail的名称空间中,防止名称空间污染. 类或函数遵循Pascal风格:开头大写,后面的每一个单词的

背景: 1:.NET Core 已经没System.Web,也木有了HttpRuntime.Cache,因此,该空间下Cache也木有了. 2:.NET Core 有新的Memory Cache提供,不过该内存类我看了一下,并没有支持文件的缓存依赖. 因此,在此前提下,预计.NET Core明年出来2.0版本时,可能也没支持文件的缓存依赖,因此,有必要提前准备实现. 在写此文前,我扫了一下园子里关于自定义缓存类的相关文章. 发现很多自定义的缓存类文章都简单停留在对字典的增删改查. 因此,决定补充

直接切入正题,这是我09年到11年左右业余时间编写的项目,最初的想法很简单,做一个能拖拖拽拽就直接生成应用程序的工具,不用写代码,把能想到的业务操作全部封装起来,通过配置的方式把这些业务操作组织起来运行. 项目的核心功能已经基本实现,但12年之后我基本停止了这方面的开发,现在翻出来在这里写出来想和大家交流一下. 鉴于篇幅和精力的原因,请原谅我这篇博文对于技术实现的具体细节谈的不是很多,只能算是一个概述.对业务的说明也不多,我想大家都是技术流,应该一看就明白. 写这个项目的时间是五六年前,现在回过

前言: 项目紧赶慢赶总算在年前有了一些成绩,所以沉寂了几周之后,小匹夫也终于有时间写点东西了.以前匹夫写过一篇文章,对CIL做了一个简单地介绍,不过不知道各位看官看的是否过瘾,至少小匹夫觉得很不过瘾.所以决定写几篇关于CIL的文章,即和各位看官一起进行个交流,同时也是匹夫自己总结和巩固一下这些知识点.俗话说的好,“万事开头,Hello World”,那么作为匹夫总结CIL的第一篇文章,就从Hello World开始吧.当然,正式开始写CIL代码之前,我们还有点闲话要说,那就是运行时的选择为何是它

# 增强学习成果 有一个研究成果,在学习中传授他人知识和讨论是最高效的做法,而看书则是最低效的做法(具体研究成果没找到地址).我写LeetCode博客主要目的是增强学习成果.当然,我也想出名,然而不知道能否出名. # 给算法的新手们提供一种思考方式的参考 提前说明,本人也不是高手. 算法这个东西有点玄乎.很多新手(包括我)初期入门的时候都学的是<算法导论>,然而我并不觉得<算法导论>是一本学习算法很好的书. 我们设计算法的流程,并不是像<算法导论>那样,好像天生就知道这