作者|王瑞平审校|云昭51CTO读者成长计划社群招募，咨询小助手（微信号：TTalkxiaozhuli）好消息，页游要重新崛起了！Web上有望产生3A游戏大作了！经过6年持续不断的开发，Chrome团队于当地时间4月6日发布WebGPU。它是一种新型的API，可以让Web应用程序更多地访问你的显卡功能，能够被用来在网络上进行高性能3D图形和数据并行计算。当日，Chrome团队还激动地宣布：“WebGPU可以在Chrome113中默认可用，目前仍处于Beta测试阶段。”具体来讲，WebGPU能够显著降低相同图形规模下JavaScript的工作负载量。不仅如此，它还将机器学习模型的效率提升了3倍
作者|王瑞平审校|云昭51CTO读者成长计划社群招募，咨询小助手（微信号：TTalkxiaozhuli）好消息，页游要重新崛起了！Web上有望产生3A游戏大作了！经过6年持续不断的开发，Chrome团队于当地时间4月6日发布WebGPU。它是一种新型的API，可以让Web应用程序更多地访问你的显卡功能，能够被用来在网络上进行高性能3D图形和数据并行计算。当日，Chrome团队还激动地宣布：“WebGPU可以在Chrome113中默认可用，目前仍处于Beta测试阶段。”具体来讲，WebGPU能够显著降低相同图形规模下JavaScript的工作负载量。不仅如此，它还将机器学习模型的效率提升了3倍
目录1.丐版HelloWebGPU①为什么是index.html②你这个代码为什么浏览器没有显示东西？③为什么你不用HTTP协议打开index.html2.我需要类型提示2.1.使用VSCode的jsconfig获取类型提示2.2.在前端工程化的项目中使用类型提示2.3.在Vue/React等项目中3.画三角形的例子4.作者的话1.丐版HelloWebGPU最简单的WebGPU程序应该是这样的：constinit=()=>{if('gpu'innavigator){console.log(navigator.gpu)}else{console.log('浏览器不支持WebGPU；浏览器未开启W
目录1.丐版HelloWebGPU①为什么是index.html②你这个代码为什么浏览器没有显示东西？③为什么你不用HTTP协议打开index.html2.我需要类型提示2.1.使用VSCode的jsconfig获取类型提示2.2.在前端工程化的项目中使用类型提示2.3.在Vue/React等项目中3.画三角形的例子4.作者的话1.丐版HelloWebGPU最简单的WebGPU程序应该是这样的：constinit=()=>{if('gpu'innavigator){console.log(navigator.gpu)}else{console.log('浏览器不支持WebGPU；浏览器未开启W
目录1.核心概念①适配器和设备②缓冲、纹理、采样器③绑定组④着色器与管线⑤编码器与队列2.重要机制①缓冲映射机制②时间线1.核心概念这部分不会详细展开，以后写教程时会深入。以下只是核心概念，是绝大多数WebGPU原生程序要接触的，并不是全部。①适配器和设备适配器，也就是GPUAdapter，指代真正的物理显卡，WebGPU给了个对象来代替它：constadapter=awaitnavigator.gpu.requestAdapter()它提供了一个最重要行为，请求设备对象GPUDevice：constdevice=awaitadapter.requestDevice()那么什么是Device？
目录1.核心概念①适配器和设备②缓冲、纹理、采样器③绑定组④着色器与管线⑤编码器与队列2.重要机制①缓冲映射机制②时间线1.核心概念这部分不会详细展开，以后写教程时会深入。以下只是核心概念，是绝大多数WebGPU原生程序要接触的，并不是全部。①适配器和设备适配器，也就是GPUAdapter，指代真正的物理显卡，WebGPU给了个对象来代替它：constadapter=awaitnavigator.gpu.requestAdapter()它提供了一个最重要行为，请求设备对象GPUDevice：constdevice=awaitadapter.requestDevice()那么什么是Device？
目录1.常见问题①WebGL、ThreeJS会淘汰吗？WebGL是不是过时了？WebGPU性能是不是比WebGL强？②WebGPU什么时候能用？怎么才能用WebGPU？我学习WebGPU需要什么条件？③WebGPU有什么用？它解决了什么问题？④学了WebGPU是不是能写出好看的效果？⑤WebGPU有缺点吗？2.一些看法与分享①使用分析与综合的辩证思维，全面、联系地看问题②具体问题具体分析，抽象和具体应该结合在一起1.常见问题①WebGL、ThreeJS会淘汰吗？WebGL是不是过时了？WebGPU性能是不是比WebGL强？ThreeJS会淘汰吗？ThreeJS、BabylonJS两个应用级3D
目录1.常见问题①WebGL、ThreeJS会淘汰吗？WebGL是不是过时了？WebGPU性能是不是比WebGL强？②WebGPU什么时候能用？怎么才能用WebGPU？我学习WebGPU需要什么条件？③WebGPU有什么用？它解决了什么问题？④学了WebGPU是不是能写出好看的效果？⑤WebGPU有缺点吗？2.一些看法与分享①使用分析与综合的辩证思维，全面、联系地看问题②具体问题具体分析，抽象和具体应该结合在一起1.常见问题①WebGL、ThreeJS会淘汰吗？WebGL是不是过时了？WebGPU性能是不是比WebGL强？ThreeJS会淘汰吗？ThreeJS、BabylonJS两个应用级3D
目录1.技术说明2.三角形例子HTMLJavaScript3.着色器解析帧缓冲坐标图示源码1.技术说明使用最新Edge/ChromeCanary浏览器使用VSCode插件LiveServer的HTTP服务器对本机提供5500端口的页面服务，即http://localhost:5500/index.html使用es-module风格的JavaScript实现2.三角形例子先上效果，后面再解析片元着色器：HTMLhtml部分就简单一些不出意外的话，你可以看到一个带暗绿色边框的canvas，长宽均为600像素。JavaScriptJavaScript代码也比较简单，省略大部分动态代码和有无判断代码：
目录1.技术说明2.三角形例子HTMLJavaScript3.着色器解析帧缓冲坐标图示源码1.技术说明使用最新Edge/ChromeCanary浏览器使用VSCode插件LiveServer的HTTP服务器对本机提供5500端口的页面服务，即http://localhost:5500/index.html使用es-module风格的JavaScript实现2.三角形例子先上效果，后面再解析片元着色器：HTMLhtml部分就简单一些不出意外的话，你可以看到一个带暗绿色边框的canvas，长宽均为600像素。JavaScriptJavaScript代码也比较简单，省略大部分动态代码和有无判断代码：
