2023-04-22
1. WebGPU学习开发环境配置
# WebGPU学习(开发)环境配置
WebGPU免费的部分视频 (opens new window)
咱们的WebGPU学习(开发)环境配置比较简单，不用vite或webpack配置一个复杂的开发环境，直接使用原生.html文件即可。入门学习WebGPU，平时测试代码，都会非常方便，大大节约学习时间。
# 1. 一个支持WebGPU的浏览器
谷歌浏览器从Chrome 113 Beta测试版开始默认支持WebGPU。如果你的谷歌浏览器低于113版本，请下载新版本浏览器才能正常学习WebGPU。下载安装后，就可以直接预览webGPU的3D案例了。
随着时间的推移，将会越来越多的浏览器支持WebGPU。
谷歌浏览器Beta测试版下载 (opens new window)
你可以用上面链接下载最新版谷歌浏览器，也可以直接用课件中我下载好的ChromeSetup.exe，运行安装。
# 2. index.html文件
<script>标签设置type="module"，你就可以直接浏览器中实现ES6语法了，不用webpack或vite进行编译处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>http://www.webgl3d.cn/</title>
</head>
<body>
<script type="module">
// 编写WebGPU代码
</script>
</body>
</html>
# 3. vscode编辑器
课程选择的是vscode编辑器，平时开发调试WebGPU案例源码,是借助live-srever插件调用浏览器执行WebGPU代码，非常方便。
# 4. 测试你的浏览器是否支持WebGPU
<script type="module">
if(navigator.gpu){
console.log('你的浏览器支持WebGPU。');
}else{
console.log('你的浏览器不支持WebGPU，请更换新版本浏览器。');
}
</script>