WebGLRenderer: Fixed readRenderTargetPixelsAsync checking readability against incorrect render target (#30672)

* WebGLRenderer: Fixed readRenderTargetPixelsAsync checking readability against incorrect render target

readRenderTargetPixelsAsync was checking if the render target was readable before binding the render target to active framebuffer.

This resulted in the texture readability check occurring on the previously set framebuffer and not the render target we are reading pixels from.

* lint fix

* Removed redundant call to setRenderTarget

Author: greyb1t

examples/webgl_interactive_cubes_gpu.html

@@ -254,6 +254,9 @@
 				renderer.setClearColor( clearColor );
 				renderer.render( pickingScene, camera );
 
+				// Restore active render target to canvas
+				renderer.setRenderTarget( null );
+
 				// clear the view offset so rendering returns to normal
 				camera.clearViewOffset();
 
@@ -291,7 +294,6 @@
 
 				pick();
 
-				renderer.setRenderTarget( null );
 				renderer.render( scene, camera );
 
 			}

src/renderers/WebGLRenderer.js

@@ -2931,27 +2931,27 @@ class WebGLRenderer {
 
 			if ( framebuffer ) {
 
-				const texture = renderTarget.texture;
-				const textureFormat = texture.format;
-				const textureType = texture.type;
+				// the following if statement ensures valid read requests (no out-of-bounds pixels, see #8604)
+				if ( ( x >= 0 && x <= ( renderTarget.width - width ) ) && ( y >= 0 && y <= ( renderTarget.height - height ) ) ) {
 
-				if ( ! capabilities.textureFormatReadable( textureFormat ) ) {
+					// set the active frame buffer to the one we want to read
+					state.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );
 
-					throw new Error( 'THREE.WebGLRenderer.readRenderTargetPixelsAsync: renderTarget is not in RGBA or implementation defined format.' );
+					const texture = renderTarget.texture;
+					const textureFormat = texture.format;
+					const textureType = texture.type;
 
-				}
+					if ( ! capabilities.textureFormatReadable( textureFormat ) ) {
 
-				if ( ! capabilities.textureTypeReadable( textureType ) ) {
+						throw new Error( 'THREE.WebGLRenderer.readRenderTargetPixelsAsync: renderTarget is not in RGBA or implementation defined format.' );
 
-					throw new Error( 'THREE.WebGLRenderer.readRenderTargetPixelsAsync: renderTarget is not in UnsignedByteType or implementation defined type.' );
+					}
 
-				}
+					if ( ! capabilities.textureTypeReadable( textureType ) ) {
 
-				// the following if statement ensures valid read requests (no out-of-bounds pixels, see #8604)
-				if ( ( x >= 0 && x <= ( renderTarget.width - width ) ) && ( y >= 0 && y <= ( renderTarget.height - height ) ) ) {
+						throw new Error( 'THREE.WebGLRenderer.readRenderTargetPixelsAsync: renderTarget is not in UnsignedByteType or implementation defined type.' );
 
-					// set the active frame buffer to the one we want to read
-					state.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );
+					}
 
 					const glBuffer = _gl.createBuffer();
 					_gl.bindBuffer( _gl.PIXEL_PACK_BUFFER, glBuffer );