<!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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
// 配置WebGPU上下文
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: format,
});
//创建顶点数据
// 一个矩形拆分为两个三角形表示，三角形其中两个顶点坐标是重合的
// 注意一个面的多个三角形，正反面要保持一致，要么都是正面，要么都是反面，或者说沿着某个方向看过去，要么都是顺时装，要么都是逆时针
const vertexArray = new Float32Array([
// 三角形1三个顶点坐标的x、y、z值
-0.3, -0.5, 0.0,//顶点1坐标
0.3, -0.5, 0.0,//顶点2坐标
0.3, 0.5, 0.0,//顶点3坐标
// 三角形2三个顶点坐标的x、y、z值
-0.3, -0.5, 0.0,//顶点4坐标 与顶点1重合
0.3, 0.5, 0.0,//顶点5坐标 与顶点3重合
-0.3, 0.5, 0.0,//顶点6坐标
]);
const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
size: vertexArray.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区
// 渲染管线
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",
buffers: [//顶点缓冲区相关设置
{
arrayStride: 3 * 4,
attributes: [{
shaderLocation: 0,//顶点缓冲区存储位置标记
format: "float32x3",
offset: 0
}]
}
]
},
fragment: {//片元相关配置
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",
targets: [{
format: format
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
}
});
// 命令编码器
const commandEncoder = device.createCommandEncoder();
// 渲染通道
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
storeOp: 'store',
clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
loadOp: 'clear',
}]
});
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(6);// 绘制顶点数据
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);
</script>
</body>
</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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
// 配置WebGPU上下文
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: format,
});
//创建顶点数据
const vertexArray = new Float32Array([
// 三角形1三个顶点坐标的x、y、z值
0.0, 0.0, 0.0,//顶点1坐标
1.0, 0.0, 0.0,//顶点2坐标
0.0, 1.0, 0.0,//顶点3坐标
// 三角形2三个顶点坐标的x、y、z值
-0.5, -0.5, 0.0,//顶点4坐标
-1.0, -0.5, 0.0,//顶点5坐标
-0.5, -1.0, 0.0,//顶点6坐标
]);
const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
size: vertexArray.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区
// 渲染管线
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",
buffers: [//顶点缓冲区相关设置
{
arrayStride: 3 * 4,
attributes: [{
shaderLocation: 0,//顶点缓冲区存储位置标记
format: "float32x3",
offset: 0
}]
}
]
},
fragment: {//片元相关配置
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",
targets: [{
format: format
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
}
});
// 命令编码器
const commandEncoder = device.createCommandEncoder();
// 渲染通道
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
storeOp: 'store',
clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
loadOp: 'clear',
}]
});
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(6);// 绘制顶点数据
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);
</script>
</body>
</html>
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`
export { vertex, fragment }
<!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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
// 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
context.configure({
device: device,//WebGPU渲染器使用的GPU设备对象
format: format,//颜色格式
});
</script>
</body>
</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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500" style="background-color: black;"></canvas>
<script type="module">
</script>
</body>
</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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
console.log('适配器adapter', adapter);
console.log('GPU设备对象device', device);
</script>
</body>
</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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
// 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
context.configure({
device: device,//WebGPU渲染器使用的GPU设备对象
format: format,//颜色格式
});
// 创建顶点数据的缓冲区
const vertexArray = new Float32Array([
// 三角形三个顶点坐标的x、y、z值
0.0, 0.0, 0.0,//顶点1坐标
1.0, 0.0, 0.0,//顶点2坐标
0.0, 1.0, 0.0,//顶点3坐标
]);
//类型化数组Float32Array一个数字元素，占用存储空间4字节，9个浮点数，数据字节长度9*4
// console.log('类型化数组数据字节长度',vertexArray.byteLength);
const vertexBuffer = device.createBuffer({
size: vertexArray.byteLength,//顶点数据的字节长度
//usage设置该缓冲区的用途
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
//把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
//获取顶点数据的偏移量(单位字节)，0表示从vertexArray的数据开始开头读取数据
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);
// 创建一个WebGPU渲染管线对象pipeline
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
// module:设置渲染管线要执行的顶点着色器代码
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",//顶点着色器代码入口函数的名字
buffers: [// 顶点所有的缓冲区模块设置
{//其中一个顶点缓冲区设置
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度
// 顶点缓冲区属性
attributes: [{
shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
format: "float32x3",//格式：loat32x3表示一个顶点数据包含3个32位浮点数
offset: 0//arrayStride表示每组顶点数据间隔字节数，offset表示读取改组的偏差字节数，没特殊需要一般设置0
}]
}
]
},
fragment: {//片元相关配置
// module:设置渲染管线要执行的片元着色器代码
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",//指定片元着色器入口函数
targets: [{
format: format//和WebGPU上下文配置的颜色格式保持一致
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
}
});
</script>
</body>
</html>
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`
export { vertex, fragment }
<!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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
// 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
context.configure({
device: device,//WebGPU渲染器使用的GPU设备对象
format: format,//颜色格式
});
// 创建顶点数据的缓冲区
const vertexArray = new Float32Array([
// 三角形三个顶点坐标的x、y、z值
0.0, 0.0, 0.0,//顶点1坐标
1.0, 0.0, 0.0,//顶点2坐标
0.0, 1.0, 0.0,//顶点3坐标
]);
//类型化数组Float32Array一个数字元素，占用存储空间4字节，9个浮点数，数据字节长度9*4
// console.log('类型化数组数据字节长度',vertexArray.byteLength);
const vertexBuffer = device.createBuffer({
size: vertexArray.byteLength,//顶点数据的字节长度
//usage设置该缓冲区的用途
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
//把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
//获取顶点数据的偏移量(单位字节)，0表示从vertexArray的数据开始开头读取数据
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);
// 创建一个WebGPU渲染管线对象pipeline
const pipeline = device.createRenderPipeline({
vertex: {//顶点相关配置
buffers: [// 顶点所有的缓冲区模块设置
{//其中一个顶点缓冲区设置
arrayStride: 3*4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度
// 顶点缓冲区属性
attributes: [{
shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
format: "float32x3",//格式：loat32x3表示一个顶点数据包含3个32位浮点数
offset: 0//arrayStride表示每组顶点数据间隔字节数，offset表示读取该组的偏差字节数，没特殊需要一般设置0
}]
}
]
},
});
</script>
</body>
</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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
// 配置WebGPU上下文
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: format,
});
//创建顶点数据
const vertexArray = new Float32Array([
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0,
]);
const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
size: vertexArray.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区
// 渲染管线
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",
buffers: [//顶点缓冲区相关设置
{
arrayStride: 3 * 4,
attributes: [{
shaderLocation: 0,//顶点缓冲区存储位置标记
format: "float32x3",
offset: 0
}]
}
]
},
fragment: {//片元相关配置
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",
targets: [{
format: format
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
cullMode: 'back',//背面不显示
}
});
// 命令编码器
const commandEncoder = device.createCommandEncoder();
// 渲染通道
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
storeOp: 'store',
loadOp: 'clear',
clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
}]
});
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3);// 绘制顶点数据
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);
</script>
</body>
</html>
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`
export { vertex, fragment }
<!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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
// 配置WebGPU上下文
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: format,
});
//创建顶点数据
const vertexArray = new Float32Array([
// // 1. 三角形三个顶点z都是2.0，不在0~1返回，canvas画布看不到三角形
// 1.0, 0.0, 2.0,
// 0.0, 1.0, 2.0,
// 0.0, 0.0, 2.0,
// // 2. 三个顶点坐标都没有超出范围，可以看到完整三角形
// 1.0, 0.0, 0.0,
// 0.0, 1.0, 0.0,
// 0.0, 0.0, 0.0,
// 顶点1的x坐标超出范围，三角形超出WebGPU渲染范围部分不显示，三角形渲染不完整
2.0, 0.0, 0.2,
0.0, 1.0, 0.2,
0.0, 0.0, 0.2,
]);
const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
size: vertexArray.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区
// 渲染管线
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",
buffers: [//顶点缓冲区相关设置
{
arrayStride: 3 * 4,
attributes: [{
shaderLocation: 0,//顶点缓冲区存储位置标记
format: "float32x3",
offset: 0
}]
}
]
},
fragment: {//片元相关配置
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",
targets: [{
format: format
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
cullMode: 'back',//背面不显示
}
});
// 命令编码器
const commandEncoder = device.createCommandEncoder();
// 渲染通道
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
storeOp: 'store',
clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
loadOp: 'clear',
}]
});
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3);// 绘制顶点数据
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);
</script>
</body>
</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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
// 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
context.configure({
device: device,//WebGPU渲染器使用的GPU设备对象
format: format,//颜色格式
});
// 创建顶点数据的缓冲区
const vertexArray = new Float32Array([
// 三角形三个顶点坐标的x、y、z值
0.0, 0.0, 0.0,//顶点1坐标
1.0, 0.0, 0.0,//顶点2坐标
0.0, 1.0, 0.0,//顶点3坐标
]);
//类型化数组Float32Array一个数字元素，占用存储空间4字节，9个浮点数，数据字节长度9*4
// console.log('类型化数组数据字节长度',vertexArray.byteLength);
const vertexBuffer = device.createBuffer({
size: vertexArray.byteLength,//顶点数据的字节长度
//usage设置该缓冲区的用途
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
//把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
//获取顶点数据的偏移量(单位字节)，0表示从vertexArray的数据开始开头读取数据
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);
// 创建一个WebGPU渲染管线对象pipeline
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
// module:设置渲染管线要执行的顶点着色器代码
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",//顶点着色器代码入口函数的名字
buffers: [// 顶点所有的缓冲区模块设置
{//其中一个顶点缓冲区设置
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度
// 顶点缓冲区属性
attributes: [{
shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
format: "float32x3",//格式：loat32x3表示一个顶点数据包含3个32位浮点数
offset: 0//arrayStride表示每组顶点数据间隔字节数，offset表示读取改组的偏差字节数，没特殊需要一般设置0
}]
}
]
},
fragment: {
// module:设置渲染管线要执行的片元着色器代码
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",//指定片元着色器入口函数
targets: [{
format: format//和WebGPU上下文配置的颜色格式保持一致
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
}
});
// 创建GPU命令编码器对象
const commandEncoder = device.createCommandEncoder();
// 创建一个渲染通道对象
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
// 指向Canvas画布的纹理视图对象(Canvas对应的颜色缓冲区)
// 该渲染通道renderPass输出的像素数据会存储到Canvas画布对应的颜色缓冲区(纹理视图对象)
view: context.getCurrentTexture().createView(),
storeOp: 'store',//像素数据写入颜色缓冲区 canvas画布能看到渲染效果
// storeOp: 'discard',//舍弃像素数据，不写入目标缓冲区 canvas画布能看不到渲染效果
clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
// loadOp: 'load',//clearValue的颜色不起作用
loadOp: 'clear',//clearValue的颜色起作用
}]
});
// 设置该渲染通道对应的渲染管线
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
// 绘制顶点数据
renderPass.draw(3);
// 结束命令.end()
renderPass.end();
// 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
const commandBuffer = commandEncoder.finish();
// 命令编码器缓冲区中命令传入GPU设备对象的命令队列.queue
device.queue.submit([commandBuffer]);
</script>
</body>
</html>
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`
export { vertex, fragment }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
// 配置WebGPU上下文
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: format,
});
//创建顶点数据
const vertexArray = new Float32Array([
0.0, 0.0, 0.0,
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
]);
const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
size: vertexArray.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区
// 渲染管线
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",
buffers: [//顶点缓冲区相关设置
{
arrayStride: 3 * 4,
attributes: [{
shaderLocation: 0,//顶点缓冲区存储位置标记
format: "float32x3",
offset: 0
}]
}
]
},
fragment: {//片元相关配置
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",
targets: [{
format: format
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
}
});
// 命令编码器
const commandEncoder = device.createCommandEncoder();
// 渲染通道
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
storeOp: 'store',
loadOp: 'clear',
clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
}]
});
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3);// 绘制顶点数据
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);
</script>
</body>
</html>
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`
export { vertex, fragment }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
// 配置WebGPU上下文
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device: device,
format: format,
});
//创建顶点数据
const vertexArray = new Float32Array([
0.0, 0.0, 0.0,
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
]);
const vertexBuffer = device.createBuffer({// 创建顶点数据的缓冲区
size: vertexArray.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);// 顶点数据写入缓冲区
// 渲染管线
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",
buffers: [//顶点缓冲区相关设置
{
arrayStride: 3 * 4,
attributes: [{
shaderLocation: 0,//顶点缓冲区存储位置标记
format: "float32x3",
offset: 0
}]
}
]
},
fragment: {//片元相关配置
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",
targets: [{
format: format
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
}
});
// 命令编码器
const commandEncoder = device.createCommandEncoder();
// 渲染通道
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
storeOp: 'store',
loadOp: 'clear',
}]
});
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.draw(3);// 绘制顶点数据
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);
</script>
</body>
</html>
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`
export { vertex, fragment }
<!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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 顶点着色器、片元着色器代码
import { vertex, fragment } from './shader.js'
const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
// 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
context.configure({
device: device,//WebGPU渲染器使用的GPU设备对象
format: format,//颜色格式
});
// 创建顶点数据的缓冲区
const vertexArray = new Float32Array([
// 三角形1三个顶点顺时针
-0.3, -0.5, 0.0,//顶点1坐标
0.3, -0.5, 0.0,//顶点2坐标
0.3, 0.5, 0.0,//顶点3坐标
// 三角形2三个顶点顺时针
-0.3, -0.5, 0.0,//顶点4坐标 与顶点1重合
0.3, 0.5, 0.0,//顶点5坐标 与顶点3重合
-0.3, 0.5, 0.0,//顶点6坐标
]);
//类型化数组Float32Array一个数字元素，占用存储空间4字节，9个浮点数，数据字节长度9*4
// console.log('类型化数组数据字节长度',vertexArray.byteLength);
const vertexBuffer = device.createBuffer({
size: vertexArray.byteLength,//顶点数据的字节长度
//usage设置该缓冲区的用途
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
//把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
//获取顶点数据的偏移量(单位字节)，0表示从vertexArray的数据开始开头读取数据
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);
// 创建一个WebGPU渲染管线对象pipeline
const pipeline = device.createRenderPipeline({
layout: 'auto',
vertex: {//顶点相关配置
// module:设置渲染管线要执行的顶点着色器代码
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",//顶点着色器代码入口函数的名字
buffers: [// 顶点所有的缓冲区模块设置
{//其中一个顶点缓冲区设置
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度
// 顶点缓冲区属性
attributes: [{
shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
format: "float32x3",//格式：loat32x3表示一个顶点数据包含3个32位浮点数
offset: 0//arrayStride表示每组顶点数据间隔字节数，offset表示读取改组的偏差字节数，没特殊需要一般设置0
}]
}
]
},
fragment: {
// module:设置渲染管线要执行的片元着色器代码
module: device.createShaderModule({ code: fragment }),
entryPoint: "main",//指定片元着色器入口函数
targets: [{
format: format//和WebGPU上下文配置的颜色格式保持一致
}]
},
primitive: {
topology: "triangle-list",//绘制三角形
}
});
// 创建GPU命令编码器对象
const commandEncoder = device.createCommandEncoder();
// 创建一个渲染通道对象
const renderPass = commandEncoder.beginRenderPass({
colorAttachments: [{
// 指向Canvas画布的纹理视图对象(Canvas对应的颜色缓冲区)
// 该渲染通道renderPass输出的像素数据会存储到Canvas画布对应的颜色缓冲区(纹理视图对象)
view: context.getCurrentTexture().createView(),
storeOp: 'store',//像素数据写入颜色缓冲区 canvas画布能看到渲染效果
// storeOp: 'discard',//舍弃像素数据，不写入目标缓冲区 canvas画布能看不到渲染效果
clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色
// loadOp: 'load',//clearValue的颜色不起作用
loadOp: 'clear',//clearValue的颜色起作用
}]
});
// 设置该渲染通道对应的渲染管线
renderPass.setPipeline(pipeline);
// 顶点缓冲区数据和渲染管线shaderLocation: 0表示存储位置关联起来
renderPass.setVertexBuffer(0, vertexBuffer);
// 绘制顶点数据
renderPass.draw(6);
// 结束命令.end()
renderPass.end();
// 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
const commandBuffer = commandEncoder.finish();
// 命令编码器缓冲区中命令传入GPU设备对象的命令队列.queue
device.queue.submit([commandBuffer]);
</script>
</body>
</html>
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
// 片元着色器代码
const fragment = /* wgsl */ `
@fragment
fn main() -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`
export { vertex, fragment }
<!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>Threejs中文网:http://www.webgl3d.cn/</title>
</head>
<body>
<!-- canvas：用来展示WebGPU渲染的结果 -->
<canvas id="webgpu" width="500" height="500"></canvas>
<script type="module">
// 引入顶点着色器vertex代码对应字符串
import { vertex } from './shader.js'
const adapter = await navigator.gpu.requestAdapter();// 浏览器请求GPU适配器
// 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
const device = await adapter.requestDevice();
// 配置WebGPU上下文(Canvas元素作为WebGPU的画布)
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器默认的颜色格式
context.configure({
device: device,//WebGPU渲染器使用的GPU设备对象
format: format,//颜色格式
});
// 创建顶点数据的缓冲区
const vertexArray = new Float32Array([
// 三角形三个顶点坐标的x、y、z值
0.0, 0.0, 0.0,//顶点1坐标
1.0, 0.0, 0.0,//顶点2坐标
0.0, 1.0, 0.0,//顶点3坐标
]);
//类型化数组Float32Array一个数字元素，占用存储空间4字节，9个浮点数，数据字节长度9*4
// console.log('类型化数组数据字节长度',vertexArray.byteLength);
const vertexBuffer = device.createBuffer({
size: vertexArray.byteLength,//顶点数据的字节长度
//usage设置该缓冲区的用途
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
//把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
//获取顶点数据的偏移量(单位字节)，0表示从vertexArray的数据开始开头读取数据
device.queue.writeBuffer(vertexBuffer, 0, vertexArray);
// 创建一个WebGPU渲染管线对象pipeline
const pipeline = device.createRenderPipeline({
vertex: {//顶点相关配置
// module:设置渲染管线要执行的顶点着色器代码
module: device.createShaderModule({ code: vertex }),
entryPoint: "main",//顶点着色器代码入口函数的名字
buffers: [// 顶点所有的缓冲区模块设置
{//其中一个顶点缓冲区设置
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度
// 顶点缓冲区属性
attributes: [{
shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
format: "float32x3",//格式：loat32x3表示一个顶点数据包含3个32位浮点数
offset: 0//arrayStride表示每组顶点数据间隔字节数，offset表示读取改组的偏差字节数，没特殊需要一般设置0
}]
}
]
},
});
</script>
</body>
</html>
// // 顶点着色器代码 顶点坐标改变
// const vertex = /* wgsl */ `
// @vertex
// fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
// var pos2 = vec4<f32>(pos,1.0);//pos转齐次坐标
// pos2.x -= 0.2;//偏移所有顶点的x坐标
// return pos2;
// }
// `
// 顶点着色器代码
const vertex = /* wgsl */ `
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> {
return vec4<f32>(pos,1.0);
}
`
export {
vertex
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>http://www.webgl3d.cn/</title>
</head>
<body>
<script type="module">
if(navigator.gpu){
console.log('你的浏览器支持WebGPU。');
}else{
console.log('你的浏览器不支持WebGPU，请更换新版本浏览器。');
}
</script>
</body>
</html>
参考
- threejs中文网,郭老师博客