MDN: WebGLRenderingContext.readPixels
// WebGL1:
readPixels(x, y, width, height, format, type, pixels)// WebGL2:
readPixels(x, y, width, height, format, type, offset)
readPixels(x, y, width, height, format, type, pixels)
readPixels(x, y, width, height, format, type, pixels, dstOffset)
以下为threejs实现代码
该方法是读取当前当前缓冲区(framebuffer)的不过three提供的方法可以传入指定的RednerTarget
three实现的思路是通过 先绑定传入的renderTarget 在最后再绑定回来state.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer )
this.readRenderTargetPixels = function ( renderTarget, x, y, width, height, buffer, activeCubeFaceIndex ) {let framebuffer = properties.get( renderTarget ).__webglFramebuffer;if ( framebuffer ) {state.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );try {const texture = renderTarget.texture;const textureFormat = texture.format;const textureType = texture.type;if ( ( x >= 0 && x <= ( renderTarget.width - width ) ) && ( y >= 0 && y <= ( renderTarget.height - height ) ) ) {_gl.readPixels( x, y, width, height, utils.convert( textureFormat ), utils.convert( textureType ), buffer );}} finally {const framebuffer = ( _currentRenderTarget !== null ) ? properties.get( _currentRenderTarget ).__webglFramebuffer : null;state.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );}}};