大家好，本文学习Chrome->webgpu-samplers->fractalCube示例。
上一篇博文：
WebGPU学习（八）：学习“texturedCube”示例
学习fractalCube.ts
最终渲染结果：
该示例展示了如何用上一帧渲染的结果作为下一帧的纹理。
与“texturedCube”示例相比，该示例的纹理并不是来自图片，而是来自上一帧渲染的结果
下面，我们打开fractalCube.ts文件，分析相关代码：
传输顶点的color
它与“texturedCube”示例->“传递顶点的uv数据”类似，这里不再分析
上一帧渲染的结果作为下一帧的纹理
- 配置swapChain
因为swapChain保存了上一帧渲染的结果，所以将其作为下一帧纹理的source，它的usage需要增加GPUTextureUsage.COPY_SRC：
const swapChain = context.configureSwapChain({ device, format: "bgra8unorm", usage: GPUTextureUsage.OUTPUT_ATTACHMENT | GPUTextureUsage.COPY_SRC, });
- 创建空纹理和sampler，设置到uniform bind group中
代码如下：
const cubeTexture = device.createTexture({ size: { width: canvas.width, height: canvas.height, depth: 1 }, format: "bgra8unorm", usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.SAMPLED, }); const sampler = device.createSampler({ magFilter: "linear", minFilter: "linear", }); const uniformBindGroup = device.createBindGroup({ layout: bindGroupLayout, bindings: [ ... { binding: 1, resource: sampler, }, { binding: 2, resource: cubeTexture.createView(), }], });
- 绘制和拷贝
在每一帧中：
绘制带纹理的立方体；
将渲染结果拷贝到纹理中。
相关代码如下：
return function frame() { const swapChainTexture = swapChain.getCurrentTexture(); renderPassDescriptor.colorAttachments[0].attachment = swapChainTexture.createView(); const commandEncoder = device.createCommandEncoder({}); const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); ... passEncoder.setBindGroup(0, uniformBindGroup); ... passEncoder.draw(36, 1, 0, 0); passEncoder.endPass(); commandEncoder.copyTextureToTexture({ texture: swapChainTexture, }, { texture: cubeTexture, }, { width: canvas.width, height: canvas.height, depth: 1, }); device.defaultQueue.submit([commandEncoder.finish()]); ... }
分析shader代码
vertex shader与“texturedCube”示例相比，增加了color attribute：
const vertexShaderGLSL = `#version 450 ... layout(location = 1) in vec4 color; ... layout(location = 0) out vec4 fragColor; ... void main() { ... fragColor = color; ... }`;
fragment shader的代码如下：
const fragmentShaderGLSL = `#version 450 layout(set = 0, binding = 1) uniform sampler mySampler; layout(set = 0, binding = 2) uniform texture2D myTexture; layout(location = 0) in vec4 fragColor; layout(location = 1) in vec2 fragUV; layout(location = 0) out vec4 outColor; void main() { vec4 texColor = texture(sampler2D(myTexture, mySampler), fragUV * 0.8 + 0.1); // 1.0 if we're sampling the background float f = float(length(texColor.rgb - vec3(0.5, 0.5, 0.5)) < 0.01); outColor = mix(texColor, fragColor, f); }`;
第10行对fragUV进行了处理，我们会在分析渲染时间线中分析它。
第13行和第15行相当于做了if判断：
if(纹理颜色 === 背景色){ outColor = fragColor } else{ outColor = 纹理颜色 }
这里之所以不用if判断而使用计算的方式，是为了减少条件判断，提高gpu的并行性
分析渲染时间线
下面分析下渲染的时间线：
第一帧
因为纹理为空纹理，它的颜色为背景色，所以fragment shader的outColor始终为fragColor，因此立方体的所有片段的颜色均为fragColor。
第一帧的渲染结果如下：
第一帧绘制结束后，渲染结果会被拷贝到纹理中。
第二帧
分析执行的fragment shader代码：
const fragmentShaderGLSL = `#version 450 layout(set = 0, binding = 1) uniform sampler mySampler; layout(set = 0, binding = 2) uniform texture2D myTexture; layout(location = 0) in vec4 fragColor; layout(location = 1) in vec2 fragUV; layout(location = 0) out vec4 outColor; void main() { vec4 texColor = texture(sampler2D(myTexture, mySampler), fragUV * 0.8 + 0.1); // 1.0 if we're sampling the background float f = float(length(texColor.rgb - vec3(0.5, 0.5, 0.5)) < 0.01); outColor = mix(texColor, fragColor, f); }`;
- 第10行的“fragUV * 0.8 + 0.1”是为了取纹理坐标u、v方向的[0.1-0.9]部分，从而使纹理中立方体所占比例更大。
得到的纹理区域如下图的红色区域所示：
- 第13行和第15行代码，将纹理中的背景色替换为了fragColor，使纹理中立方体区域的颜色保持不变
第二帧的渲染结果如下：
- 第三帧
依次类推，第三帧的渲染结果如下：
