# WebGPU + custom render loop not working

**URL:** <https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315>\
**Category:** Bugs\
**Tags:** webgpu\
**Created:** [August 24, 2021, 11:42am UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315 "2021-08-24T11:42:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mise](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mise/32/37506_2.png) [@mise](https://forum.babylonjs.com/u/mise)\
**Post date:** [August 24, 2021, 11:42am UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/1 "2021-08-24T11:42:15Z")

</div>

As I mentioned in my previous topic I am getting a white screen when I replace new Engine with new WebGPUEngine (and the async init).

I narrowed it down to this diff, where the only change from the playground code is replacing the engine.renderLoop with custom calls to render:

```auto
            scene.clearColor = BABYLON.Color4.FromHexString('#006600FF');
            window.renderLoop = function () {
                window.scene.render();
                requestAnimationFrame(window.renderLoop)
            }
            requestAnimationFrame(window.renderLoop)

```

I uploaded 2 edited playground files here, one for webgl and one with webgpu, both with the custom render loop:

webgl - works  
[https://jsfiddle.net/fnm1Lsxp/](https://jsfiddle.net/fnm1Lsxp/)

webgpu - no renders  
[https://jsfiddle.net/18m7f56w/](https://jsfiddle.net/18m7f56w/)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 24, 2021, 12:21pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/2 "2021-08-24T12:21:14Z")

</div>

You must register your render loop with the engine and not use `requestAnimationFrame` yourself:

[https://jsfiddle.net/21ce8dkw/](https://jsfiddle.net/21ce8dkw/)

---

<div class="post-metadata">

**Author:** ![mise](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mise/32/37506_2.png) [@mise](https://forum.babylonjs.com/u/mise)\
**Post date:** [August 24, 2021, 12:35pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/3 "2021-08-24T12:35:08Z")

</div>

I know that works, but the way I wrote it I have full control over my game loop and it needs to support Babylon WebGL as well.

In the docs you mention you want Babylon WebGPU to be backward compatible. Is there a reason direct calls to render() won’t work with WebGPU, or will this be supported in the future?

I think it deserves a mention in the [Breaking Changes](https://doc.babylonjs.com/advanced_topics/webGPU/webGPUBreakingChanges) page at the least.

some context: the project is [https://tuggowar.io.The](https://tuggowar.io.The) goal is to enable WebGPU in the Electron build of the game.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 24, 2021, 2:46pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/4 "2021-08-24T14:46:28Z")

</div>

Some housekeeping is not done when you don’t use `runRenderLoop` (`engine.beginFrame` / `engine.endFrame` are not called for eg). Also, the multi views (canvas) support won’t work, as well as VR as I can see there are some calls to VR functions in the `engine._renderLoop` wrapper.

So, not using `runRenderLoop` may work in your case but I’m not sure it is an officially supported way of doing things. @Deltakosh?

In any case, WebGPU needs at the minimum that `beginFrame` / `endFrame` be called: you can try to surround your `scene.render()` call by `engine.beginFrame()` and `engine.endFrame()` and see if that works.

For reference, here’s the render loop wrapper of `Engine`:

> <https://github.com/BabylonJS/Babylon.js/blob/master/src/Engines/engine.ts#L1235-L1270>

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 24, 2021, 2:50pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/5 "2021-08-24T14:50:15Z")

</div>

> [@Evgeni\_Popov](#):
>
> So, not using `runRenderLoop` may work in your case but I’m not sure it is an officially supported way of doing things

If you replicate the content of the runRenderLoop it should be fine (at the very least adding beingFrame and endFrame)

---

<div class="post-metadata">

**Author:** ![mise](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mise/32/37506_2.png) [@mise](https://forum.babylonjs.com/u/mise)\
**Post date:** [August 24, 2021, 2:55pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/6 "2021-08-24T14:55:17Z")

</div>

ok, I had no idea. I’ve been calling scene.render() for a long time now 🙂.

I can understand having to call another function that does more than just call scene.render(), but it seems like it should be supported for the user of Babylon to decide the moment and frequency with which to render.

But that’s up to you, I’m sure I will find a way to do that.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 24, 2021, 3:00pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/7 "2021-08-24T15:00:02Z")

</div>

> [@mise](#):
>
> but it seems like it should be supported for the user of Babylon to decide the moment and frequency with which to render.

As I said: it is ok as long as you call beginframe and endframe 🙂

---

<div class="post-metadata">

**Author:** ![mise](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mise/32/37506_2.png) [@mise](https://forum.babylonjs.com/u/mise)\
**Post date:** [August 24, 2021, 4:36pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/8 "2021-08-24T16:36:31Z")

</div>

Yes, I got everything working now, thanks a lot!

WepGPU is very important for my project and I hope you appreciate an early adopter as well 😘

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 24, 2021, 4:49pm UTC](https://forum.babylonjs.com/t/webgpu-custom-render-loop-not-working/23315/9 "2021-08-24T16:49:38Z")

</div>

Of course we do 🙂 cc @Evgeni_Popov