Rendering into a framebuffer with .mipmaps set crashes if depth is used

[haxiomic]

Description

It's possible render into specific mipmap levels when we set the target.texture.mipmaps array. This works great for color-only render targets, however if we give this target a depth buffer (either through depthBuffer: true or an explicit depthTexture), rendering will fail with a crash when rendering

The crash is caused by three.js assuming .__webglFramebuffer is a single framebuffer, however, when .mipmaps is set it becomes an array:

if (texture.mipmaps && texture.mipmaps.length > 0) {
  for (let level = 0; level < texture.mipmaps.length; level++) {
    setupFrameBufferTexture(renderTargetProperties.__webglFramebuffer[level], renderTarget, texture, _gl.COLOR_ATTACHMENT0, glTextureType, level);
  }
} else {
  setupFrameBufferTexture(renderTargetProperties.__webglFramebuffer, renderTarget, texture, _gl.COLOR_ATTACHMENT0, glTextureType, 0);
}

This causes a crash on this line

three.js/src/renderers/webgl/WebGLTextures.js

Line 1663 in fc4ef55

state.bindFramebuffer( _gl.FRAMEBUFFER, renderTargetProperties.__webglFramebuffer );

And

three.js/src/renderers/webgl/WebGLTextures.js

Line 1532 in fc4ef55

state.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );

Maybe other places too

See related

• WebGLRenderer: Allow for binding, rendering into mipmap storage of textures #29779
• WebGLRenderer: Allow for binding and rendering into a 2d render target mipmap #29844

Reproduction steps

1. Create a WebGLRenderTarget with depthBuffer: true or depthTexture set

2. Try to render to this render target (any mipmap level)

3. Crash during initialization of the target

Code

const target = new WebGLRenderTarget(2, 2, {
        depthBuffer: true,
});
target.mipmaps = [{}, {}];

renderer.setRenderTarget(target);
renderer.render(scene, camera);

Crash :[

Live example

latest

Screenshots

Version

174

Device

Desktop

Browser

Chrome

OS

MacOS

[haxiomic]

I believe a solution is to use mip 0 for depth attachment

setupDepthTexture(
    Array.isArray(renderTargetProperties.__webglFramebuffer) ?
        renderTargetProperties.__webglFramebuffer[0] : 
        renderTargetProperties.__webglFramebuffer,
    renderTarget
);

We could also setup a depth texture for each of the mipmap framebuffers too. I need to think on how likely this is to be needed

[haxiomic]

Motivation:

I'm implementing fast bloom and reflections that blur with distance – for this I render the scene to mipmap 0, then set the other mipmap levels by progressively gaussian blurring

Unfortunately I need a depth buffer both for rendering the scene into mip 0 and for screen space ray marching

Using mipmaps is much preferable to a set of textures because sample a given blur radius using the miplevel is just

vec4 blurredReflection = textureLod(texture, pos, calculateLodForDistance(d))

And we get linear mipmap blending for free

without mipmapping this becomes many lines and meta coding to support an array of textures of different blur levels