学习笔记 | Orillusion-WebGPU小白入门（一）

（一）简介&开发配置

开发需求

开发工具

• Chrome
• VSCode
• Vite

开发语言

• JavaScript
• HTML/CSS
• TypeScript
• WGSL

系统环境

• CMD/Terminal
• Node.js
• npm
• Git

下载打开Orillusion开发模板

在VSCode新建Terminal

#克隆Orillusion的GitHub库到本地
git clone https://github.com/Orillusion/orillusion-webgpu-samples

#进入地址
cd orillusion-webgpu-samples

#Node.js命令：下载（需要事先安装Node.js）
npm install

npm run dev

Local:http://localhost:3000/

package.json：表明项目基本信息和依赖关系

tsconfig.json：引用定义包（vite、@webgpu）

src/：demo的.ts源码和.wgsl shader

samples/：html文件

判断WebGPU是否可用

const gpu = navigator.gpu
if(gpu === undefined){
	console.log('not support webgpu')
}else{
	console.log('hello webgpu')
	document.body.innerHTML = '
Hello WebGPU
'
}

if(!navigator.gpu)
	throw new Error('not support webgpu')

使用async函数处理promise函数（推荐）

WebGPU的API主要为异步API。

async function initWebGPU(){
	const adapter = await navigator.gpu.requestAdapter()
	if(!adapter)
		throw new Error('no adapter found')
	const device = await adapter.requestDevice()
	return adapter
}

async function run(){
	const adapter = await initWebGPU
}