Viewer: Enable test for IBL shadows

packages/dev/core/src/Rendering/IBLShadows/iblShadowsVoxelRenderer.ts

@@ -295,7 +295,10 @@ export class _IblShadowsVoxelRenderer {
         }
 
         const isWebGPU = this._engine.isWebGPU;
-        this._maxDrawBuffers = this._engine.getCaps().maxDrawBuffers || 0;
+        // Round down to a power of 2 so it evenly divides the power-of-2 voxel resolution,
+        // preventing out-of-bounds layer indices in the last MRT slab.
+        const rawMaxDrawBuffers = this._engine.getCaps().maxDrawBuffers || 0;
+        this._maxDrawBuffers = rawMaxDrawBuffers >= 1 ? 1 << Math.floor(Math.log2(rawMaxDrawBuffers)) : 0;
 
         this._copyMipEffectRenderer = new EffectRenderer(this._engine);
         this._copyMipEffectWrapper = new EffectWrapper({

packages/dev/core/src/Shaders/iblVoxelGrid.fragment.fx

@@ -21,7 +21,9 @@ void main(void) {
 #if MAX_DRAW_BUFFERS > 4
     glFragData[4] = normPos.z >= nearPlane + 4.0 * stepSize && normPos.z < nearPlane + 5.0 * stepSize ? 1.0 : 0.0;
     glFragData[5] = normPos.z >= nearPlane + 5.0 * stepSize && normPos.z < nearPlane + 6.0 * stepSize ? 1.0 : 0.0;
+#if MAX_DRAW_BUFFERS > 6
     glFragData[6] = normPos.z >= nearPlane + 6.0 * stepSize && normPos.z < nearPlane + 7.0 * stepSize ? 1.0 : 0.0;
     glFragData[7] = normPos.z >= nearPlane + 7.0 * stepSize && normPos.z < nearPlane + 8.0 * stepSize ? 1.0 : 0.0;
 #endif
+#endif
 }

packages/tools/viewer/test/viewer.test.ts

@@ -19,6 +19,7 @@ test.beforeEach(({ page }) => {
     });
 
     page.on("console", (message) => {
+        console.log(`[browser] ${message.text()}`);
         if (message.type() === "error" || message.type() === "warning") {
             const text = message.text();
             // Only capture messages from Babylon.js (prefixed with "BJS -").
@@ -30,12 +31,17 @@ test.beforeEach(({ page }) => {
 });
 
 test.afterEach(async ({ page }) => {
-    // Wait until 100 frames have been rendered to allow async errors (e.g. WebGPU validation) to surface.
-    await page.waitForFunction(() => {
+    // Wait until at least 50 frames have been rendered to allow async errors (e.g. WebGPU validation) to surface.
+    const minFrameCount = 50;
+    const frameIdHandle = await page.waitForFunction((minFrameCount) => {
         const viewer = document.querySelector("babylon-viewer") as ViewerElement;
         const engine = viewer.viewerDetails?.scene.getEngine();
-        return engine && engine.frameId >= 100;
-    });
+        return engine && engine.frameId >= minFrameCount ? engine.frameId : null;
+    }, minFrameCount);
+
+    const actualFrameCount = await frameIdHandle.jsonValue();
+    console.log(`${actualFrameCount} of minimum ${minFrameCount} frames rendered.`);
+    expect(actualFrameCount).toBeGreaterThanOrEqual(minFrameCount);
     expect(pageErrors, "Unhandled page errors").toEqual([]);
     expect(consoleErrors, "Console errors").toEqual([]);
 });
@@ -242,22 +248,21 @@ test('environment="auto"', async ({ page }) => {
     expect(isEnvironmentLoaded).toBeTruthy();
 });
 
-// TODO: Uncomment when IBL shadow bugs with WebGPU are resolved.
-// test('shadow-quality="high"', async ({ page }) => {
-//     const viewerElementHandle = await attachViewerElement(
-//         page,
-//         `
-//         <babylon-viewer render-when-idle
-//             source="https://assets.babylonjs.com/meshes/Demos/optimized/acrobaticPlane_variants.glb"
-//             shadow-quality="high"
-//         >
-//         </babylon-viewer>
-//         `
-//     );
-
-//     // Wait for the viewerDetails property to become defined
-//     await page.waitForFunction((viewerElement) => {
-//         // For now, we'll just rely on the common per-test validation that there are now unhandled page errors or console errors.
-//         return (viewerElement as ViewerElement).viewerDetails;
-//     }, viewerElementHandle);
-// });
+test('shadow-quality="high"', async ({ page }) => {
+    const viewerElementHandle = await attachViewerElement(
+        page,
+        `
+        <babylon-viewer render-when-idle
+            source="https://assets.babylonjs.com/meshes/Demos/optimized/acrobaticPlane_variants.glb"
+            shadow-quality="high"
+        >
+        </babylon-viewer>
+        `
+    );
+
+    // Wait for the viewerDetails property to become defined
+    await page.waitForFunction((viewerElement) => {
+        // For now, we'll just rely on the common per-test validation that there are no unhandled page errors or console errors.
+        return (viewerElement as ViewerElement).viewerDetails;
+    }, viewerElementHandle);
+});