RunRenderLoop and Scene.render

Questions
1

I want a ui , from where I can control the values of the uniforms that I pass to the custom shaders. So I created a div alongside the canvas div, now what i want is when i change the value in ui , the scene should re render and It should reflect those changes. So I am calling the render function which creates the scene and runs engine.runRenderLoop and passing those values , inside useEffect .

Now whats happens I can see the changes happening , but the model/avatar gets broken until I refresh the page . How to handle this kind of case

2

Hello :slight_smile:

Do you mean you are creating the scene on each change ? :thinking:

Maybe you could share a repro in a playground so that we can have a look ?

Basically updating a uniform from a ShaderMaterial is very straight forward since you have a lot of setters already defined, and just calling them would do the rest.

Please have a look at this example where I’m setting the color using a BabylonJS GUI slider :

2 Likes
3

@Tricotou I will try to add repro in a playground.

yours PG uses , babylon ui . What I am trying to do is create my own ui using html/css and pass the values from there to the babylon scene and re render it in real time.

Is this possible . Thanks

4

Yes I used BabylonJS GUI for the sake of simplicity, but for updating the shader, there is not difference. You can directly replace by your own HTML code.

Theorically you don’t need to touch to either the scene or the renderloop.
The scene is rendering within a loop anyway, and calling :

shaderMaterial.setColor3("colorUniformName", new BABYLON.Vector3(r, g, b))

or any other setter, for example :

shaderMaterial.setFloat("floatUniformName", 0.5)

will update the material directly

1 Like
6

Thanks @Tricotou I tried the Babylon UI , that works fabulous and avatar is not breaking. Since I only need basic UI. I can work around with it. Thanks for the Help