時間：2023-06-09 21:57:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-06-09 21:57:01 來源：網(wǎng)站運(yùn)營
WebGPU使用模板測試：最近一直在研究WebGPU，前兩天在看官方API的時候突然看到了模板測試的API，發(fā)現(xiàn)與WebGL設(shè)置模板方法還不太一樣，就想找個demo看看具體怎么用，奈何翻遍全網(wǎng)沒找到一個webgpu使用模板測試的案例，那我就在這里寫一個吧，廢話不多說上干貨：
在線咨詢
depthStencil: { //深度紋理，能否寫入 depthWriteEnabled: true, //深度度操作函數(shù) depthCompare: 'less', //深度紋理的格式 format: 'depth24plus', //正面操作函數(shù)， stencilFront:{ compare:"always";//詳見https://gpuweb.github.io/gpuweb/#enumdef-gpucomparefunction failOp:"keep";//詳見GPUStencilOperation depthFailOp:"keep"; passOp:"keep"; }; //背面操作函數(shù) stencilBack:{}; stencilReadMask:0xFFFFFFFF; stencilWriteMask:0xFFFFFFFF; depthBias:0; depthBiasSlopeScale:0; depthBiasClamp:0; },stencilFront與stencilBack和webgl一樣正、反面操作函數(shù)，ReadMask/WriteMask表示取stencil buffer的值時用按位與（&）操作，readMask取值范圍也是0-255的整數(shù)，默認(rèn)值為255，二進(jìn)制位11111111，即讀取的時候不對referenceValue和stencilBufferValue產(chǎn)生效果，讀取的還是原始值。writeMask取值范圍是0-255的整數(shù)，默認(rèn)值也是255，即當(dāng)修改stencilBufferValue值時，寫入的仍然是原始值。 GPURenderPassEncoder.setStencilReference(reference)setStencilReference主要用來設(shè)置referenceValue，取值范圍0~255. const pipelineWriteMask = device.createRenderPipeline({ layout: device.createPipelineLayout({bindGroupLayouts: [uniformsBindGroupLayout]}), vertex: { module: device.createShaderModule({ code: basicVertWGSL, }), entryPoint: 'main', buffers: [ { arrayStride: 4 * 4, attributes: [ { // position shaderLocation: 0, offset: 0, format: "float32x4" } ] } ] }, fragment: { module: device.createShaderModule({ code: basicFragWGSL, }), entryPoint: 'main', targets: [ { format: presentationFormat, writeMask:0x00,//關(guān)閉color寫入 }, ], }, primitive: { topology: 'triangle-list', }, depthStencil: { depthWriteEnabled: true, depthCompare: "always", format: "depth24plus-stencil8", stencilFront:{ compare:"always", failOp:"keep", depthFailOp:"keep", passOp:"replace", }, stencilBack:{ compare:"always", failOp:"keep", depthFailOp:"keep", passOp:"replace", }, }, });2.2、pipelineUseMask設(shè)置： const pipelineUseMask = device.createRenderPipeline({ layout: device.createPipelineLayout({bindGroupLayouts: [uniformsBindGroupLayout1]}), vertex: { module: device.createShaderModule({ code: basicVertWGSL, }), entryPoint: 'main', buffers: [ { arrayStride: 4 * 4, attributes: [ { // position shaderLocation: 0, offset: 0, format: "float32x4" } ] } ] }, fragment: { module: device.createShaderModule({ code: basicFragWGSL, }), entryPoint: 'main', targets: [ { format: presentationFormat, }, ], }, primitive: { topology: 'triangle-list', }, depthStencil: { depthWriteEnabled: false, depthCompare: "always", format: "depth24plus-stencil8", stencilFront:{ compare: "equal", }, stencilBack:{ compare:"equal", }, }, });2.3、兩次refValue設(shè)置： passEncoder.setStencilReference(1)2.3.2: 第二次ref:passEncoder.setStencilReference(0)三、效果圖：async function init() { const gpu = navigator.gpu; const adapter = await gpu.requestAdapter(); const device = await adapter.requestDevice(); const cvs = document.createElement('canvas'); cvs.width = 1024; cvs.height = 768; document.body.appendChild(cvs); const depthTexture = device.createTexture({ size: { width: cvs.width, height: cvs.height, depthOrArrayLayers: 1 }, format: "depth24plus-stencil8", usage: GPUTextureUsage.RENDER_ATTACHMENT }); const ctx = cvs.getContext('webgpu'); const swapChainFormat = "bgra8unorm"; const presentationFormat = ctx.getPreferredFormat(adapter); ctx.configure({ device: device, format: swapChainFormat }); let data=new Float32Array( [ -1.0, -1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 1.0, -1.0, 0.0, 1.0 ]); let vertexBuffer = device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST }); device.queue.writeBuffer(vertexBuffer, 0, data); /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// const uniformsBindGroupLayout = device.createBindGroupLayout({ entries: [ { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform', }, } ] }); const uniformsBindGroupLayout1 = device.createBindGroupLayout({ entries: [ { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform', }, } ] }); const matrixSize = 16 * Float32Array.BYTES_PER_ELEMENT; // 4x4 matrix const uniformBufferSize = matrixSize ; const uniformBuffer = device.createBuffer({ size: uniformBufferSize, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); const uniformBuffer1 = device.createBuffer({ size: uniformBufferSize, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); const uniformBindGroup = device.createBindGroup({ layout: uniformsBindGroupLayout, entries: [ { binding: 0, resource: { buffer: uniformBuffer, offset: 0, size: uniformBufferSize } } ] }); const uniformBindGroup1 = device.createBindGroup({ layout: uniformsBindGroupLayout1, entries: [ { binding: 0, resource: { buffer: uniformBuffer1, offset: 0, size: uniformBufferSize } } ] }); const pipelineWriteMask = device.createRenderPipeline({ layout: device.createPipelineLayout({bindGroupLayouts: [uniformsBindGroupLayout]}), vertex: { module: device.createShaderModule({ code: basicVertWGSL, }), entryPoint: 'main', buffers: [ { arrayStride: 4 * 4, attributes: [ { // position shaderLocation: 0, offset: 0, format: "float32x4" } ] } ] }, fragment: { module: device.createShaderModule({ code: basicFragWGSL, }), entryPoint: 'main', targets: [ { format: presentationFormat, writeMask:0x00,//關(guān)閉color寫入 }, ], }, primitive: { topology: 'triangle-list', }, depthStencil: { depthWriteEnabled: true, depthCompare: "always", format: "depth24plus-stencil8", stencilFront:{ compare:"always", failOp:"keep", depthFailOp:"keep", passOp:"replace", }, stencilBack:{ compare:"always", failOp:"keep", depthFailOp:"keep", passOp:"replace", }, }, }); const pipelineUseMask = device.createRenderPipeline({ layout: device.createPipelineLayout({bindGroupLayouts: [uniformsBindGroupLayout1]}), vertex: { module: device.createShaderModule({ code: basicVertWGSL, }), entryPoint: 'main', buffers: [ { arrayStride: 4 * 4, attributes: [ { // position shaderLocation: 0, offset: 0, format: "float32x4" } ] } ] }, fragment: { module: device.createShaderModule({ code: basicFragWGSL, }), entryPoint: 'main', targets: [ { format: presentationFormat, }, ], }, primitive: { topology: 'triangle-list', }, depthStencil: { depthWriteEnabled: false, depthCompare: "always", format: "depth24plus-stencil8", stencilFront:{ compare: "equal", }, stencilBack:{ compare:"equal", }, }, }); let modelMatrix = mat4.create(); let modelMatrix1 = mat4.create(); let render = async function () { const commandEncoder = device.createCommandEncoder(); const passEncoder = commandEncoder.beginRenderPass({ colorAttachments: [{ view: ctx.getCurrentTexture().createView(), loadValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0}, }], depthStencilAttachment: { view: depthTexture.createView(), depthLoadValue: 0.0, depthStoreOp: "store", stencilLoadValue: 0.0, stencilStoreOp: "store", } }); /*******************第一次渲染**********************/ passEncoder.setVertexBuffer(0, vertexBuffer); passEncoder.setPipeline(pipelineWriteMask); mat4.identity(modelMatrix); mat4.scale(modelMatrix, modelMatrix, [-0.2,-0.2, 1]); passEncoder.setBindGroup(0, uniformBindGroup); //將三角區(qū)域模板值寫入1 passEncoder.setStencilReference(1) device.queue.writeBuffer(uniformBuffer, 0, modelMatrix); passEncoder.draw(3, 1, 0, 0); /****************第二次渲染********************/ mat4.identity(modelMatrix1); mat4.scale(modelMatrix1, modelMatrix1, [0.6,0.6, 1]); passEncoder.setVertexBuffer(0, vertexBuffer); passEncoder.setPipeline(pipelineUseMask); passEncoder.setBindGroup(0,uniformBindGroup1); //渲染模板值等于0的區(qū)域 passEncoder.setStencilReference(0) device.queue.writeBuffer(uniformBuffer1, 0, modelMatrix1); passEncoder.draw(3, 1, 0, 0); passEncoder.endPass(); const test = commandEncoder.finish(); device.queue.submit([test]); }; render();}init()const basicVertWGSL = ` [[block]] struct Uniforms { modelMatrix : mat4x4<f32>; }; [[binding(0), group(0)]] var<uniform> uniforms : Uniforms; struct VertexOutput { [[builtin(position)]] Position : vec4<f32>; }; [[stage(vertex)]] fn main([[location(0)]] position : vec4<f32>) -> VertexOutput { var output : VertexOutput; output.Position = uniforms.modelMatrix * position; return output; } `;const basicFragWGSL = ` [[stage(fragment)]] fn main() -> [[location(0)]] vec4<f32> { return vec4<f32>(1.0, 0.0, 0.0, 1.0); }`;參考：關(guān)鍵詞：測試,模板,使用
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
