Calling renderer.compileAsync before a MRT breaks the renderer

[Samsy]

Description

Calling webgpu renderer.compileAsync before setting up a post-processing MRT breaks the renderer in both webgl back end, and webgpu backend

const callCompile = true => does not work

const callCompile = false => works

Live fiddle

[Mugen87]

There are two issues in the fiddle:

• If you call await renderer.compileAsync( scene, camera ); between the creation of the renderer and the post processing, it produces a runtime error because the animation loop will be started and thus render() called before the instance of PostProcessing has been created. That happens because of the await and the runtime error could happen will all objects you create after the await and which are used in render(). To me, that is a user error. Ideally, you start the animation loop after the precompile.

• That other issue is the actual reported problem. The MRT setting is done on scene pass level so when calling renderer.compileAsync(), you precompile your materials without MRT output. If the scene pass wants to render the scene, it uses the non-MRT precompiled shaders but with a MRT framebuffer output which explains the WebGL/WebGPU warnings.

There is unfortunately no way with the current API to avoid this issue since await renderer.compileAsync( scene, camera ); does not have access to the post processing stack and can't precompile the materials like you expect. Even if we fix the warnings by forcing a new compile so the shaders are correct, the precompile is useless in the first place.

I guess we would need something like PassNode.compileAsync() to avoid this issue.

[Mugen87]

Additional note: The compileAsync() API on renderer level was introduced in WebGLRenderer and without MRT in mind. We adopted compileAsync() to WebGPURenderer in the same fashion so the same limitations we face with WebGLRenderer are now present in WebGPURenderer.