@needle-tools/three 0.162.12 → 0.169.2

package/{examples/jsm/renderers/webgl → src/renderers/webgl-fallback}/WebGLBackend.js

@@ -1,7 +1,6 @@
-import { WebGLCoordinateSystem } from 'three';
-
 import GLSLNodeBuilder from './nodes/GLSLNodeBuilder.js';
 import Backend from '../common/Backend.js';
+import { getCacheKey } from '../common/RenderContext.js';
 
 import WebGLAttributeUtils from './utils/WebGLAttributeUtils.js';
 import WebGLState from './utils/WebGLState.js';
@@ -10,6 +9,10 @@ import WebGLTextureUtils from './utils/WebGLTextureUtils.js';
 import WebGLExtensions from './utils/WebGLExtensions.js';
 import WebGLCapabilities from './utils/WebGLCapabilities.js';
 import { GLFeatureName } from './utils/WebGLConstants.js';
+import { WebGLBufferRenderer } from './WebGLBufferRenderer.js';
+
+import { warnOnce } from '../../utils.js';
+import { WebGLCoordinateSystem } from '../../constants.js';
 
 //
 
@@ -39,15 +42,27 @@ class WebGLBackend extends Backend {
 		this.capabilities = new WebGLCapabilities( this );
 		this.attributeUtils = new WebGLAttributeUtils( this );
 		this.textureUtils = new WebGLTextureUtils( this );
+		this.bufferRenderer = new WebGLBufferRenderer( this );
+
 		this.state = new WebGLState( this );
 		this.utils = new WebGLUtils( this );
 
 		this.vaoCache = {};
 		this.transformFeedbackCache = {};
 		this.discard = false;
+		this.trackTimestamp = ( parameters.trackTimestamp === true );
 
 		this.extensions.get( 'EXT_color_buffer_float' );
+		this.extensions.get( 'WEBGL_clip_cull_distance' );
+		this.extensions.get( 'OES_texture_float_linear' );
+		this.extensions.get( 'EXT_color_buffer_half_float' );
+		this.extensions.get( 'WEBGL_multisampled_render_to_texture' );
+		this.extensions.get( 'WEBGL_render_shared_exponent' );
+		this.extensions.get( 'WEBGL_multi_draw' );
+
+		this.disjoint = this.extensions.get( 'EXT_disjoint_timer_query_webgl2' );
 		this.parallel = this.extensions.get( 'KHR_parallel_shader_compile' );
+
 		this._currentContext = null;
 
 	}
@@ -64,6 +79,96 @@ class WebGLBackend extends Backend {
 
 	}
 
+
+	initTimestampQuery( renderContext ) {
+
+		if ( ! this.disjoint || ! this.trackTimestamp ) return;
+
+		const renderContextData = this.get( renderContext );
+
+		if ( this.queryRunning ) {
+
+		  if ( ! renderContextData.queryQueue ) renderContextData.queryQueue = [];
+		  renderContextData.queryQueue.push( renderContext );
+		  return;
+
+		}
+
+		if ( renderContextData.activeQuery ) {
+
+		  this.gl.endQuery( this.disjoint.TIME_ELAPSED_EXT );
+		  renderContextData.activeQuery = null;
+
+		}
+
+		renderContextData.activeQuery = this.gl.createQuery();
+
+		if ( renderContextData.activeQuery !== null ) {
+
+		  this.gl.beginQuery( this.disjoint.TIME_ELAPSED_EXT, renderContextData.activeQuery );
+		  this.queryRunning = true;
+
+		}
+
+	}
+
+	// timestamp utils
+
+	prepareTimestampBuffer( renderContext ) {
+
+		if ( ! this.disjoint || ! this.trackTimestamp ) return;
+
+		const renderContextData = this.get( renderContext );
+
+		if ( renderContextData.activeQuery ) {
+
+		  this.gl.endQuery( this.disjoint.TIME_ELAPSED_EXT );
+
+		  if ( ! renderContextData.gpuQueries ) renderContextData.gpuQueries = [];
+		  renderContextData.gpuQueries.push( { query: renderContextData.activeQuery } );
+		  renderContextData.activeQuery = null;
+		  this.queryRunning = false;
+
+		  if ( renderContextData.queryQueue && renderContextData.queryQueue.length > 0 ) {
+
+				const nextRenderContext = renderContextData.queryQueue.shift();
+				this.initTimestampQuery( nextRenderContext );
+
+			}
+
+		}
+
+	}
+
+	  async resolveTimestampAsync( renderContext, type = 'render' ) {
+
+		if ( ! this.disjoint || ! this.trackTimestamp ) return;
+
+		const renderContextData = this.get( renderContext );
+
+		if ( ! renderContextData.gpuQueries ) renderContextData.gpuQueries = [];
+
+		for ( let i = 0; i < renderContextData.gpuQueries.length; i ++ ) {
+
+		  const queryInfo = renderContextData.gpuQueries[ i ];
+		  const available = this.gl.getQueryParameter( queryInfo.query, this.gl.QUERY_RESULT_AVAILABLE );
+		  const disjoint = this.gl.getParameter( this.disjoint.GPU_DISJOINT_EXT );
+
+		  if ( available && ! disjoint ) {
+
+				const elapsed = this.gl.getQueryParameter( queryInfo.query, this.gl.QUERY_RESULT );
+				const duration = Number( elapsed ) / 1000000; // Convert nanoseconds to milliseconds
+				this.gl.deleteQuery( queryInfo.query );
+				renderContextData.gpuQueries.splice( i, 1 ); // Remove the processed query
+				i --;
+				this.renderer.info.updateTimestamp( type, duration );
+
+			}
+
+		}
+
+	}
+
 	getContext() {
 
 		return this.gl;
@@ -79,6 +184,8 @@ class WebGLBackend extends Backend {
 
 		//
 
+		this.initTimestampQuery( renderContext );
+
 		renderContextData.previousContext = this._currentContext;
 		this._currentContext = renderContext;
 
@@ -101,7 +208,7 @@ class WebGLBackend extends Backend {
 
 			const { x, y, width, height } = renderContext.scissorValue;
 
-			gl.scissor( x, y, width, height );
+			gl.scissor( x, renderContext.height - height - y, width, height );
 
 		}
 
@@ -129,6 +236,20 @@ class WebGLBackend extends Backend {
 		const renderContextData = this.get( renderContext );
 		const previousContext = renderContextData.previousContext;
 
+		const occlusionQueryCount = renderContext.occlusionQueryCount;
+
+		if ( occlusionQueryCount > 0 ) {
+
+			if ( occlusionQueryCount > renderContextData.occlusionQueryIndex ) {
+
+				gl.endQuery( gl.ANY_SAMPLES_PASSED );
+
+			}
+
+			this.resolveOccludedAsync( renderContext );
+
+		}
+
 		const textures = renderContext.textures;
 
 		if ( textures !== null ) {
@@ -149,18 +270,18 @@ class WebGLBackend extends Backend {
 
 		this._currentContext = previousContext;
 
-
 		if ( renderContext.textures !== null && renderContext.renderTarget ) {
 
 			const renderTargetContextData = this.get( renderContext.renderTarget );
 
 			const { samples } = renderContext.renderTarget;
-			const fb = renderTargetContextData.framebuffer;
-
-			const mask = gl.COLOR_BUFFER_BIT;
 
 			if ( samples > 0 ) {
 
+				const fb = renderTargetContextData.framebuffers[ renderContext.getCacheKey() ];
+
+				const mask = gl.COLOR_BUFFER_BIT;
+
 				const msaaFrameBuffer = renderTargetContextData.msaaFrameBuffer;
 
 				const textures = renderContext.textures;
@@ -172,9 +293,21 @@ class WebGLBackend extends Backend {
 
 					// TODO Add support for MRT
 
-					gl.blitFramebuffer( 0, 0, renderContext.width, renderContext.height, 0, 0, renderContext.width, renderContext.height, mask, gl.NEAREST );
+					if ( renderContext.scissor ) {
+
+						const { x, y, width, height } = renderContext.scissorValue;
+
+						const viewY = renderContext.height - height - y;
+
+						gl.blitFramebuffer( x, viewY, x + width, viewY + height, x, viewY, x + width, viewY + height, mask, gl.NEAREST );
+						gl.invalidateSubFramebuffer( gl.READ_FRAMEBUFFER, renderTargetContextData.invalidationArray, x, viewY, width, height );
 
-					gl.invalidateFramebuffer( gl.READ_FRAMEBUFFER, renderTargetContextData.invalidationArray );
+					} else {
+
+						gl.blitFramebuffer( 0, 0, renderContext.width, renderContext.height, 0, 0, renderContext.width, renderContext.height, mask, gl.NEAREST );
+						gl.invalidateFramebuffer( gl.READ_FRAMEBUFFER, renderTargetContextData.invalidationArray );
+
+					}
 
 				}
 
@@ -193,32 +326,13 @@ class WebGLBackend extends Backend {
 
 			} else {
 
-				const gl = this.gl;
-
 				gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );
 
 			}
 
 		}
 
-		const occlusionQueryCount = renderContext.occlusionQueryCount;
-
-		if ( occlusionQueryCount > 0 ) {
-
-			const renderContextData = this.get( renderContext );
-
-			if ( occlusionQueryCount > renderContextData.occlusionQueryIndex ) {
-
-				const { gl } = this;
-
-				gl.endQuery( gl.ANY_SAMPLES_PASSED );
-
-			}
-
-			this.resolveOccludedAsync( renderContext );
-
-		}
-
+		this.prepareTimestampBuffer( renderContext );
 
 	}
 
@@ -293,7 +407,7 @@ class WebGLBackend extends Backend {
 		const gl = this.gl;
 		const { x, y, width, height } = renderContext.viewportValue;
 
-		gl.viewport( x, y, width, height );
+		gl.viewport( x, renderContext.height - height - y, width, height );
 
 	}
 
@@ -338,6 +452,12 @@ class WebGLBackend extends Backend {
 
 			const clearColor = descriptor.clearColorValue || this.getClearColor();
 
+			// premultiply alpha
+
+			clearColor.r *= clearColor.a;
+			clearColor.g *= clearColor.a;
+			clearColor.b *= clearColor.a;
+
 			if ( depth ) this.state.setDepthMask( true );
 
 			if ( descriptor.textures === null ) {
@@ -379,17 +499,18 @@ class WebGLBackend extends Backend {
 
 	}
 
-	beginCompute( /*computeGroup*/ ) {
+	beginCompute( computeGroup ) {
 
-		const gl = this.gl;
+		const { state, gl } = this;
 
-		gl.bindFramebuffer( gl.FRAMEBUFFER, null );
+		state.bindFramebuffer( gl.FRAMEBUFFER, null );
+		this.initTimestampQuery( computeGroup );
 
 	}
 
 	compute( computeGroup, computeNode, bindings, pipeline ) {
 
-		const gl = this.gl;
+		const { state, gl } = this;
 
 		if ( ! this.discard ) {
 
@@ -415,7 +536,7 @@ class WebGLBackend extends Backend {
 
 		}
 
-		gl.useProgram( programGPU );
+		state.useProgram( programGPU );
 
 		this._bindUniforms( bindings );
 
@@ -456,7 +577,7 @@ class WebGLBackend extends Backend {
 
 	}
 
-	finishCompute( /*computeGroup*/ ) {
+	finishCompute( computeGroup ) {
 
 		const gl = this.gl;
 
@@ -464,24 +585,32 @@ class WebGLBackend extends Backend {
 
 		gl.disable( gl.RASTERIZER_DISCARD );
 
+		this.prepareTimestampBuffer( computeGroup );
+
 	}
 
-	draw( renderObject, info ) {
+	draw( renderObject/*, info*/ ) {
 
-		const { pipeline, material, context } = renderObject;
+		const { object, pipeline, material, context } = renderObject;
 		const { programGPU } = this.get( pipeline );
 
 		const { gl, state } = this;
 
 		const contextData = this.get( context );
 
+		const drawParms = renderObject.getDrawParameters();
+
+		if ( drawParms === null ) return;
+
 		//
 
 		this._bindUniforms( renderObject.getBindings() );
 
-		state.setMaterial( material );
+		const frontFaceCW = ( object.isMesh && object.matrixWorld.determinant() < 0 );
 
-		gl.useProgram( programGPU );
+		state.setMaterial( material, frontFaceCW );
+
+		state.useProgram( programGPU );
 
 		//
 
@@ -511,11 +640,6 @@ class WebGLBackend extends Backend {
 
 		const index = renderObject.getIndex();
 
-		const object = renderObject.object;
-		const geometry = renderObject.geometry;
-		const drawRange = geometry.drawRange;
-		const firstVertex = drawRange.start;
-
 		//
 
 		const lastObject = contextData.lastOcclusionObject;
@@ -546,22 +670,22 @@ class WebGLBackend extends Backend {
 		}
 
 		//
+		const renderer = this.bufferRenderer;
 
-		let mode;
-		if ( object.isPoints ) mode = gl.POINTS;
-		else if ( object.isLineSegments ) mode = gl.LINES;
-		else if ( object.isLine ) mode = gl.LINE_STRIP;
-		else if ( object.isLineLoop ) mode = gl.LINE_LOOP;
+		if ( object.isPoints ) renderer.mode = gl.POINTS;
+		else if ( object.isLineSegments ) renderer.mode = gl.LINES;
+		else if ( object.isLine ) renderer.mode = gl.LINE_STRIP;
+		else if ( object.isLineLoop ) renderer.mode = gl.LINE_LOOP;
 		else {
 
 			if ( material.wireframe === true ) {
 
 				state.setLineWidth( material.wireframeLinewidth * this.renderer.getPixelRatio() );
-				mode = gl.LINES;
+				renderer.mode = gl.LINES;
 
 			} else {
 
-				mode = gl.TRIANGLES;
+				renderer.mode = gl.TRIANGLES;
 
 			}
 
@@ -569,46 +693,51 @@ class WebGLBackend extends Backend {
 
 		//
 
-		const instanceCount = this.getInstanceCount( renderObject );
+		const { vertexCount, instanceCount } = drawParms;
+		let { firstVertex } = drawParms;
+
+		renderer.object = object;
 
 		if ( index !== null ) {
 
-			const indexData = this.get( index );
-			const indexCount = ( drawRange.count !== Infinity ) ? drawRange.count : index.count;
+			firstVertex *= index.array.BYTES_PER_ELEMENT;
 
-			if ( instanceCount > 1 ) {
+			const indexData = this.get( index );
 
-				gl.drawElementsInstanced( mode, index.count, indexData.type, firstVertex, instanceCount );
+			renderer.index = index.count;
+			renderer.type = indexData.type;
 
-			} else {
+		} else {
 
-				gl.drawElements( mode, index.count, indexData.type, firstVertex );
+			renderer.index = 0;
 
-			}
+		}
 
-			info.update( object, indexCount, 1 );
+		if ( object.isBatchedMesh ) {
 
-		} else {
+			if ( object._multiDrawInstances !== null ) {
 
-			const positionAttribute = geometry.attributes.position;
-			const vertexCount = ( drawRange.count !== Infinity ) ? drawRange.count : positionAttribute.count;
+				renderer.renderMultiDrawInstances( object._multiDrawStarts, object._multiDrawCounts, object._multiDrawCount, object._multiDrawInstances );
 
-			if ( instanceCount > 1 ) {
+			} else if ( ! this.hasFeature( 'WEBGL_multi_draw' ) ) {
 
-				gl.drawArraysInstanced( mode, 0, vertexCount, instanceCount );
+				warnOnce( 'THREE.WebGLRenderer: WEBGL_multi_draw not supported.' );
 
 			} else {
 
-				gl.drawArrays( mode, 0, vertexCount );
+				renderer.renderMultiDraw( object._multiDrawStarts, object._multiDrawCounts, object._multiDrawCount );
 
 			}
 
-			//gl.drawArrays( mode, vertexCount, gl.UNSIGNED_SHORT, firstVertex );
+		} else if ( instanceCount > 1 ) {
 
-			info.update( object, vertexCount, 1 );
+			renderer.renderInstances( firstVertex, vertexCount, instanceCount );
 
-		}
+		} else {
+
+			renderer.render( firstVertex, vertexCount );
 
+		}
 		//
 
 		gl.bindVertexArray( null );
@@ -621,9 +750,9 @@ class WebGLBackend extends Backend {
 
 	}
 
-	getRenderCacheKey( renderObject ) {
+	getRenderCacheKey( /*renderObject*/ ) {
 
-		return renderObject.id;
+		return '';
 
 	}
 
@@ -660,9 +789,9 @@ class WebGLBackend extends Backend {
 
 	}
 
-	copyTextureToBuffer( texture, x, y, width, height ) {
+	copyTextureToBuffer( texture, x, y, width, height, faceIndex ) {
 
-		return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height );
+		return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height, faceIndex );
 
 	}
 
@@ -676,9 +805,9 @@ class WebGLBackend extends Backend {
 
 	// node builder
 
-	createNodeBuilder( object, renderer, scene = null ) {
+	createNodeBuilder( object, renderer ) {
 
-		return new GLSLNodeBuilder( object, renderer, scene );
+		return new GLSLNodeBuilder( object, renderer );
 
 	}
 
@@ -764,26 +893,107 @@ class WebGLBackend extends Backend {
 
 	}
 
+	_handleSource( string, errorLine ) {
+
+		const lines = string.split( '\n' );
+		const lines2 = [];
+
+		const from = Math.max( errorLine - 6, 0 );
+		const to = Math.min( errorLine + 6, lines.length );
+
+		for ( let i = from; i < to; i ++ ) {
+
+			const line = i + 1;
+			lines2.push( `${line === errorLine ? '>' : ' '} ${line}: ${lines[ i ]}` );
+
+		}
+
+		return lines2.join( '\n' );
+
+	}
+
+	_getShaderErrors( gl, shader, type ) {
+
+		const status = gl.getShaderParameter( shader, gl.COMPILE_STATUS );
+		const errors = gl.getShaderInfoLog( shader ).trim();
+
+		if ( status && errors === '' ) return '';
+
+		const errorMatches = /ERROR: 0:(\d+)/.exec( errors );
+		if ( errorMatches ) {
+
+			const errorLine = parseInt( errorMatches[ 1 ] );
+			return type.toUpperCase() + '\n\n' + errors + '\n\n' + this._handleSource( gl.getShaderSource( shader ), errorLine );
+
+		} else {
+
+			return errors;
+
+		}
+
+	}
+
+	_logProgramError( programGPU, glFragmentShader, glVertexShader ) {
+
+		if ( this.renderer.debug.checkShaderErrors ) {
+
+			const gl = this.gl;
+
+			const programLog = gl.getProgramInfoLog( programGPU ).trim();
+
+			if ( gl.getProgramParameter( programGPU, gl.LINK_STATUS ) === false ) {
+
+
+				if ( typeof this.renderer.debug.onShaderError === 'function' ) {
+
+					this.renderer.debug.onShaderError( gl, programGPU, glVertexShader, glFragmentShader );
+
+				} else {
+
+					// default error reporting
+
+					const vertexErrors = this._getShaderErrors( gl, glVertexShader, 'vertex' );
+					const fragmentErrors = this._getShaderErrors( gl, glFragmentShader, 'fragment' );
+
+					console.error(
+						'THREE.WebGLProgram: Shader Error ' + gl.getError() + ' - ' +
+						'VALIDATE_STATUS ' + gl.getProgramParameter( programGPU, gl.VALIDATE_STATUS ) + '\n\n' +
+						'Program Info Log: ' + programLog + '\n' +
+						vertexErrors + '\n' +
+						fragmentErrors
+					);
+
+				}
+
+			} else if ( programLog !== '' ) {
+
+				console.warn( 'THREE.WebGLProgram: Program Info Log:', programLog );
+
+			}
+
+		}
+
+	}
+
 	_completeCompile( renderObject, pipeline ) {
 
-		const gl = this.gl;
+		const { state, gl } = this;
 		const pipelineData = this.get( pipeline );
 		const { programGPU, fragmentShader, vertexShader } = pipelineData;
 
 		if ( gl.getProgramParameter( programGPU, gl.LINK_STATUS ) === false ) {
 
-			console.error( 'THREE.WebGLBackend:', gl.getProgramInfoLog( programGPU ) );
-
-			console.error( 'THREE.WebGLBackend:', gl.getShaderInfoLog( fragmentShader ) );
-			console.error( 'THREE.WebGLBackend:', gl.getShaderInfoLog( vertexShader ) );
+			this._logProgramError( programGPU, fragmentShader, vertexShader );
 
 		}
 
-		gl.useProgram( programGPU );
+		state.useProgram( programGPU );
 
 		// Bindings
 
-		this._setupBindings( renderObject.getBindings(), programGPU );
+		const bindings = renderObject.getBindings();
+
+		this._setupBindings( bindings, programGPU );
 
 		//
 
@@ -795,7 +1005,7 @@ class WebGLBackend extends Backend {
 
 	createComputePipeline( computePipeline, bindings ) {
 
-		const gl = this.gl;
+		const { state, gl } = this;
 
 		// Program
 
@@ -833,25 +1043,23 @@ class WebGLBackend extends Backend {
 		gl.transformFeedbackVaryings(
 			programGPU,
 			transformVaryingNames,
-			gl.SEPARATE_ATTRIBS,
+			gl.SEPARATE_ATTRIBS
 		);
 
 		gl.linkProgram( programGPU );
 
 		if ( gl.getProgramParameter( programGPU, gl.LINK_STATUS ) === false ) {
 
-			console.error( 'THREE.WebGLBackend:', gl.getProgramInfoLog( programGPU ) );
+			this._logProgramError( programGPU, fragmentShader, vertexShader );
 
-			console.error( 'THREE.WebGLBackend:', gl.getShaderInfoLog( fragmentShader ) );
-			console.error( 'THREE.WebGLBackend:', gl.getShaderInfoLog( vertexShader ) );
 
 		}
 
-		gl.useProgram( programGPU );
+		state.useProgram( programGPU );
 
 		// Bindings
 
-		this.createBindings( bindings );
+		this.createBindings( null, bindings );
 
 		this._setupBindings( bindings, programGPU );
 
@@ -891,32 +1099,48 @@ class WebGLBackend extends Backend {
 
 	}
 
-	createBindings( bindings ) {
+	createBindings( bindGroup, bindings ) {
 
-		this.updateBindings( bindings );
+		this.updateBindings( bindGroup, bindings );
 
 	}
 
-	updateBindings( bindings ) {
+	updateBindings( bindGroup, bindings ) {
+
+		if ( ! bindGroup ) return;
 
 		const { gl } = this;
 
-		let groupIndex = 0;
-		let textureIndex = 0;
+		const bindingsData = this.get( bindings );
+		const bindGroupData = this.get( bindGroup );
+
+		if ( bindingsData.textureIndex === undefined ) bindingsData.textureIndex = 0;
+
+		if ( bindGroupData.textureIndex === undefined ) {
+
+			bindGroupData.textureIndex = bindingsData.textureIndex;
+
+		} else {
+
+			// reset textureIndex to match previous mappimgs when rebuilt
+			bindingsData.textureIndex = bindGroupData.textureIndex;
+
+		}
+
+		let i = 0;
 
-		for ( const binding of bindings ) {
+		for ( const binding of bindGroup.bindings ) {
 
 			if ( binding.isUniformsGroup || binding.isUniformBuffer ) {
 
-				const bufferGPU = gl.createBuffer();
 				const data = binding.buffer;
+				const bufferGPU = gl.createBuffer();
 
 				gl.bindBuffer( gl.UNIFORM_BUFFER, bufferGPU );
 				gl.bufferData( gl.UNIFORM_BUFFER, data, gl.DYNAMIC_DRAW );
-				gl.bindBufferBase( gl.UNIFORM_BUFFER, groupIndex, bufferGPU );
 
 				this.set( binding, {
-					index: groupIndex ++,
+					index: bindGroup.index * 2 + i ++,
 					bufferGPU
 				} );
 
@@ -925,7 +1149,7 @@ class WebGLBackend extends Backend {
 				const { textureGPU, glTextureType } = this.get( binding.texture );
 
 				this.set( binding, {
-					index: textureIndex ++,
+					index: bindingsData.textureIndex ++,
 					textureGPU,
 					glTextureType
 				} );
@@ -975,7 +1199,11 @@ class WebGLBackend extends Backend {
 
 	createStorageAttribute( attribute ) {
 
-		//console.warn( 'Abstract class.' );
+		if ( this.has( attribute ) ) return;
+
+		const gl = this.gl;
+
+		this.attributeUtils.createAttribute( attribute, gl.ARRAY_BUFFER );
 
 	}
 
@@ -997,12 +1225,6 @@ class WebGLBackend extends Backend {
 
 	}
 
-	async hasFeatureAsync( name ) {
-
-		return this.hasFeature( name );
-
-	}
-
 	hasFeature( name ) {
 
 		const keysMatching = Object.keys( GLFeatureName ).filter( key => GLFeatureName[ key ] === name );
@@ -1011,7 +1233,6 @@ class WebGLBackend extends Backend {
 
 		for ( let i = 0; i < keysMatching.length; i ++ ) {
 
-
 			if ( extensions.has( keysMatching[ i ] ) ) return true;
 
 		}
@@ -1020,51 +1241,56 @@ class WebGLBackend extends Backend {
 
 	}
 
-
 	getMaxAnisotropy() {
 
 		return this.capabilities.getMaxAnisotropy();
 
 	}
 
-	copyFramebufferToTexture( texture, renderContext ) {
+	copyTextureToTexture( position, srcTexture, dstTexture, level ) {
 
-		this.textureUtils.copyFramebufferToTexture( texture, renderContext );
+		this.textureUtils.copyTextureToTexture( position, srcTexture, dstTexture, level );
 
 	}
 
-	_setFramebuffer( renderContext ) {
+	copyFramebufferToTexture( texture, renderContext, rectangle ) {
+
+		this.textureUtils.copyFramebufferToTexture( texture, renderContext, rectangle );
+
+	}
+
+	_setFramebuffer( descriptor ) {
 
 		const { gl, state } = this;
 
 		let currentFrameBuffer = null;
 
-		if ( renderContext.textures !== null ) {
+		if ( descriptor.textures !== null ) {
 
-			const renderTarget = renderContext.renderTarget;
+			const renderTarget = descriptor.renderTarget;
 			const renderTargetContextData = this.get( renderTarget );
 			const { samples, depthBuffer, stencilBuffer } = renderTarget;
-			const cubeFace = this.renderer._activeCubeFace;
+
 			const isCube = renderTarget.isWebGLCubeRenderTarget === true;
 
 			let msaaFb = renderTargetContextData.msaaFrameBuffer;
 			let depthRenderbuffer = renderTargetContextData.depthRenderbuffer;
 
+			const cacheKey = getCacheKey( descriptor );
+
 			let fb;
 
 			if ( isCube ) {
 
-				if ( renderTargetContextData.cubeFramebuffers === undefined ) {
+				renderTargetContextData.cubeFramebuffers || ( renderTargetContextData.cubeFramebuffers = {} );
 
-					renderTargetContextData.cubeFramebuffers = [];
-
-				}
-
-				fb = renderTargetContextData.cubeFramebuffers[ cubeFace ];
+				fb = renderTargetContextData.cubeFramebuffers[ cacheKey ];
 
 			} else {
 
-				fb = renderTargetContextData.framebuffer;
+				renderTargetContextData.framebuffers || ( renderTargetContextData.framebuffers = {} );
+
+				fb = renderTargetContextData.framebuffers[ cacheKey ];
 
 			}
 
@@ -1074,22 +1300,27 @@ class WebGLBackend extends Backend {
 
 				state.bindFramebuffer( gl.FRAMEBUFFER, fb );
 
-				const textures = renderContext.textures;
+				const textures = descriptor.textures;
 
 				if ( isCube ) {
 
-					renderTargetContextData.cubeFramebuffers[ cubeFace ] = fb;
+					renderTargetContextData.cubeFramebuffers[ cacheKey ] = fb;
+
 					const { textureGPU } = this.get( textures[ 0 ] );
 
+					const cubeFace = this.renderer._activeCubeFace;
+
 					gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + cubeFace, textureGPU, 0 );
 
 				} else {
 
+					renderTargetContextData.framebuffers[ cacheKey ] = fb;
+
 					for ( let i = 0; i < textures.length; i ++ ) {
 
 						const texture = textures[ i ];
 						const textureData = this.get( texture );
-						textureData.renderTarget = renderContext.renderTarget;
+						textureData.renderTarget = descriptor.renderTarget;
 
 						const attachment = gl.COLOR_ATTACHMENT0 + i;
 
@@ -1097,15 +1328,13 @@ class WebGLBackend extends Backend {
 
 					}
 
-					renderTargetContextData.framebuffer = fb;
-
-					state.drawBuffers( renderContext, fb );
+					state.drawBuffers( descriptor, fb );
 
 				}
 
-				if ( renderContext.depthTexture !== null ) {
+				if ( descriptor.depthTexture !== null ) {
 
-					const textureData = this.get( renderContext.depthTexture );
+					const textureData = this.get( descriptor.depthTexture );
 					const depthStyle = stencilBuffer ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
 
 					gl.framebufferTexture2D( gl.FRAMEBUFFER, depthStyle, gl.TEXTURE_2D, textureData.textureGPU, 0 );
@@ -1126,11 +1355,10 @@ class WebGLBackend extends Backend {
 
 					const msaaRenderbuffers = [];
 
-					const textures = renderContext.textures;
+					const textures = descriptor.textures;
 
 					for ( let i = 0; i < textures.length; i ++ ) {
 
-
 						msaaRenderbuffers[ i ] = gl.createRenderbuffer();
 
 						gl.bindRenderbuffer( gl.RENDERBUFFER, msaaRenderbuffers[ i ] );
@@ -1144,10 +1372,10 @@ class WebGLBackend extends Backend {
 
 						}
 
-						const texture = renderContext.textures[ i ];
+						const texture = descriptor.textures[ i ];
 						const textureData = this.get( texture );
 
-						gl.renderbufferStorageMultisample( gl.RENDERBUFFER, samples, textureData.glInternalFormat, renderContext.width, renderContext.height );
+						gl.renderbufferStorageMultisample( gl.RENDERBUFFER, samples, textureData.glInternalFormat, descriptor.width, descriptor.height );
 						gl.framebufferRenderbuffer( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.RENDERBUFFER, msaaRenderbuffers[ i ] );
 
 
@@ -1159,7 +1387,7 @@ class WebGLBackend extends Backend {
 					if ( depthRenderbuffer === undefined ) {
 
 						depthRenderbuffer = gl.createRenderbuffer();
-						this.textureUtils.setupRenderBufferStorage( depthRenderbuffer, renderContext );
+						this.textureUtils.setupRenderBufferStorage( depthRenderbuffer, descriptor );
 
 						renderTargetContextData.depthRenderbuffer = depthRenderbuffer;
 
@@ -1306,7 +1534,7 @@ class WebGLBackend extends Backend {
 
 		}
 
-		const gl = this.gl;
+		const { gl } = this;
 
 		transformFeedbackGPU = gl.createTransformFeedback();
 
@@ -1333,20 +1561,24 @@ class WebGLBackend extends Backend {
 
 		const gl = this.gl;
 
-		for ( const binding of bindings ) {
+		for ( const bindGroup of bindings ) {
 
-			const bindingData = this.get( binding );
-			const index = bindingData.index;
+			for ( const binding of bindGroup.bindings ) {
 
-			if ( binding.isUniformsGroup || binding.isUniformBuffer ) {
+				const bindingData = this.get( binding );
+				const index = bindingData.index;
 
-				const location = gl.getUniformBlockIndex( programGPU, binding.name );
-				gl.uniformBlockBinding( programGPU, location, index );
+				if ( binding.isUniformsGroup || binding.isUniformBuffer ) {
 
-			} else if ( binding.isSampledTexture ) {
+					const location = gl.getUniformBlockIndex( programGPU, binding.name );
+					gl.uniformBlockBinding( programGPU, location, index );
 
-				const location = gl.getUniformLocation( programGPU, binding.name );
-				gl.uniform1i( location, index );
+				} else if ( binding.isSampledTexture ) {
+
+					const location = gl.getUniformLocation( programGPU, binding.name );
+					gl.uniform1i( location, index );
+
+				}
 
 			}
 
@@ -1358,18 +1590,23 @@ class WebGLBackend extends Backend {
 
 		const { gl, state } = this;
 
-		for ( const binding of bindings ) {
+		for ( const bindGroup of bindings ) {
 
-			const bindingData = this.get( binding );
-			const index = bindingData.index;
+			for ( const binding of bindGroup.bindings ) {
 
-			if ( binding.isUniformsGroup || binding.isUniformBuffer ) {
+				const bindingData = this.get( binding );
+				const index = bindingData.index;
 
-				gl.bindBufferBase( gl.UNIFORM_BUFFER, index, bindingData.bufferGPU );
+				if ( binding.isUniformsGroup || binding.isUniformBuffer ) {
 
-			} else if ( binding.isSampledTexture ) {
+					// TODO USE bindBufferRange to group multiple uniform buffers
+					state.bindBufferBase( gl.UNIFORM_BUFFER, index, bindingData.bufferGPU );
 
-				state.bindTexture( bindingData.glTextureType, bindingData.textureGPU, gl.TEXTURE0 + index );
+				} else if ( binding.isSampledTexture ) {
+
+					state.bindTexture( bindingData.glTextureType, bindingData.textureGPU, gl.TEXTURE0 + index );
+
+				}
 
 			}