学习笔记 | Orillusion-WebGPU小白入门（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51146371/article/details/126901752

本文档介绍了WebGPU的基础知识，包括开发需求、开发环境配置，以及如何使用Orillusion框架。通过VSCode和Vite进行项目设置，利用JavaScript和WGSL编写代码，并指导如何判断WebGPU是否可用，以及处理异步API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）简介&开发配置

开发需求

开发工具

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 = '<h1>Hello WebGPU</h1>'
}

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
}