# RunRenderLoop and Scene.render

**URL:** <https://forum.babylonjs.com/t/runrenderloop-and-scene-render/55404>\
**Category:** Questions\
**Created:** [December 16, 2024, 3:55pm UTC](https://forum.babylonjs.com/t/runrenderloop-and-scene-render/55404 "2024-12-16T15:55:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mayank\_Budhiraja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mayank_budhiraja/32/43814_2.png) [@Mayank\_Budhiraja](https://forum.babylonjs.com/u/Mayank_Budhiraja)\
**Post date:** [December 16, 2024, 3:55pm UTC](https://forum.babylonjs.com/t/runrenderloop-and-scene-render/55404/1 "2024-12-16T15:55:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [December 16, 2024, 4:21pm UTC](https://forum.babylonjs.com/t/runrenderloop-and-scene-render/55404/2 "2024-12-16T16:21:25Z")

</div>

Hello 🙂

> [@Mayank\_Budhiraja](#):
>
> So I am calling the render function which creates the scene and runs engine.runRenderLoop and passing those values , inside useEffect

Do you mean you are creating the scene on each change ? 🤔

> [@Mayank\_Budhiraja](#):
>
> but the model/avatar gets broken until I refresh the page . How to handle this kind of case

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

* * *

Basically updating a uniform from a [ShaderMaterial](https://doc.babylonjs.com/typedoc/classes/BABYLON.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 :

> **[Babylon.js Playground](https://playground.babylonjs.com/#4U4QH9%23149)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Mayank\_Budhiraja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mayank_budhiraja/32/43814_2.png) [@Mayank\_Budhiraja](https://forum.babylonjs.com/u/Mayank_Budhiraja)\
**Post date:** [December 16, 2024, 4:34pm UTC](https://forum.babylonjs.com/t/runrenderloop-and-scene-render/55404/3 "2024-12-16T16:34:39Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [December 16, 2024, 4:38pm UTC](https://forum.babylonjs.com/t/runrenderloop-and-scene-render/55404/4 "2024-12-16T16:38:30Z")

</div>

> [@Mayank\_Budhiraja](#):
>
> 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.

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.

> [@Mayank\_Budhiraja](#):
>
> and re render it in real time.

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

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

```

or any other setter, for example :

```javascript
shaderMaterial.setFloat("floatUniformName", 0.5)

```

will update the material directly

---

<div class="post-metadata">

**Author:** ![Mayank\_Budhiraja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mayank_budhiraja/32/43814_2.png) [@Mayank\_Budhiraja](https://forum.babylonjs.com/u/Mayank_Budhiraja)\
**Post date:** [December 16, 2024, 5:29pm UTC](https://forum.babylonjs.com/t/runrenderloop-and-scene-render/55404/6 "2024-12-16T17:29:07Z")

</div>

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