Fix WebGLMultisampleRenderTarget mipmap generation

[takahirox]

Description

This PR fixes WebGLMultisampleRenderTarget mipmaps generation.

Problem that this PR fixes

If I create the multisample render target with generateMipmaps: true and minFilter: THREE.LinearMipmapLinearFilter, first render to multisample render target, and then render an object with the render target to screen, the object is black. (Note: no animation loop.)

https://jsfiddle.net/zfusoyde/

If the object is close to the camera, the object is rendered correctly.

https://jsfiddle.net/z87wr690/

Root issue

The mipmaps of multisample render target doesn't seem to be generated correctly.

This is the code in WebGLRenderer which updates mipmaps for render target.

https://github.com/mrdoob/three.js/blob/r129/src/renderers/WebGLRenderer.js#L1087-L1093

// Generate mipmap if we're using any kind of mipmap filtering
textures.updateRenderTargetMipmap( _currentRenderTarget );

// resolve multisample renderbuffers to a single-sample texture if necessary
textures.updateMultisampleRenderTarget( _currentRenderTarget );

Solution

If I flip the order of the code above to first call textures.updateMultisampleRenderTarget() and then call textures.updateRenderTargetMipmap(), the problem is fixed.

It seems we first need to resolve multisample renderbuffers to a single-sample texture and then generate mipmap (because mipmaps are generated from single-sample texture).

[mrdoob]

Good catch!