Problem migrating a rendering algorithm from Three.js to Babylon.js

For a non interactive application, I am trying to accumulate shadows in a render target to display an averaged version on the canvas.

I am migrating my algorithm from Three.js to Babylon.js but I am stuck because I don’t find a way to update the shadow map several times without updating the canvas.

The algorithm is the following :
1 - Move the light
2 - Render shadow to a render target 1 (here the engine should update the shadow map as the ligth has moved)
3 - Add render target 1 to a float render target 2
4 - Repeat step 1 to 3, N times
5 - Make the final canvas rendering by drawing the scene with render target 2 divided by N

As you can see, I am doing only one canvas drawing in Step 5.

In Three.JS, I simply call several times :
renderer.render(scene, camera, renderTarget1);
Each call updates the shadow map and render the output.

In Babylon, scene.render() doesn’t allow to use a render target as ouput (maybe I am wrong here ?).

I have tried to use customRenderTargets on Scene but I don’t find a way to update the shadow map manually. This is required as the light moved several times during a frame…

Any advice ?

Thanks !

You can use a pass post process that will let you access the rendered scene through postprocess.inputTexture:

https://playground.babylonjs.com/#S3RE49#1

Thanks a lot for your reply. The pass post process is fine for accumulating the values. I am actually using a scene custom render target for that but your solution is similar.

My problem is specific to the way shadows are handled. Imagine I move the light projecting a shadow 10 times. Each time, the shadow map needs to be recomputed and I don’t want to update the canvas before these 10 calls are over. Indeed I have a previous rendering on it and I don’t want to show the intermediary steps…

I have two options :

  1. I find a trick to update this shadow map myself instead of relying on the default rendering behavior
  2. Or like I did in Three.js, I find a way to render a scene without updating the canvas at all but only a render texture.

Coming from Three.js, I am a bit surprised not to have something like scene.render(myRenderTarget) which doesn’t update the canvas .
Am I missing something ?

You can use the outputRenderTarget property of the camera to generate the final output into a rtt instead of the framebuffer:

https://playground.babylonjs.com/#S3RE49#3

2 Likes

Beautiful ! Thanks a lot !

1 Like