[React Native] SSAO Render Error

Bugs
1

Hello everyone,

BabylonJS Version: 5.21.0

My project is using react native and I have been hitting this weird issue when adding the BABYLON.SSAORenderingPipeline to my scene.
The code is pretty standard:

export function MyView() {
    const engine = BabylonRN.useEngine();
    const [camera, setCamera] = useState<Babylon.Camera>();

    // On startup.
    useEffect(() => {
        if (engine) {
            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new Babylon.Scene(engine);

            // This creates and positions a free camera (non-mesh)
            var camera = new Babylon.FreeCamera('camera1', new Babylon.Vector3(0, 5, -10), scene);

            // This targets the camera to scene origin
            camera.setTarget(Babylon.Vector3.Zero());
            setCamera(camera);

            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new Babylon.HemisphericLight('light', new Babylon.Vector3(0, 1, 0), scene);

            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

            // Our built-in 'sphere' shape.
            var sphere = Babylon.MeshBuilder.CreateSphere('sphere', { diameter: 2, segments: 32 }, scene);

            // Move the sphere upward 1/2 its height
            sphere.position.y = 1;

            // Our built-in 'ground' shape.
            var ground = Babylon.MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene);

            new Babylon.SSAORenderingPipeline('ssao', scene, 3, [camera]);
        }
    }, [engine]);

 
    // Render the BabylonJS view directly.
    return (
        <EngineView camera={camera} displayFrameRate={false} />
    );     
}

The error is the following:

 ERROR  Error: Exception in HostFunction: Unable to parse color: rgb(-51, 13, -128)

This error is located at:
SSAORenderingPipeline.prototype._createRandomTexture
ssaoRenderingPipeline.js:234:24
SSAORenderingPipeline
ssaoRenderingPipeline.js:84:9
[...]

Looking at the source code, it looks like we are trying to make a texture with negative channel RGB values.

2

Hi clem, sorry you’re hitting this. I don’t know why negative numbers are being used but it’s working fine for me in the playground. Maybe @sebavan knows more about this?

3

We looked into this and found that browsers are clamping negative numbers to 0. We can clamp it to 0 in the code to avoid the error on native.

2 Likes
4

Thanks again for reporting this! It is fixed for Babylon.js version 5.22.0.

2 Likes