From 1f046a8766429412dd5d511155028e3d040a4343 Mon Sep 17 00:00:00 2001 From: Gregg Tavares Date: Tue, 25 Mar 2025 00:58:36 -0700 Subject: [PATCH] Fix a few issues with the generateMipmaps sample * some browsers don't yet implemenet 'core-features-and-limits' so we need to add some other temporary check to see if we're in core mode or not * a copy/paste type left 2d-array viewed as 2d * added captions --- sample/generateMipmap/index.html | 33 ++++++++++++++++++++++++++++++-- sample/generateMipmap/main.ts | 11 +++++++++-- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/sample/generateMipmap/index.html b/sample/generateMipmap/index.html index ca2f73b4..38a18076 100644 --- a/sample/generateMipmap/index.html +++ b/sample/generateMipmap/index.html @@ -11,20 +11,49 @@ html, body { margin: 0; /* remove default margin */ height: 100%; /* make body fill the browser window */ + width: 100%; display: flex; place-content: center center; } - canvas { + #container { + position: relative; width: 600px; height: 600px; max-width: 100%; display: block; } + canvas, #grid { + width: 600px; + height: 600px; + max-width: 100%; + display: block; + } + #grid { + position: absolute; + left: 0; + top: 0; + display:grid; + grid-template-columns: 50% 50%; + grid-row: auto auto; + color: white; + } + #grid>* { + border: 1px solid black; + text-align: center; + } - +
+ +
+
2d
+
2d-array
+
cube
+
cube-array
+
+
diff --git a/sample/generateMipmap/main.ts b/sample/generateMipmap/main.ts index 154c0894..d2b7377a 100644 --- a/sample/generateMipmap/main.ts +++ b/sample/generateMipmap/main.ts @@ -72,7 +72,7 @@ const textures: { }); putDataInTexture2dArray(device, texture); generateMips(device, texture); - textures.push({ texture, viewDimension: '2d' }); + textures.push({ texture, viewDimension: '2d-array' }); } // Make a cube texture, put an image in each face, generate mips @@ -93,7 +93,13 @@ const textures: { } // Compatibility mode might not support 'core-features-and-limits' -if (device.features.has('core-features-and-limits')) { +// Note: Checking for maxColorAttachments > 4 is not required by the spec +// but some browsers have not implemented 'core-features-and-limits'. +// We'll remove this once they do. +if ( + device.features.has('core-features-and-limits') || + device.limits.maxColorAttachments > 4 +) { // Make a cube array texture, put a different image in each layer, generate mips const texture = device.createTexture({ size: [256, 256, 24], @@ -122,6 +128,7 @@ if (device.features.has('core-features-and-limits')) { putDataInTextureCubeFallback(device, texture); generateMips(device, texture); textures.push({ texture, viewDimension: 'cube' }); + document.querySelector('#cube-array').textContent = 'cube(fallback)'; } const module = device.createShaderModule({