WebGPU性能是不是比WebGL强？ThreeJS会淘汰吗？ThreeJS、BabylonJS两个应用级3D库一直在设计WebGPU为底层的新渲染器，后者尤为积极。什么是应用级？

这是一个底层基于WebGL开发的3D渲染引擎（当然，后续是否会正式发布基于WebGPU的版本，也是可能的）。

大家好~本文使用WebGPU和光线追踪算法，从0开始实现和逐步优化Demo，展示了从渲染500个2D物体都吃力到流畅渲染4百万个2D物体的优化过程和思路

在片元着色器中访问帧缓冲坐标1.技术说明使用最新Edge/ChromeCanary浏览器使用VSCode插件LiveServer的HTTP服务器对本机提供5500端口的页面服务，即http://localhost:5500/index.html使用es-module风格的JavaScript实现2.三角形例子先上效果，后面再解析片元着色器：HTMLhtml部分就简单一些不出意外的话，你可以看到一个

WGSL还在积极讨论中，虽然各位大佬不是很满意这个新生儿。不过，社区已经有了基础的实验性工具（VSCode插件），并支持了较新的语法。①WGSL插件这个插件支持对文件扩展名为.wgsl的源代码文件进行高亮显示。②WGSLLiteral插件这个插件允许你在JavaScript/TypeScript的模板字符串中进行wgsl代码高亮，需要加上模板字符串前置块注释：constcode=/*wgsl*/`

原文译名：WebGPU-专注于处理核心（GPUCores），而不是绘图画布（Canvas）原文发布于2022年3月8日，传送门https://surma.dev/things/webgpu这篇东西非常长

如果外链不能访问，关注公众号前端每周看，里面有解决办法大事件WebGPU——所有的核心，没有画布——一种暴露GPU硬件功能的API，诚然，默认情况下在任何标准浏览器中都不可用。

看了这么多WebGPU的发展和优势，你是不是也有点手痒了，心想，WebGPU听起来那么复杂，到底怎么开始着手？发布一个WebGPU的Project到底怎么做？

前两篇文章介绍了WebGL和WebGPU是如何准备顶点和数字型Uniform数据的（纹理留到下一篇），当渲染所需的原材料准备完成后，就要进入逻辑组装的过程。

2022年1月25日Khronos组织了一场备受瞩目的WebGL+WebGPU网络研讨会。

这篇文章罗列了原生WebGL1/2中的uniform资料，以及WebGPU中的uniform资料，有一些例子供参考，以用来比

1.获取高频操作对象1.1WebGL获取上下文对象WebGL获取的是WebGLRenderingContext/WebGLRenderingContext2对象，必须依赖于有合适宽度和高度的HTMLCanvasElement，通常命名为gl，gl变量有非常多方法，允许修改WebGL的全局状态constgl=document.getElementById("id")?.getContext("web

1.获取高频操作对象1.1WebGL获取上下文对象WebGL获取的是WebGLRenderingContext/WebGLRenderingContext2对象，必须依赖于有合适宽度和高度的HTMLCanvasElement，通常命名为gl，gl变量有非常多方法，允许修改WebGL的全局状态constgl=document.getElementById("id")?.getContext("web

切换到以三大现代图形开发技术体系为基础的WebGPU之后，这些经典的缓冲对象就在API中“消失了”。其实，它们的职能被更科学地分散到新的API去了。本篇讲一讲FBO与RBO，这两个通常

WebGPU禁止了这个行为，改用传递“所有权”来表示映射后的状态，颇具Rust的哲学。每一个时刻，

说到构建WebGPU引擎，你一定会问为什么不是Three.js或Babylon.js？Three.js是JavaScript语言开发。

1VAO是OpenGL技术中提出来的参考：https://www.khronos.org/openg...,_VBOs,_Vertex_and_Fragment_Shaders_(C_/_SDL)其中有一段文字记录了VAO是什么：AVertexArrayObject(VAO)isanobjectwhichcontainsoneormoreVertexBufferObjectsandisdesign

来自2022WebGL&WebGPUMeetup的幻灯片1在能用的地方都用label属性WebGPU中的每个对象都有label属性，不管你是创建它的时候通过传递descriptor的label属性也好，

1为什么是WebGPU而不是WebGL3.0你若往Web图形技术的底层去深究，一定能追溯到上个世纪90年代提出的OpenGL技术，也一定能看到，WebGL就是基于OpenGLES做出来的这些信息。

9月21日正式发布的Chrome94，带来了哪些有意思的新特性呢？背景十多年来，Web技术突飞猛进，其中Chrome功不可没，了解Chrome可以帮助我们理解前端行业的发展趋势。因此，我将以《了不起的Chrome浏览器》为题，对Chrome的每一个版本的重要特性进行详细解读，同时分享一些自己的一些思考：了不起的Chrome浏览器（1）：Chrome89开启Web应用的物联网时代了不起的Chrome

WebGPU是最新的Web3D图形API，浏览器封装了现代图形API（Dx12、Vulkan、Metal)，这才是未来的标准，不像WebGL2.0苹果直接不支持，好，开始今天的分享；点击链接查看是否支持

第五个例子，compute_boidsboids指的是群落，一群鸟，一群人什么的。特指一大群什么东西相互作用运动的case，这个例子是2D的，一堆三角形在哪动来动去，相互作用，在快要碰到的时候或减速，或掉头，或换方向，看起来就像一群没头苍蝇一样在扭动。先来看看大致的流程，个人理解流程分了三步，第一步通过computeshader，我们计算出1000份数据，每一份数据包含速度和角度之类的数据，用来决

第一个最简单的sample，绘制一个三角形。hello_triangle的效果图。我们一点一点来拆解这部分的内容。首先是关于引入的一个第三方库dist/utils.js这是由KaiNinomiya编译的将shader编译成SPIR-V的工具。具体可以参考：https://github.com/kainino0x/shaderc看git是个狠人啊-_-!!!web版在https://github.c

大家好~这三个月以来，我一直在学习和实现“基于WebGPU的混合光线追踪实时渲染”的技术，使用了RayTracing管线（如.rgen、.rmiss等着色器）。

KASGUI0.3发布KAS0.3版本发布,此版本已经在主题，图形和绘图API上进行了大量工作，包括用于Mandlebrot分形的交互式查看器（通过WebGPU着色器），模拟钟面（通过某种程度上可用的绘图

WebGPU是什么？

上一篇博文从0开发3D引擎（一）：开篇了解Web3DWeb3D的历史-WebGL目前Web3D是基于WebGL这个Web端3DAPI的，它的版本历史为：（图来自于WebGPU开发状态与计划）（注：OpenGL

本文记录12月我的业力因果，分享给大家，愿协助世界意识更加地提升～感谢～种子花了一天时间回顾业力因果，发布了《2019年9-11月份我主要的业力对应关系》结果第二天上午，我突然想起了年中尝试过的WebGPU

本文学习webgpu-samplers->computeBoids示例，它展示了如何用computeshader实现粒子效果，模拟鸟群的行为。

大家好，本文学习Chrome->webgpu-samplers->fractalCube示例。

大家好，本文学习Chrome->webgpu-samplers->texturedCube示例。

大家好，本文学习Chrome->webgpu-samplers->twoCubes和instancedCube示例。这两个示例都与“rotatingCube”示例差不多。

大家好，本文学习Chrome->webgpu-samplers->rotatingCube示例。

大家好，本文整理了现代图形API的技术要点，重点研究了并行和GPUDrivenRenderPipeline相关的知识点，调查了WebGPU的相关支持情况。另外，本文对实时光线追踪也进行了简要的分析。

WebGPU介绍WebGPU相当于DX12/Vulkan，能让程序员更灵活地操作GPU，从而大幅提升性能。

大家好，本文学习与MSAA相关的AlphaToCoverage以及在WebGPU中的实现。

大家好，本文学习MSAA以及在WebGPU中的实现。

上一篇文章：WebGPU学习（一）:开篇准备Sample代码克隆webgl-samplersGithubRepo到本地。

上一篇博文WebGPU学习系列目录下一篇博文WebGPU学习（二）:学习“绘制一个三角形”示例WebGPU介绍WebGPU相当于DX12/Vulkan，能让程序员更灵活地操作GPU，从而大幅提升性能。

本来这里要介绍最后一个sample，animometer.html的这个sample是为了展示uniform-buffer和dynamic-uniform-buffer的性能指标之间的差异但是由于官方已经删除了这个特性。具体可以看：https://gpuweb.github.io/gpuweb/但是由于我之前已经记录了早先的spec：可以明显发现这个特性已经不在了。官方给出的解释：换了个地方，且浏

dua-并行的文件统计工具也就是du的翻版啦。这个用上了Rust的并行化技术。速度比原来的du更快，特别是在SSD下更快。比如像下面这样测试timedu-shreal0m1.003stimedua-t8real0m0.378stimedua-t1real0m0.971sRepo小技巧：cargoclean的时候，不想重新编译依赖，怎么办？cargoclean之后，会重头开始编译，各种依赖会重新编译

在2017年2月7日，苹果又给H5游戏开发者带来了一个好消息：苹果的WebKit团队目前向W3C标准组织提交了一个『提议』，提议建立一个新的社区小组来讨论WebGPU标准。