brianzinn / react-babylonjs

React for Babylon 3D engine
https://brianzinn.github.io/react-babylonjs/
812 stars 102 forks source link

Render on Demand #253

Closed dennemark closed 1 year ago

dennemark commented 1 year ago

We are using this in production already for a few weeks and it seems to work for our use case. Renders animations, camera movement and/or every x frame and other times it won´t, saving up a lot of resources. Just place <RenderOnDemand renderEveryFrame={24} hardwareScaling={1} /> within Scene.

https://user-images.githubusercontent.com/29654902/201050190-78d7d25b-9e09-4c15-a4bc-5f95af5804a5.mp4

dennemark commented 1 year ago

Haha... just on the day of this PR I realise that it does not work properly with pointer drag behaviour, since it will feel laggy. Might find some way to integrate it!

brianzinn commented 1 year ago

wow @dennemark that's highly cool - There have been a few discussions here and that is impressive GPU usage! I did add whenVisibleOnly RenderOptions a while back to the Engine: https://github.com/brianzinn/react-babylonjs/blob/master/packages/react-babylonjs/src/Engine.tsx#L13

I wonder if we can bring in what you wrote directly to Scene or Engine perhaps and I can move what I wrote down to Scene somehow - just to make it easier to use? The thing about Engine is you are hooking to camera observables. I'm not 100% awake yet, but just thinking out loud if it can be scene props perhaps - it doesn't look like it would add any slowdown as-is. One advantage of bringing up a level is that we don't need to stop and add, but the advantage of how you have done it as a component makes it more extensible... what do you think?

dennemark commented 1 year ago

I guess it needs to be placed within Scene component, since it is using active camera an observables on the scene.

One thing I am wondering is, if people want to add custom logic to the render queue, maybe there should be an option to add it. I think you had this somewhere already. Either it would need to be integrated in that part, for example as a hook within the Scene component or we keep it as a seperate component and could add custom render logic, if people ask for it. But maybe it would be nice, to have an option to trigger additional renders in other components. For example, when no animations, but classic lerping is used, this would lead to stuttering and maybe people would like to trigger the render then.

Probably it is best, to just start with what we have and then see.

Anyways, my pointer drag behaviour issue is not really an issue of this component. It is related to the html snippet that I just posted in discussions.

brianzinn commented 1 year ago

thanks @dennemark this serves as a useful component and example for anybody wanting to add their own rendering logic. I need to remember to put this in the new docs when they go live!

fr-an-k commented 1 year ago

This is what I was looking for, but RenderOnDemand is not yet exported (version 3.1.15) or documented.