WebGPU 培訓
WebGPU是什麼？ 它是一個在瀏覽器中實現低級圖形渲染的API，可以讓Web開發人員利用GPU提高渲染性能。WebGPU支持多種GPU，並允許Web應用程序通過JavaScript，WebAssembly或HLSL代碼與GPU通信。
WebGPU可與WebGL和WebXR等其他Web圖形API配合使用，但它是更先進和更靈活的API，提供了更多的控制權和更好的性能，從而更適合處理複雜和大型3D場景。
要使用WebGPU，需要使用最新的Web瀏覽器（如Chrome）和支持WebGPU的GPU。
const adapter = await navigator.gpu.requestAdapter(); const device = await adapter.requestDevice();
使用WebGPU，我們需要獲取GPU的適配器（adapter）和設備（device），並將其存儲在變數中，以便我們可以在GPU上執行操作。
實用WebGPU
1. 使用WebGPU渲染三角形
在使用WebGPU渲染三角形之前，需要進行一些準備工作。我們需要編寫代碼來創建窗口、初始化WebGPU並定義渲染器所需的常量和資源。在這裡，我們使用了GLSL作為著色語言。
let vertexShader =
`
#version 450
layout(location = 0) in vec3 pos;
void main() {
gl_Position = vec4(pos, 1.0);
}
`;
let fragmentShader =
`
#version 450
layout(location = 0) out vec4 outColor;
void main() {
outColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;
async function main() {
// Step 1: Create a window to render into.
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Step 2: Initialize WebGPU and create the "context".
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('gpupresent');
// Step 3: Define the shader modules (i.e. the shader code).
const shaderModule =
device.createShaderModule({
code: vertexShader
});
const fragModule = device.createShaderModule({
code: fragmentShader
});
// Step 4: Define the pipeline layout. This specifies the vertex input
// format, and any other inputs we will be using in our shaders.
const layout = device.createPipelineLayout({
bindGroupLayouts: []
});
// Step 5: Define the render pipeline. This specifies the shaders to use,
// as well as the pipeline layout from step 4.
const pipeline = device.createRenderPipeline({
layout,
vertex: {
module: shaderModule,
entryPoint: 'main',
buffers: [{
arrayStride: 12,
attributes: [{
shaderLocation: 0,
offset: 0,
format: 'float3'
}]
}]
},
fragment: {
module: fragModule,
entryPoint: 'main',
targets: [{
format: 'rgba8unorm'
}]
},
primitive: {
topology: 'triangle-list',
stripIndexFormat: undefined,
frontFace: 'ccw',
cullMode: 'none',
clampDepth: false
},
depthStencil: {
format: undefined,
depthWriteEnabled: false,
depthCompare: 'always',
stencilFront: {
compare: 'always',
failOp: 'keep',
passOp: 'keep',
depthFailOp: 'keep'
},
stencilBack: {
compare: 'always',
failOp: 'keep',
passOp: 'keep',
depthFailOp: 'keep'
},
stencilReadMask: 0xff,
stencilWriteMask: 0xff
}
});
// Step 6: Define the uniform buffer.
const uniformBuffer = device.createBuffer({
size: 16,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
const uniformBindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [{
binding: 0,
resource: {
buffer: uniformBuffer
}
}]
});
// Step 7: Define the render loop.
function update() {
const renderPassDescriptor = {
colorAttachments: [{
attachment: context.getCurrentTexture().createView(),
loadValue: [0, 0, 0, 1],
storeOp: 'store'
}]
};
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.setBindGroup(0, uniformBindGroup);
passEncoder.draw(3, 1, 0, 0);
passEncoder.endPass();
device.queue.submit([commandEncoder.finish()]);
requestAnimationFrame(update);
}
requestAnimationFrame(update);
}
main();
WebGPU React
使用WebGPU與React結合使用可以快速創建高性能的3D應用程序。下面的示例代碼演示了如何在React中使用Jaspr和WebGPU來渲染一個簡單的3D場景。
1. 在React中使用WebGPU渲染3D場景
import * as THREE from 'three';
import {
useResource,
useFrame,
Canvas,
} from 'react-three-fiber';
import Jaspr from 'jaspr';
function TriangleMesh(props) {
const geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(1, 0, 0),
);
geometry.faces.push(new THREE.Face3(0, 1, 2));
const [meshRef] = useResource();
useFrame(({ clock }) => {
meshRef.rotation.x = clock.getElapsedTime() * 0.5;
meshRef.rotation.y = clock.getElapsedTime() * 0.8;
});
return (
v.toArray())}
itemSize={3}
/>
);
}
function Scene() {
return (
);
}
function App() {
return (
{
gl.getContext().makeCurrent();
}}
>
);
}
export default App;
2. WebGPU 渲染動畫
下面是一個簡單的示例代碼，演示如何在WebGPU上渲染動畫。
async function main() {
// Step 1: Create a window to render into.
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Step 2: Initialize WebGPU and create the "context".
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('gpupresent');
// Step 3: Define the shader modules (i.e. the shader code).
const shaderModule =
device.createShaderModule({
code: vertexShader
});
const fragModule = device.createShaderModule({
code: fragmentShader
});
// Step 4: Define the pipeline layout.
const layout = device.createPipelineLayout({
bindGroupLayouts: []
});
// Step 5: Define the render pipeline.
const pipeline = device.createRenderPipeline({
layout,
vertex: {
module: shaderModule,
entryPoint: 'main',
buffers: [{
arrayStride: 12,
attributes: [{
shaderLocation: 0,
offset: 0,
format: 'float3'
}]
}]
},
fragment: {
module: fragModule,
entryPoint: 'main',
targets: [{
format: 'rgba8unorm'
}]
},
primitive: {
topology: 'triangle-list',
stripIndexFormat: undefined,
frontFace: 'ccw',
cullMode: 'none',
clampDepth: false
},
depthStencil: {
format: undefined,
depthWriteEnabled: false,
depthCompare: 'always',
stencilFront: {
compare: 'always',
failOp: 'keep',
passOp: 'keep',
depthFailOp: 'keep'
},
stencilBack: {
compare: 'always',
failOp: 'keep',
passOp: 'keep',
depthFailOp: 'keep'
},
stencilReadMask: 0xff,
stencilWriteMask: 0xff
}
});
// Step 6: Define the uniform buffer.
const uniformBuffer = device.createBuffer({
size: 16,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
const uniformBindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [{
binding: 0,
resource: {
buffer: uniformBuffer
}
}]
});
// Step 7: Define the render loop.
let time = 0;
function update() {
const t = performance.now() / 1000.0;
const delta = t - time;
time = t;
const renderPassDescriptor = {
colorAttachments: [{
attachment: context.getCurrentTexture().createView(),
loadValue: [0, 0, 0, 1],
storeOp: 'store'
}]
};
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.setBindGroup(0, uniformBindGroup);
passEncoder.draw(3, 1, 0, 0);
passEncoder.endPass();
device.queue.submit([commandEncoder.finish()]);
requestAnimationFrame(update);
}
update();
}
main();
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/245345.html
微信掃一掃 
支付寶掃一掃 