Redefine RequestAnimationFrame / Custom RAF

Questions
1

I want to redefine Request Animation Frame, looking for a list of things I need to call to recreate babylon.js behavior to not break anything.

Why I’m doing this to myself:

  1. Most importantly - my OCD cannot stand hooks, I want clean defined order system by system what runs after what. What I’m doing currently if someone wants to investigate , give me some better advice how to do better:
    Electron-Babylon-Game-Thing/modules/Managers/SystemManager.js at github · Eshku/Electron-Babylon-Game-Thing · GitHub
    (yea, it’s not well organized even without hooks, gonna go back to it)

  2. I would also like to set my own fps for each system - both below or above 60fps, slow down or pause, set custom fps cap, ideally for physics too.
    (Not sure if just RAF itself would be enough for that, gonna need to investigate into source code, I think I’ve seen somewhere 60fps hardcap)

As usually, super confused ¯_(ツ)_/¯

2

if you want to replace RAF you need a way to pump the rendering loop and thus the only alternative is setTimeout.

If you want to replace the renderloop (and keep RAF as I’m not sure why you want to get rid of it) then you can simply call engine.stopRenderLoop() and then run engine.runRenderLoop with your own function

3

Yea I didn’t mean to replace RAF, I meant redefine what is happening inside of it.

1 Like
4

ok then yes, runRenderLoop is what you need

5

Let me show an example of what I want:


		this.queSystem('PlayerMoveDecision', ['Player'])
        this.queSystem('MovementSystem', ['Player', 'Creature']) //gonna be obsolete once physics implemented probably
		this.queSystem('RotationSystem', ['Player', 'Creature'])
		this.queSystem('CameraController')
		this.queSystem('PhysXSystem', ['Dynamic'], 60)

		this.queSystem('TransformSync', ['Player', 'Creature', 'Dynamic'])

This is part of my current toy implementation with three js where I define system order, archetypes on which system operates and framerate.

Main difference there - is I myself in control of order and fps, including physics, I have no caps, I have no hooks.

I can define clear order of operations, I can stop any system any time I want, define custom max fps for whole loop, increase any system’s fps or decrease dynamically (not 100% sure I implemented deltas properly, but Idea is there lol).

To implement this with babylon js - I would need lower level control then runRenderLoop, including calling integrated physics myself (or use it without integration? idk)

Is this achievable with babylon?

6

Yeah I see no problem honestly. You can run your own function in the renderLoop
You can decide to call scene.animate or simply call the physics engine update or simply check the inputs..

It is totally up to you

7

Honestly one other angle you may want to consider is using render graph if you want to get control over the render frame: Frame Graph | Babylon.js Documentation

8

I see problems…

How do I define how many times RAF (or functions within to be more precise) is called per second with disabled electron’s frame-limit?

What if I want to run it at anything but 60fps? What if I want to run it at 120 \ 240 fps?

How do I call integrated physics at my own, custom fps and change that fps dynamically?

RunRenderLoop is only render, it is part of the RAF, called within, I want RAF control to be able to set up how that render loop and physics are called.

Idea is to run RAF at my own defined framerate, read it as something user can set up in the settings. Aside from that each call inside of RAF could have it’s own FPS limit - some system might not need updates more often then 30 - cooldown for example, some have no reason to go beying 60 fps - animations, some might go on another thread, do calculations there and only sync transforms later, other might run with no limits for smooth feel as long as RAF update call allows (again, max fps setting).

I could ditch integrated physics and call it on my own \ integrate any other physics as I’m doing with three, but it feels like there should be a way to just re implement RAF, call everything babylon calling itself.

9

Then how do you do it in three? RAF is not engine specific. It is a web standard function

Regarding doing everything babylon does inside raf, no problem engine is open source so you can look at our default rendering function (which literally is scene.render()) and call the same internals (scene.animate, scene.evaluateActiveMeshes, etc…)

10

Yea in three I just call RAF with renderer.renderAsync with my own delta calculations

I could call scene.render same way if that’s enough for render part, idk about physics call still ¯_(ツ)_/¯.

I’m kinda…starting to give up on hardware fps unlock tho, it seems to cause more issues then I was prepared for lol