WebGPU 01之Hello Triangle
1. 引言
WebGPU是什么？
WebGPU与WebGL的对比？
2. 快速体验
参考：Orillusion | 专业WebGPU社区 | WebGPU小白入门(一): 零基础创建第一个WebGPU项目
# Clone the repo
git clone https://github.com/Orillusion/orillusion-webgpu-samples.git
# Go inside the folder
cd orillusion-webgpu-samples
# Start installing dependencies
npm install #or yarn add
# Run project at localhost:3000
npm run dev #or yarn run dev
在Chrome 浏览器（版本100+） 中打开localhost:3000，即可看到运行结果：
注意：
目前（2022年7月）WebGPU未正式发布，接口代码变更较快
WebGPU未正式发布，各个浏览器支持程度不同，本文使用Chrome版本号为：105.0.5153.0（正式版本）canary （64 位），下载地址：开发者专用的 Chrome Canary 版功能 - Google Chrome
部署别人写的代码终究是少了点感觉，接下来将编写一个入手案例
3. Hello Triangle
3.1 环境准备
浏览器：Chrome Canary版，版本号为：105.0.5153.0（正式版本）canary （64 位）
将Chrome开启WebGPU功能：
在地址栏输入 chrome://flags/ 搜索 WebGPU，将WebGPU的功能打开
3.2 基础代码
创建一个HTML文件，设置基础代码，另外，WebGPU是借助HTML中的canvas元素实现的，所以创建一个canvas元素
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Triangle</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
background: #000;
color: #fff;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="./index.js"></script>
</body>
</html>
3.3 主要代码
同一目录下创建一个index.js文件，代码内容如下，流程讲解在下一节
index.js:
// initialize webgpu device & config canvas context
async function initWebGPU(canvas) {
if(!navigator.gpu)
throw new Error('Not Support WebGPU')
const adapter = await navigator.gpu.requestAdapter({
powerPreference: 'high-performance'
// powerPreference: 'low-power'
})
if (!adapter)
throw new Error('No Adapter Found')
const device = await adapter.requestDevice()
const context = canvas.getContext('webgpu')
const format = navigator.gpu.getPreferredCanvasFormat ? navigator.gpu.getPreferredCanvasFormat() : context.getPreferredFormat(adapter)
const devicePixelRatio = window.devicePixelRatio || 1
canvas.width = canvas.clientWidth * devicePixelRatio
canvas.height = canvas.clientHeight * devicePixelRatio
const size = {width: canvas.width, height: canvas.height}
context.configure({
// json specific format when key and value are the same
device, format,
// prevent chrome warning
alphaMode: 'opaque'
})
return {device, context, format, size}
}
// create a simple pipiline
async function initPipeline(device, format){
const descriptor = {
layout: 'auto',
vertex: {
module: device.createShaderModule({
code: `@vertex
fn main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
var pos = array<vec2<f32>, 3>(
vec2<f32>(0.0, 0.5),
vec2<f32>(-0.5, -0.5),
vec2<f32>(0.5, -0.5)
);
return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
}`
}),
entryPoint: 'main'
},
primitive: {
topology: 'triangle-list' // try point-list, line-list, line-strip, triangle-strip?
},
fragment: {
module: device.createShaderModule({
code: `@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}`
}),
entryPoint: 'main',
targets: [
{
format: format
}
]
}
}
return await device.createRenderPipelineAsync(descriptor)
}
// create & submit device commands
function draw(device, context, pipeline) {
const commandEncoder = device.createCommandEncoder()
const view = context.getCurrentTexture().createView()
const renderPassDescriptor = {
colorAttachments: [
{
view: view,
clearValue: { r: 0, g: 0, b: 0, a: 1.0 },
loadOp: 'clear', // clear/load
storeOp: 'store' // store/discard
}
]
}
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor)
passEncoder.setPipeline(pipeline)
// 3 vertex form a triangle
passEncoder.draw(3)
passEncoder.end()
// webgpu run in a separate process, all the commands will be executed after submit
device.queue.submit([commandEncoder.finish()])
}
async function run(){
const canvas = document.querySelector('canvas')
if (!canvas)
throw new Error('No Canvas')
const {device, context, format} = await initWebGPU(canvas)
const pipeline = await initPipeline(device, format)
// start draw
draw(device, context, pipeline)
// re-configure context on resize
window.addEventListener('resize', ()=>{
canvas.width = canvas.clientWidth * devicePixelRatio
canvas.height = canvas.clientHeight * devicePixelRatio
// don't need to recall context.configure() after v104
draw(device, context, pipeline)
})
}
run()
运行代码（笔者这里使用VS Code和Live Server插件），使用Chrome打开，顺利的话即可看到三角形：
4. 运行流程
5. 参考资料
[1]WebGPU 到底是什么? - 知乎 (zhihu.com)
[2]WebGPU学习系列目录 - Wonder-YYC - 博客园 (cnblogs.com)
[3]WebGPU性能测试分析 - Wonder-YYC - 博客园 (cnblogs.com)
[4]WebGL 与 WebGPU 比对 前奏 - 四季留歌 - 博客园 (cnblogs.com)
[7]Orillusion | 专业WebGPU社区 | WebGPU小白入门(一): 零基础创建第一个WebGPU项目
[8]WebGPU小白入门（二）：绘制简单三角形——1.认识渲染流程_哔哩哔哩_bilibili
WebGPU 01之Hello Triangle的更多相关文章
- OpenGL 学习笔记 01 环境配置
以下教程仅适用于Mac下的Xcode编程环境!其他的我也不会搞. 推荐教程:opengl-tutorial 本项目Github网址 OpenGL太可怕了...必需得把学的记下来,不然绝壁 ...
- 1043 - Triangle Partitioning（数学）
1043 - Triangle Partitioning PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit ...
- C博客01——分支，顺序结构
C博客01--分支,顺序结构 1. 本章学习总结 1.1 思维导图 请以思维导图总结本周的学习内容. 1.2 本章学习体会及代码量体会 1.2.1 学习体会 对于C语言课程的理解,我有点吃力,不是说老 ...
- Category Theory: 01 One Structured Family of Structures
Category Theory: 01 One Structured Family of Structures 这次看来要放弃了.看了大概三分之一.似乎不能够让注意力集中了.先更新吧. 群的定义 \( ...
- Triangle leetcode java
题目: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjace ...
- 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器
1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...
- WebGPU学习（五）: 现代图形API技术要点和WebGPU支持情况调研
大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的 ...
- WebGPU学习（六）：学习“rotatingCube”示例
大家好,本文学习Chrome->webgpu-samplers->rotatingCube示例. 上一篇博文: WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研 ...
- [译]Vulkan教程(01)入门
[译]Vulkan教程(01)入门 接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...
- WebGPU学习（九）：学习“fractalCube”示例
大家好,本文学习Chrome->webgpu-samplers->fractalCube示例. 上一篇博文: WebGPU学习(八):学习"texturedCube"示 ...
随机推荐
- flask博客项目之tinymce图片上传
查看当前的博客发表情况 截图一张立马粘贴进来 点击发表,显示数据太长 不断撤退回到刚刚页面 删除大图,换成小图,上传方式 点击发表可以成功发表 数据库中查看,是把图片生成这种编码后字符串方式存储的了, ...
- vue 原生js-实现下拉框
<template> <div class="por"> <div class="selectBox" style="w ...
- VsCode搭建C语言运行环境以及终端乱码问题解决
在VsCode中搭建C/C++运行环境需要先安装以下插件 1.安装c/c++插件 2.安装code runner插件 当然也可以安装一些其他的美化插件根据个人习惯,但是以上这两个是必装的. 安装好插件 ...
- [OpenCV实战]7 使用YOLOv3和OpenCV进行基于深度学习的目标检测
目录 1 YOLO介绍 1.1 YOLOv3原理 1.2 为什么要将OpenCV用于YOLO? 1.3 在Darknet和OpenCV上对YOLOv3进行速度测试 2 使用YOLOv3进行对象检测(C ...
- C++指针【cherno课程学习】
定义: 指针是一个整数,一种存储内存地址的数字 内存就像一条线性的线,在这条街上的每一个房子都有一个号码和地址 类似比喻成电脑,这条街上每一个房子的地址 是一个字节 我们需要能够准确找到这些地址的方法 ...
- [深度探索C++对象模型]memcpy和memset注意事项
不管使用memcpy()还是memset(),都只有在"classes不含任何由编译器产生的内部members"时才能运行.如果这个类声明一个或者一个以上的virtual func ...
- Java遍历Map集合
Java遍历Map集合简单例子 import java.util.*; public class Main { public static void main(String[] args) { Has ...
- Scanner概述-Scanner使用步骤
Scanner概述 了解了API的使用方式,我们通过Scanner类,熟悉一下查询API,并使用类的步骤. 什么是Scanner类 一个可以解析基本类型和字符串的简单文本扫描器. 例如,以下代码使用户 ...
- 【分析笔记】Linux 内核自旋锁的理解和使用原则
自旋锁简单说明: 自旋锁主要解决在竞态并发下,保护执行时间很短的临界区.它只允许一个执行单位进入临界区,在该执行单位离开前,其它的执行单位将会在进入临界区前不停的循环等待(即所谓的自旋),直至该执行单 ...
- 简述 JavaScript 的执行机制
一.单线程 为了解决这个问题,防止下一个任务等待上一个任务等待太长的时间,所以提出了 Web Worker标准,允许 JS 创建多个线程,于是JS出现了同步 和 异步 ,异步就是可以同时进行多个任务, ...