diff --git a/sample/alphaToCoverage/main.ts b/sample/alphaToCoverage/main.ts index 2a65a3d5..0ff37ccd 100644 --- a/sample/alphaToCoverage/main.ts +++ b/sample/alphaToCoverage/main.ts @@ -14,8 +14,7 @@ quitIfWebGPUNotAvailable(adapter, device); // const kInitConfig = { - width: 8, - height: 8, + sizeLog2: 3, showResolvedColor: true, color1: 0x0000ff, alpha1: 127, @@ -37,8 +36,7 @@ gui.width = 300; const settings = gui.addFolder('Settings'); settings.open(); - settings.add(config, 'width', 1, 16, 1); - settings.add(config, 'height', 1, 16, 1); + settings.add(config, 'sizeLog2', 0, 8, 1).name('size = 2**'); settings.add(config, 'showResolvedColor', true); const draw1Panel = gui.addFolder('Draw 1'); @@ -83,25 +81,36 @@ const bufInstanceColors = device.createBuffer({ size: 8, }); -let multisampleTexture, multisampleTextureView; +let multisampleTexture: GPUTexture, multisampleTextureView: GPUTextureView; +let resolveTexture: GPUTexture, resolveTextureView: GPUTextureView; +let lastSize = 0; function resetMultisampleTexture() { - if ( - !multisampleTexture || - multisampleTexture.width !== config.width || - multisampleTexture.height !== config.height - ) { + const size = 2 ** config.sizeLog2; + if (lastSize !== size) { if (multisampleTexture) { multisampleTexture.destroy(); } - console.log('recreate'); multisampleTexture = device.createTexture({ format: 'rgba8unorm', usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING, - size: [config.width, config.height], + size: [size, size], sampleCount: 4, }); multisampleTextureView = multisampleTexture.createView(); + + if (resolveTexture) { + resolveTexture.destroy(); + } + resolveTexture = device.createTexture({ + format: 'rgba8unorm', + usage: + GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING, + size: [size, size], + }); + resolveTextureView = resolveTexture.createView(); + + lastSize = size; } } @@ -175,13 +184,6 @@ const showMultisampleTextureBGL = function render() { applyConfig(); - const resolveTexture = device.createTexture({ - format: 'rgba8unorm', - usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING, - size: [config.width, config.height], - }); - const resolveTextureView = resolveTexture.createView(); - const showMultisampleTextureBG = device.createBindGroup({ layout: showMultisampleTextureBGL, entries: [ diff --git a/sample/alphaToCoverage/showMultisampleTexture.wgsl b/sample/alphaToCoverage/showMultisampleTexture.wgsl index eae754d4..3de18a8f 100644 --- a/sample/alphaToCoverage/showMultisampleTexture.wgsl +++ b/sample/alphaToCoverage/showMultisampleTexture.wgsl @@ -49,28 +49,26 @@ fn fmain(vary: Varying) -> @location(0) vec4f { let xyInt = vec2u(xy); let xyFrac = xy % vec2f(1, 1); - if xyInt.x >= dim.x || xyInt.y >= dim.y { - return vec4f(0, 0, 0, 1); - } + // Show the visualization only if the resolution is large enough to see it + if (dpdx(xy.x) < kGridEdgeHalfWidth) & (dpdy(xy.y) < kGridEdgeHalfWidth) { + // Check if we're close to a sample; if so, visualize the sample value + for (var sampleIndex = 0; sampleIndex < kSampleCount; sampleIndex += 1) { + let distanceFromSample = distance(xyFrac, kSamplePositions[sampleIndex]); + if distanceFromSample < kSampleInnerRadius { + // Draw a circle for the sample value + let val = textureLoad(tex, xyInt, sampleIndex).rgb; + return vec4f(val, 1); + } else if distanceFromSample < kSampleOuterRadius { + // Draw a ring around the circle + return vec4f(0, 0, 0, 1); + } + } - // Check if we're close to a sample, and return it - for (var sampleIndex = 0; sampleIndex < kSampleCount; sampleIndex += 1) { - let distanceFromSample = distance(xyFrac, kSamplePositions[sampleIndex]); - if distanceFromSample < kSampleInnerRadius { - // Draw a circle for the sample value - let val = textureLoad(tex, xyInt, sampleIndex).rgb; - return vec4f(val, 1); - } else if distanceFromSample < kSampleOuterRadius { - // Draw a ring around the circle + // If close to a grid edge, render the grid + let distanceToGridEdge = abs((xyFrac + 0.5) % 1 - 0.5); + if min(distanceToGridEdge.x, distanceToGridEdge.y) < kGridEdgeHalfWidth { return vec4f(0, 0, 0, 1); } - - } - - // If close to a grid edge, render the grid - let distanceToGridEdge = abs((xyFrac + 0.5) % 1 - 0.5); - if min(distanceToGridEdge.x, distanceToGridEdge.y) < kGridEdgeHalfWidth { - return vec4f(0, 0, 0, 1); } // Otherwise, show the multisample-resolved result as the background