Introducing Babylon Lite

Announcements
123

The problematic part of the ClearCoatTest is where a mysterious triangular artifact can be seen in the label name.

image
image900×244 42.7 KB

124

I do not repro :frowning: how is your camera setup?

This is the code I use:

async function main(): Promise<void> {
    const __initStart = performance.now();
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;

    const engine = await createEngine(canvas);
    const scene = createSceneContext(engine);

    addToScene(scene, await loadGltf(engine, MODEL_URL));

    const cam = createArcRotateCamera(Math.PI / 2, Math.PI / 2.2, 4.5, { x: -0.045, y: 0.043, z: 0.917 });
    scene.camera = cam;
    attachControl(cam, canvas, scene);

    addToScene(scene, createHemisphericLight([0, 1, 0], 1.0));

    // Fixed timestep matching Babylon.js useConstantAnimationDeltaTime (16.0ms)
    scene.fixedDeltaMs = 16.0;

    const params = new URLSearchParams(window.location.search);
    const shouldFreeze = params.has("freeze");
    const seekTimeParam = parseFloat(params.get("seekTime") || "");
    let frameCount = 0;
    let seekDone = false;
    onBeforeRender(scene, () => {
        frameCount++;
        canvas.dataset.frameCount = String(frameCount);

        if (!isNaN(seekTimeParam) && seekTimeParam > 0 && frameCount === 10 && !seekDone) {
            const seekFrame = seekTimeParam * 60;
            for (const g of scene.animationGroups) {
                goToFrame(g, seekFrame);
            }
            seekDone = true;
            canvas.dataset.animationFrozen = "true";
        }

        if (shouldFreeze && !seekDone && frameCount === 300) {
            for (const g of scene.animationGroups) {
                pauseAnimation(g);
            }
            canvas.dataset.animationFrozen = "true";
        }
    });

    await registerScene(scene);
    await startEngine(engine);
    canvas.dataset.drawCalls = String(engine.drawCallCount);
    canvas.dataset.initMs = String(performance.now() - __initStart);
    canvas.dataset.ready = "true";
}
125

confirm no error:

image
image1557×2010 234 KB

126

The issue of a black triangle appearing seems to be GPU-dependent.

This problem appears to occur when using AMD’s integrated GPU.

■ Environment where the problem occurs

CPU: AMD Ryzen 7 PRO 4750U with Radeon Graphics
GPU: AMD Radeon Graphics Processor (0x1636)

■ Environment where the problem does not occur

CPU: AMD Ryzen 7 4800HS with Radeon Graphics
GPU: NVIDIA GeForce RTX 2060 with Max-Q Design

127

can you reduce the camera maxcliplane?

Do you repro from Lite repo? using scene28?

128

I’m trying a shoot in the dark :slight_smile:

129

Hmm.. Scene 28 of the Babylon Lite sample seems to be working.

image
image549×195 25.2 KB

130

oh? so it is related to something in the scene? or we are not using the same glb?

131

I don’t know where the changes were made, but it’s highly likely that it’s a completely different product.

image
image2141×741 97 KB

image
image2141×741 68.7 KB

132

The plot is thickening :wink:

1 Like
133

your version has tangents for the label whereas mine dont so Lite rebuild them. But I’m shooting in the dark here :frowning:

134

@cx20 can you confirm that babylon.js in webgpu mode has no problem with that mesh?

135

I compared the models in the following repositories.

The ClearCoatTest models in gltf-test and Khronos’ glTF-Sample-Assets are the same.

The model in gltf-test is a copy of the one in glTF-Sample-Assets.

The historical lineage appears to have progressed as follows:

https://github.com/KhronosGroup/glTF-Sample-Models/pull/251
↓
https://github.com/KhronosGroup/glTF-Sample-Models/tree/main/2.0/ClearCoatTest/glTF
↓ ↓
↓ https://github.com/BabylonJS/Assets/pull/17
↓ ↓
↓ https://github.com/BabylonJS/Assets/tree/master/meshes/ClearCoatTest
↓
https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main/Models/ClearCoatTest/glTF
↓
https://github.com/KhronosGroup/glTF-Sample-Assets/pull/135
↓
https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main/Models/ClearCoatTest/glTF
↓
https://github.com/cx20/gltf-test/tree/master/tutorialModels/ClearCoatTest/glTF
136

ok so I found on an obscure forum a bug with AMD integrated CPU, I did a PR and if you do not mind testing for me that would be lovely:)

fix(loader): de-interleave straddling vec3 vertex attributes to fix AMD NaN normals by deltakosh · Pull Request #270 · BabylonJS/Babylon-Lite

137

The Babylon.js + WebGPU version seems to work fine.

https://cx20.github.io/gltf-test/examples/babylonjs_webgpu/index.html?category=tutorialModels&model=ClearCoatTest&scale=0.3&type=glTF

image
image1545×409 75 KB

138

That proves it’s not an unavoidable driver bug, and it’s consistent with my fix. BJS’s glTF loader reads each accessor into its own tight per-attribute VertexBuffer (it doesn’t bind one shared interleaved buffer to multiple slots with a straddling offset), so it never issues the boundary-crossing float32x3 fetch. My fix makes Lite do the same thing for exactly the offending attribute.

139

I tried it, but something still seems off.

image
image1057×566 80.8 KB

140

it is a bit better :slight_smile: at least we know this is something with the interleaved data

1 Like
141

ok @cx20 PR updated :slight_smile:

1 Like
142

I tried it. It seems to be fixed.

image
image979×259 67 KB