@needle-tools/three 0.162.2 → 0.162.3

package/examples/jsm/renderers/common/Renderer.js

@@ -1,1304 +1,1304 @@
-import Animation from './Animation.js';
-import RenderObjects from './RenderObjects.js';
-import Attributes from './Attributes.js';
-import Geometries from './Geometries.js';
-import Info from './Info.js';
-import Pipelines from './Pipelines.js';
-import Bindings from './Bindings.js';
-import RenderLists from './RenderLists.js';
-import RenderContexts from './RenderContexts.js';
-import Textures from './Textures.js';
-import Background from './Background.js';
-import Nodes from './nodes/Nodes.js';
-import Color4 from './Color4.js';
-import ClippingContext from './ClippingContext.js';
-import { Scene, Frustum, Matrix4, Vector2, Vector3, Vector4, DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping } from 'three';
-
-const _scene = new Scene();
-const _drawingBufferSize = new Vector2();
-const _screen = new Vector4();
-const _frustum = new Frustum();
-const _projScreenMatrix = new Matrix4();
-const _vector3 = new Vector3();
-
-class Renderer {
-
-	constructor( backend, parameters = {} ) {
-
-		this.isRenderer = true;
-
-		//
-
-		const {
-			logarithmicDepthBuffer = false,
-			alpha = true
-		} = parameters;
-
-		// public
-
-		this.domElement = backend.getDomElement();
-
-		this.backend = backend;
-
-		this.autoClear = true;
-		this.autoClearColor = true;
-		this.autoClearDepth = true;
-		this.autoClearStencil = true;
-
-		this.alpha = alpha;
-
-		this.logarithmicDepthBuffer = logarithmicDepthBuffer;
-
-		this.outputColorSpace = SRGBColorSpace;
-
-		this.toneMapping = NoToneMapping;
-		this.toneMappingExposure = 1.0;
-
-		this.sortObjects = true;
-
-		this.depth = true;
-		this.stencil = true;
-
-		this.clippingPlanes = [];
-
-		this.info = new Info();
-
-		// internals
-
-		this._pixelRatio = 1;
-		this._width = this.domElement.width;
-		this._height = this.domElement.height;
-
-		this._viewport = new Vector4( 0, 0, this._width, this._height );
-		this._scissor = new Vector4( 0, 0, this._width, this._height );
-		this._scissorTest = false;
-
-		this._attributes = null;
-		this._geometries = null;
-		this._nodes = null;
-		this._animation = null;
-		this._bindings = null;
-		this._objects = null;
-		this._pipelines = null;
-		this._renderLists = null;
-		this._renderContexts = null;
-		this._textures = null;
-		this._background = null;
-
-		this._currentRenderContext = null;
-
-		this._opaqueSort = null;
-		this._transparentSort = null;
-
-
-		const alphaClear = this.alpha === true ? 0 : 1;
-
-		this._clearColor = new Color4( 0, 0, 0, alphaClear );
-		this._clearDepth = 1;
-		this._clearStencil = 0;
-
-		this._renderTarget = null;
-		this._activeCubeFace = 0;
-		this._activeMipmapLevel = 0;
-
-		this._renderObjectFunction = null;
-		this._currentRenderObjectFunction = null;
-
-		this._handleObjectFunction = this._renderObjectDirect;
-
-		this._initialized = false;
-		this._initPromise = null;
-
-		this._compilationPromises = null;
-
-		// backwards compatibility
-
-		this.shadowMap = {
-			enabled: false,
-			type: null
-		};
-
-		this.xr = {
-			enabled: false
-		};
-
-	}
-
-	async init() {
-
-		if ( this._initialized ) {
-
-			throw new Error( 'Renderer: Backend has already been initialized.' );
-
-		}
-
-		if ( this._initPromise !== null ) {
-
-			return this._initPromise;
-
-		}
-
-		this._initPromise = new Promise( async ( resolve, reject ) => {
-
-			const backend = this.backend;
-
-			try {
-
-				await backend.init( this );
-
-			} catch ( error ) {
-
-				reject( error );
-				return;
-
-			}
-
-			this._nodes = new Nodes( this, backend );
-			this._animation = new Animation( this._nodes, this.info );
-			this._attributes = new Attributes( backend );
-			this._background = new Background( this, this._nodes );
-			this._geometries = new Geometries( this._attributes, this.info );
-			this._textures = new Textures( this, backend, this.info );
-			this._pipelines = new Pipelines( backend, this._nodes );
-			this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this.info );
-			this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._bindings, this.info );
-			this._renderLists = new RenderLists();
-			this._renderContexts = new RenderContexts();
-
-			//
-
-			this._initialized = true;
-
-			resolve();
-
-		} );
-
-		return this._initPromise;
-
-	}
-
-	get coordinateSystem() {
-
-		return this.backend.coordinateSystem;
-
-	}
-
-	async compileAsync( scene, camera, targetScene = null ) {
-
-		if ( this._initialized === false ) await this.init();
-
-		// preserve render tree
-
-		const nodeFrame = this._nodes.nodeFrame;
-
-		const previousRenderId = nodeFrame.renderId;
-		const previousRenderContext = this._currentRenderContext;
-		const previousRenderObjectFunction = this._currentRenderObjectFunction;
-		const previousCompilationPromises = this._compilationPromises;
-
-		//
-
-		const sceneRef = ( scene.isScene === true ) ? scene : _scene;
-
-		if ( targetScene === null ) targetScene = scene;
-
-		const renderTarget = this._renderTarget;
-		const renderContext = this._renderContexts.get( targetScene, camera, renderTarget );
-		const activeMipmapLevel = this._activeMipmapLevel;
-
-		const compilationPromises = [];
-
-		this._currentRenderContext = renderContext;
-		this._currentRenderObjectFunction = this.renderObject;
-
-		this._handleObjectFunction = this._createObjectPipeline;
-
-		this._compilationPromises = compilationPromises;
-
-		nodeFrame.renderId ++;
-
-		//
-
-		nodeFrame.update();
-
-		//
-
-		renderContext.depth = this.depth;
-		renderContext.stencil = this.stencil;
-
-		if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
-		renderContext.clippingContext.updateGlobal( this, camera );
-
-		//
-
-		sceneRef.onBeforeRender( this, scene, camera, renderTarget );
-
-		//
-
-		const renderList = this._renderLists.get( scene, camera );
-		renderList.begin();
-
-		this._projectObject( scene, camera, 0, renderList );
-
-		// include lights from target scene
-		if ( targetScene !== scene ) {
-
-			targetScene.traverseVisible( function ( object ) {
-
-				if ( object.isLight && object.layers.test( camera.layers ) ) {
-
-					renderList.pushLight( object );
-
-				}
-
-			} );
-
-		}
-
-		renderList.finish();
-
-		//
-
-		if ( renderTarget !== null ) {
-
-			this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
-
-			const renderTargetData = this._textures.get( renderTarget );
-
-			renderContext.textures = renderTargetData.textures;
-			renderContext.depthTexture = renderTargetData.depthTexture;
-
-		} else {
-
-			renderContext.textures = null;
-			renderContext.depthTexture = null;
-
-		}
-
-		//
-
-		this._nodes.updateScene( sceneRef );
-
-		//
-
-		this._background.update( sceneRef, renderList, renderContext );
-
-		// process render lists
-
-		const opaqueObjects = renderList.opaque;
-		const transparentObjects = renderList.transparent;
-		const lightsNode = renderList.lightsNode;
-
-		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
-		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
-
-		// restore render tree
-
-		nodeFrame.renderId = previousRenderId;
-
-		this._currentRenderContext = previousRenderContext;
-		this._currentRenderObjectFunction = previousRenderObjectFunction;
-		this._compilationPromises = previousCompilationPromises;
-
-		this._handleObjectFunction = this._renderObjectDirect;
-
-		// wait for all promises setup by backends awaiting compilation/linking/pipeline creation to complete
-
-		await Promise.all( compilationPromises );
-
-	}
-
-	async renderAsync( scene, camera ) {
-
-		if ( this._initialized === false ) await this.init();
-
-		const renderContext = this._renderContext( scene, camera );
-
-		await this.backend.resolveTimestampAsync( renderContext, 'render' );
-
-	}
-
-	render( scene, camera ) {
-
-		if ( this._initialized === false ) {
-
-			console.error( 'THREE.Renderer: .render() called before the backend is initialized. Try using .renderAsync() instead.' );
-			return;
-
-		}
-
-		this._renderContext( scene, camera );
-
-	}
-
-	_renderContext( scene, camera ) {
-
-		// preserve render tree
-
-		const nodeFrame = this._nodes.nodeFrame;
-
-		const previousRenderId = nodeFrame.renderId;
-		const previousRenderContext = this._currentRenderContext;
-		const previousRenderObjectFunction = this._currentRenderObjectFunction;
-
-		//
-
-		const sceneRef = ( scene.isScene === true ) ? scene : _scene;
-
-		const renderTarget = this._renderTarget;
-		const renderContext = this._renderContexts.get( scene, camera, renderTarget );
-		const activeCubeFace = this._activeCubeFace;
-		const activeMipmapLevel = this._activeMipmapLevel;
-
-		this._currentRenderContext = renderContext;
-		this._currentRenderObjectFunction = this._renderObjectFunction || this.renderObject;
-
-		//
-
-		this.info.calls ++;
-		this.info.render.calls ++;
-
-		nodeFrame.renderId = this.info.calls;
-
-		//
-
-		const coordinateSystem = this.coordinateSystem;
-
-		if ( camera.coordinateSystem !== coordinateSystem ) {
-
-			camera.coordinateSystem = coordinateSystem;
-
-			camera.updateProjectionMatrix();
-
-		}
-
-		//
-
-		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
-
-		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
-
-		if ( this.info.autoReset === true ) this.info.reset();
-
-		//
-
-		let viewport = this._viewport;
-		let scissor = this._scissor;
-		let pixelRatio = this._pixelRatio;
-
-		if ( renderTarget !== null ) {
-
-			viewport = renderTarget.viewport;
-			scissor = renderTarget.scissor;
-			pixelRatio = 1;
-
-		}
-
-		this.getDrawingBufferSize( _drawingBufferSize );
-
-		_screen.set( 0, 0, _drawingBufferSize.width, _drawingBufferSize.height );
-
-		const minDepth = ( viewport.minDepth === undefined ) ? 0 : viewport.minDepth;
-		const maxDepth = ( viewport.maxDepth === undefined ) ? 1 : viewport.maxDepth;
-
-		renderContext.viewportValue.copy( viewport ).multiplyScalar( pixelRatio ).floor();
-		renderContext.viewportValue.width >>= activeMipmapLevel;
-		renderContext.viewportValue.height >>= activeMipmapLevel;
-		renderContext.viewportValue.minDepth = minDepth;
-		renderContext.viewportValue.maxDepth = maxDepth;
-		renderContext.viewport = renderContext.viewportValue.equals( _screen ) === false;
-
-		renderContext.scissorValue.copy( scissor ).multiplyScalar( pixelRatio ).floor();
-		renderContext.scissor = this._scissorTest && renderContext.scissorValue.equals( _screen ) === false;
-		renderContext.scissorValue.width >>= activeMipmapLevel;
-		renderContext.scissorValue.height >>= activeMipmapLevel;
-
-		if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
-		renderContext.clippingContext.updateGlobal( this, camera );
-
-		//
-
-		sceneRef.onBeforeRender( this, scene, camera, renderTarget );
-
-		//
-
-		_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
-		_frustum.setFromProjectionMatrix( _projScreenMatrix, coordinateSystem );
-
-		const renderList = this._renderLists.get( scene, camera );
-		renderList.begin();
-
-		this._projectObject( scene, camera, 0, renderList );
-
-		renderList.finish();
-
-		if ( this.sortObjects === true ) {
-
-			renderList.sort( this._opaqueSort, this._transparentSort );
-
-		}
-
-		//
-
-		if ( renderTarget !== null ) {
-
-			this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
-
-			const renderTargetData = this._textures.get( renderTarget );
-
-			renderContext.textures = renderTargetData.textures;
-			renderContext.depthTexture = renderTargetData.depthTexture;
-			renderContext.width = renderTargetData.width;
-			renderContext.height = renderTargetData.height;
-			renderContext.renderTarget = renderTarget;
-			renderContext.depth = renderTarget.depthBuffer;
-			renderContext.stencil = renderTarget.stencilBuffer;
-
-		} else {
-
-			renderContext.textures = null;
-			renderContext.depthTexture = null;
-			renderContext.width = this.domElement.width;
-			renderContext.height = this.domElement.height;
-			renderContext.depth = this.depth;
-			renderContext.stencil = this.stencil;
-
-		}
-
-		renderContext.width >>= activeMipmapLevel;
-		renderContext.height >>= activeMipmapLevel;
-		renderContext.activeCubeFace = activeCubeFace;
-		renderContext.activeMipmapLevel = activeMipmapLevel;
-		renderContext.occlusionQueryCount = renderList.occlusionQueryCount;
-
-		//
-
-		this._nodes.updateScene( sceneRef );
-
-		//
-
-		this._background.update( sceneRef, renderList, renderContext );
-
-		//
-
-		this.backend.beginRender( renderContext );
-
-		// process render lists
-
-		const opaqueObjects = renderList.opaque;
-		const transparentObjects = renderList.transparent;
-		const lightsNode = renderList.lightsNode;
-
-		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
-		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
-
-		// finish render pass
-
-		this.backend.finishRender( renderContext );
-
-		// restore render tree
-
-		nodeFrame.renderId = previousRenderId;
-
-		this._currentRenderContext = previousRenderContext;
-		this._currentRenderObjectFunction = previousRenderObjectFunction;
-
-		//
-
-		sceneRef.onAfterRender( this, scene, camera, renderTarget );
-
-		//
-
-		return renderContext;
-
-	}
-
-	getMaxAnisotropy() {
-
-		return this.backend.getMaxAnisotropy();
-
-	}
-
-	getActiveCubeFace() {
-
-		return this._activeCubeFace;
-
-	}
-
-	getActiveMipmapLevel() {
-
-		return this._activeMipmapLevel;
-
-	}
-
-	async setAnimationLoop( callback ) {
-
-		if ( this._initialized === false ) await this.init();
-
-		this._animation.setAnimationLoop( callback );
-
-	}
-
-	getArrayBuffer( attribute ) { // @deprecated, r155
-
-		console.warn( 'THREE.Renderer: getArrayBuffer() is deprecated. Use getArrayBufferAsync() instead.' );
-
-		return this.getArrayBufferAsync( attribute );
-
-	}
-
-	async getArrayBufferAsync( attribute ) {
-
-		return await this.backend.getArrayBufferAsync( attribute );
-
-	}
-
-	getContext() {
-
-		return this.backend.getContext();
-
-	}
-
-	getPixelRatio() {
-
-		return this._pixelRatio;
-
-	}
-
-	getDrawingBufferSize( target ) {
-
-		return target.set( this._width * this._pixelRatio, this._height * this._pixelRatio ).floor();
-
-	}
-
-	getSize( target ) {
-
-		return target.set( this._width, this._height );
-
-	}
-
-	setPixelRatio( value = 1 ) {
-
-		this._pixelRatio = value;
-
-		this.setSize( this._width, this._height, false );
-
-	}
-
-	setDrawingBufferSize( width, height, pixelRatio ) {
-
-		this._width = width;
-		this._height = height;
-
-		this._pixelRatio = pixelRatio;
-
-		this.domElement.width = Math.floor( width * pixelRatio );
-		this.domElement.height = Math.floor( height * pixelRatio );
-
-		this.setViewport( 0, 0, width, height );
-
-		if ( this._initialized ) this.backend.updateSize();
-
-	}
-
-	setSize( width, height, updateStyle = true ) {
-
-		this._width = width;
-		this._height = height;
-
-		this.domElement.width = Math.floor( width * this._pixelRatio );
-		this.domElement.height = Math.floor( height * this._pixelRatio );
-
-		if ( updateStyle === true ) {
-
-			this.domElement.style.width = width + 'px';
-			this.domElement.style.height = height + 'px';
-
-		}
-
-		this.setViewport( 0, 0, width, height );
-
-		if ( this._initialized ) this.backend.updateSize();
-
-	}
-
-	setOpaqueSort( method ) {
-
-		this._opaqueSort = method;
-
-	}
-
-	setTransparentSort( method ) {
-
-		this._transparentSort = method;
-
-	}
-
-	getScissor( target ) {
-
-		const scissor = this._scissor;
-
-		target.x = scissor.x;
-		target.y = scissor.y;
-		target.width = scissor.width;
-		target.height = scissor.height;
-
-		return target;
-
-	}
-
-	setScissor( x, y, width, height ) {
-
-		const scissor = this._scissor;
-
-		if ( x.isVector4 ) {
-
-			scissor.copy( x );
-
-		} else {
-
-			scissor.set( x, y, width, height );
-
-		}
-
-	}
-
-	getScissorTest() {
-
-		return this._scissorTest;
-
-	}
-
-	setScissorTest( boolean ) {
-
-		this._scissorTest = boolean;
-
-		this.backend.setScissorTest( boolean );
-
-	}
-
-	getViewport( target ) {
-
-		return target.copy( this._viewport );
-
-	}
-
-	setViewport( x, y, width, height, minDepth = 0, maxDepth = 1 ) {
-
-		const viewport = this._viewport;
-
-		if ( x.isVector4 ) {
-
-			viewport.copy( x );
-
-		} else {
-
-			viewport.set( x, y, width, height );
-
-		}
-
-		viewport.minDepth = minDepth;
-		viewport.maxDepth = maxDepth;
-
-	}
-
-	getClearColor( target ) {
-
-		return target.copy( this._clearColor );
-
-	}
-
-	setClearColor( color, alpha = 1 ) {
-
-		this._clearColor.set( color );
-		this._clearColor.a = alpha;
-
-	}
-
-	getClearAlpha() {
-
-		return this._clearColor.a;
-
-	}
-
-	setClearAlpha( alpha ) {
-
-		this._clearColor.a = alpha;
-
-	}
-
-	getClearDepth() {
-
-		return this._clearDepth;
-
-	}
-
-	setClearDepth( depth ) {
-
-		this._clearDepth = depth;
-
-	}
-
-	getClearStencil() {
-
-		return this._clearStencil;
-
-	}
-
-	setClearStencil( stencil ) {
-
-		this._clearStencil = stencil;
-
-	}
-
-	isOccluded( object ) {
-
-		const renderContext = this._currentRenderContext;
-
-		return renderContext && this.backend.isOccluded( renderContext, object );
-
-	}
-
-	clear( color = true, depth = true, stencil = true ) {
-
-		let renderTargetData = null;
-		const renderTarget = this._renderTarget;
-
-		if ( renderTarget !== null ) {
-
-			this._textures.updateRenderTarget( renderTarget );
-
-			renderTargetData = this._textures.get( renderTarget );
-
-		}
-
-		this.backend.clear( color, depth, stencil, renderTargetData );
-
-	}
-
-	clearColor() {
-
-		return this.clear( true, false, false );
-
-	}
-
-	clearDepth() {
-
-		return this.clear( false, true, false );
-
-	}
-
-	clearStencil() {
-
-		return this.clear( false, false, true );
-
-	}
-
-	async clearAsync( color = true, depth = true, stencil = true ) {
-
-		if ( this._initialized === false ) await this.init();
-
-		this.clear( color, depth, stencil );
-
-	}
-
-	clearColorAsync() {
-
-		return this.clearAsync( true, false, false );
-
-	}
-
-	clearDepthAsync() {
-
-		return this.clearAsync( false, true, false );
-
-	}
-
-	clearStencilAsync() {
-
-		return this.clearAsync( false, false, true );
-
-	}
-
-	get currentColorSpace() {
-
-		const renderTarget = this._renderTarget;
-
-		if ( renderTarget !== null ) {
-
-			const texture = renderTarget.texture;
-
-			return ( Array.isArray( texture ) ? texture[ 0 ] : texture ).colorSpace;
-
-		}
-
-		return this.outputColorSpace;
-
-	}
-
-	dispose() {
-
-		this.info.dispose();
-
-		this._animation.dispose();
-		this._objects.dispose();
-		this._pipelines.dispose();
-		this._nodes.dispose();
-		this._bindings.dispose();
-		this._renderLists.dispose();
-		this._renderContexts.dispose();
-		this._textures.dispose();
-
-		this.setRenderTarget( null );
-		this.setAnimationLoop( null );
-
-	}
-
-	setRenderTarget( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
-
-		this._renderTarget = renderTarget;
-		this._activeCubeFace = activeCubeFace;
-		this._activeMipmapLevel = activeMipmapLevel;
-
-	}
-
-	getRenderTarget() {
-
-		return this._renderTarget;
-
-	}
-
-	setRenderObjectFunction( renderObjectFunction ) {
-
-		this._renderObjectFunction = renderObjectFunction;
-
-	}
-
-	getRenderObjectFunction() {
-
-		return this._renderObjectFunction;
-
-	}
-
-	async computeAsync( computeNodes ) {
-
-		if ( this._initialized === false ) await this.init();
-
-		const nodeFrame = this._nodes.nodeFrame;
-
-		const previousRenderId = nodeFrame.renderId;
-
-		//
-
-		this.info.calls ++;
-		this.info.compute.calls ++;
-		this.info.compute.computeCalls ++;
-
-		nodeFrame.renderId = this.info.calls;
-
-		//
-		if ( this.info.autoReset === true ) this.info.resetCompute();
-
-		const backend = this.backend;
-		const pipelines = this._pipelines;
-		const bindings = this._bindings;
-		const nodes = this._nodes;
-		const computeList = Array.isArray( computeNodes ) ? computeNodes : [ computeNodes ];
-
-		if ( computeList[ 0 ] === undefined || computeList[ 0 ].isComputeNode !== true ) {
-
-			throw new Error( 'THREE.Renderer: .compute() expects a ComputeNode.' );
-
-		}
-
-		backend.beginCompute( computeNodes );
-
-		for ( const computeNode of computeList ) {
-
-			// onInit
-
-			if ( pipelines.has( computeNode ) === false ) {
-
-				const dispose = () => {
-
-					computeNode.removeEventListener( 'dispose', dispose );
-
-					pipelines.delete( computeNode );
-					bindings.delete( computeNode );
-					nodes.delete( computeNode );
-
-				};
-
-				computeNode.addEventListener( 'dispose', dispose );
-
-				//
-
-				computeNode.onInit( { renderer: this } );
-
-			}
-
-			nodes.updateForCompute( computeNode );
-			bindings.updateForCompute( computeNode );
-
-			const computeBindings = bindings.getForCompute( computeNode );
-			const computePipeline = pipelines.getForCompute( computeNode, computeBindings );
-
-			backend.compute( computeNodes, computeNode, computeBindings, computePipeline );
-
-		}
-
-		backend.finishCompute( computeNodes );
-
-		await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
-
-		//
-
-		nodeFrame.renderId = previousRenderId;
-
-	}
-
-	hasFeatureAsync( name ) {
-
-		return this.backend.hasFeatureAsync( name );
-
-	}
-
-	hasFeature( name ) {
-
-		return this.backend.hasFeature( name );
-
-	}
-
-	copyFramebufferToTexture( framebufferTexture ) {
-
-		const renderContext = this._currentRenderContext;
-
-		this._textures.updateTexture( framebufferTexture );
-
-		this.backend.copyFramebufferToTexture( framebufferTexture, renderContext );
-
-	}
-
-	readRenderTargetPixelsAsync( renderTarget, x, y, width, height ) {
-
-		return this.backend.copyTextureToBuffer( renderTarget.texture, x, y, width, height );
-
-	}
-
-	_projectObject( object, camera, groupOrder, renderList ) {
-
-		if ( object.visible === false ) return;
-
-		const visible = object.layers.test( camera.layers );
-
-		if ( visible ) {
-
-			if ( object.isGroup ) {
-
-				groupOrder = object.renderOrder;
-
-			} else if ( object.isLOD ) {
-
-				if ( object.autoUpdate === true ) object.update( camera );
-
-			} else if ( object.isLight ) {
-
-				renderList.pushLight( object );
-
-			} else if ( object.isSprite ) {
-
-				if ( ! object.frustumCulled || _frustum.intersectsSprite( object ) ) {
-
-					if ( this.sortObjects === true ) {
-
-						_vector3.setFromMatrixPosition( object.matrixWorld ).applyMatrix4( _projScreenMatrix );
-
-					}
-
-					const geometry = object.geometry;
-					const material = object.material;
-
-					if ( material.visible ) {
-
-						renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
-
-					}
-
-				}
-
-			} else if ( object.isLineLoop ) {
-
-				console.error( 'THREE.Renderer: Objects of type THREE.LineLoop are not supported. Please use THREE.Line or THREE.LineSegments.' );
-
-			} else if ( object.isMesh || object.isLine || object.isPoints ) {
-
-				if ( ! object.frustumCulled || _frustum.intersectsObject( object ) ) {
-
-					const geometry = object.geometry;
-					const material = object.material;
-
-					if ( this.sortObjects === true ) {
-
-						if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
-
-						_vector3
-							.copy( geometry.boundingSphere.center )
-							.applyMatrix4( object.matrixWorld )
-							.applyMatrix4( _projScreenMatrix );
-
-					}
-
-					if ( Array.isArray( material ) ) {
-
-						const groups = geometry.groups;
-
-						for ( let i = 0, l = groups.length; i < l; i ++ ) {
-
-							const group = groups[ i ];
-							const groupMaterial = material[ group.materialIndex ];
-
-							if ( groupMaterial && groupMaterial.visible ) {
-
-								renderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
-
-							}
-
-						}
-
-					} else if ( material.visible ) {
-
-						renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
-
-					}
-
-				}
-
-			}
-
-		}
-
-		const children = object.children;
-
-		for ( let i = 0, l = children.length; i < l; i ++ ) {
-
-			this._projectObject( children[ i ], camera, groupOrder, renderList );
-
-		}
-
-	}
-
-	_renderObjects( renderList, camera, scene, lightsNode ) {
-
-		// process renderable objects
-
-		for ( let i = 0, il = renderList.length; i < il; i ++ ) {
-
-			const renderItem = renderList[ i ];
-
-			// @TODO: Add support for multiple materials per object. This will require to extract
-			// the material from the renderItem object and pass it with its group data to renderObject().
-
-			const { object, geometry, material, group } = renderItem;
-
-			if ( camera.isArrayCamera ) {
-
-				const cameras = camera.cameras;
-
-				for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
-
-					const camera2 = cameras[ j ];
-
-					if ( object.layers.test( camera2.layers ) ) {
-
-						const vp = camera2.viewport;
-						const minDepth = ( vp.minDepth === undefined ) ? 0 : vp.minDepth;
-						const maxDepth = ( vp.maxDepth === undefined ) ? 1 : vp.maxDepth;
-
-						const viewportValue = this._currentRenderContext.viewportValue;
-						viewportValue.copy( vp ).multiplyScalar( this._pixelRatio ).floor();
-						viewportValue.minDepth = minDepth;
-						viewportValue.maxDepth = maxDepth;
-
-						this.backend.updateViewport( this._currentRenderContext );
-
-						this._currentRenderObjectFunction( object, scene, camera2, geometry, material, group, lightsNode );
-
-					}
-
-				}
-
-			} else {
-
-				this._currentRenderObjectFunction( object, scene, camera, geometry, material, group, lightsNode );
-
-			}
-
-		}
-
-	}
-
-	renderObject( object, scene, camera, geometry, material, group, lightsNode ) {
-
-		let overridePositionNode;
-		let overrideFragmentNode;
-
-		//
-
-		object.onBeforeRender( this, scene, camera, geometry, material, group );
-
-		material.onBeforeRender( this, scene, camera, geometry, material, group );
-
-		//
-
-		if ( scene.overrideMaterial !== null ) {
-
-			const overrideMaterial = scene.overrideMaterial;
-
-			if ( material.positionNode && material.positionNode.isNode ) {
-
-				overridePositionNode = overrideMaterial.positionNode;
-
-				overrideMaterial.positionNode = material.positionNode;
-
-			}
-
-			if ( overrideMaterial.isShadowNodeMaterial ) {
-
-				overrideMaterial.side = material.shadowSide === null ? material.side : material.shadowSide;
-
-				if ( material.shadowNode && material.shadowNode.isNode ) {
-
-					overrideFragmentNode = overrideMaterial.fragmentNode;
-					overrideMaterial.fragmentNode = material.shadowNode;
-
-				}
-
-				if ( this.localClippingEnabled ) {
-
-					if ( material.clipShadows ) {
-
-						if ( overrideMaterial.clippingPlanes !== material.clippingPlanes ) {
-
-							overrideMaterial.clippingPlanes = material.clippingPlanes;
-							overrideMaterial.needsUpdate = true;
-
-						}
-
-						if ( overrideMaterial.clipIntersection !== material.clipIntersection ) {
-
-							overrideMaterial.clipIntersection = material.clipIntersection;
-
-						}
-
-					} else if ( Array.isArray( overrideMaterial.clippingPlanes ) ) {
-
-						overrideMaterial.clippingPlanes = null;
-						overrideMaterial.needsUpdate = true;
-
-					}
-
-				}
-
-			}
-
-			material = overrideMaterial;
-
-		}
-
-		//
-
-		if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
-
-			material.side = BackSide;
-			this._handleObjectFunction( object, material, scene, camera, lightsNode, 'backSide' ); // create backSide pass id
-
-			material.side = FrontSide;
-			this._handleObjectFunction( object, material, scene, camera, lightsNode ); // use default pass id
-
-			material.side = DoubleSide;
-
-		} else {
-
-			this._handleObjectFunction( object, material, scene, camera, lightsNode );
-
-		}
-
-		//
-
-		if ( overridePositionNode !== undefined ) {
-
-			scene.overrideMaterial.positionNode = overridePositionNode;
-
-		}
-
-		if ( overrideFragmentNode !== undefined ) {
-
-			scene.overrideMaterial.fragmentNode = overrideFragmentNode;
-
-		}
-
-		//
-
-		object.onAfterRender( this, scene, camera, geometry, material, group );
-
-	}
-
-	_renderObjectDirect( object, material, scene, camera, lightsNode, passId ) {
-
-		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
-
-		//
-
-		this._nodes.updateBefore( renderObject );
-
-		//
-
-		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
-		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
-
-		//
-
-		this._nodes.updateForRender( renderObject );
-		this._geometries.updateForRender( renderObject );
-		this._bindings.updateForRender( renderObject );
-		this._pipelines.updateForRender( renderObject );
-
-		//
-
-		this.backend.draw( renderObject, this.info );
-
-	}
-
-	_createObjectPipeline( object, material, scene, camera, lightsNode, passId ) {
-
-		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
-
-		//
-
-		this._nodes.updateBefore( renderObject );
-
-		//
-
-		this._nodes.updateForRender( renderObject );
-		this._geometries.updateForRender( renderObject );
-		this._bindings.updateForRender( renderObject );
-
-		this._pipelines.getForRender( renderObject, this._compilationPromises );
-
-	}
-
-	get compute() {
-
-		return this.computeAsync;
-
-	}
-
-	get compile() {
-
-		return this.compileAsync;
-
-	}
-
-}
-
-export default Renderer;
+import Animation from './Animation.js';
+import RenderObjects from './RenderObjects.js';
+import Attributes from './Attributes.js';
+import Geometries from './Geometries.js';
+import Info from './Info.js';
+import Pipelines from './Pipelines.js';
+import Bindings from './Bindings.js';
+import RenderLists from './RenderLists.js';
+import RenderContexts from './RenderContexts.js';
+import Textures from './Textures.js';
+import Background from './Background.js';
+import Nodes from './nodes/Nodes.js';
+import Color4 from './Color4.js';
+import ClippingContext from './ClippingContext.js';
+import { Scene, Frustum, Matrix4, Vector2, Vector3, Vector4, DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping } from 'three';
+
+const _scene = new Scene();
+const _drawingBufferSize = new Vector2();
+const _screen = new Vector4();
+const _frustum = new Frustum();
+const _projScreenMatrix = new Matrix4();
+const _vector3 = new Vector3();
+
+class Renderer {
+
+	constructor( backend, parameters = {} ) {
+
+		this.isRenderer = true;
+
+		//
+
+		const {
+			logarithmicDepthBuffer = false,
+			alpha = true
+		} = parameters;
+
+		// public
+
+		this.domElement = backend.getDomElement();
+
+		this.backend = backend;
+
+		this.autoClear = true;
+		this.autoClearColor = true;
+		this.autoClearDepth = true;
+		this.autoClearStencil = true;
+
+		this.alpha = alpha;
+
+		this.logarithmicDepthBuffer = logarithmicDepthBuffer;
+
+		this.outputColorSpace = SRGBColorSpace;
+
+		this.toneMapping = NoToneMapping;
+		this.toneMappingExposure = 1.0;
+
+		this.sortObjects = true;
+
+		this.depth = true;
+		this.stencil = true;
+
+		this.clippingPlanes = [];
+
+		this.info = new Info();
+
+		// internals
+
+		this._pixelRatio = 1;
+		this._width = this.domElement.width;
+		this._height = this.domElement.height;
+
+		this._viewport = new Vector4( 0, 0, this._width, this._height );
+		this._scissor = new Vector4( 0, 0, this._width, this._height );
+		this._scissorTest = false;
+
+		this._attributes = null;
+		this._geometries = null;
+		this._nodes = null;
+		this._animation = null;
+		this._bindings = null;
+		this._objects = null;
+		this._pipelines = null;
+		this._renderLists = null;
+		this._renderContexts = null;
+		this._textures = null;
+		this._background = null;
+
+		this._currentRenderContext = null;
+
+		this._opaqueSort = null;
+		this._transparentSort = null;
+
+
+		const alphaClear = this.alpha === true ? 0 : 1;
+
+		this._clearColor = new Color4( 0, 0, 0, alphaClear );
+		this._clearDepth = 1;
+		this._clearStencil = 0;
+
+		this._renderTarget = null;
+		this._activeCubeFace = 0;
+		this._activeMipmapLevel = 0;
+
+		this._renderObjectFunction = null;
+		this._currentRenderObjectFunction = null;
+
+		this._handleObjectFunction = this._renderObjectDirect;
+
+		this._initialized = false;
+		this._initPromise = null;
+
+		this._compilationPromises = null;
+
+		// backwards compatibility
+
+		this.shadowMap = {
+			enabled: false,
+			type: null
+		};
+
+		this.xr = {
+			enabled: false
+		};
+
+	}
+
+	async init() {
+
+		if ( this._initialized ) {
+
+			throw new Error( 'Renderer: Backend has already been initialized.' );
+
+		}
+
+		if ( this._initPromise !== null ) {
+
+			return this._initPromise;
+
+		}
+
+		this._initPromise = new Promise( async ( resolve, reject ) => {
+
+			const backend = this.backend;
+
+			try {
+
+				await backend.init( this );
+
+			} catch ( error ) {
+
+				reject( error );
+				return;
+
+			}
+
+			this._nodes = new Nodes( this, backend );
+			this._animation = new Animation( this._nodes, this.info );
+			this._attributes = new Attributes( backend );
+			this._background = new Background( this, this._nodes );
+			this._geometries = new Geometries( this._attributes, this.info );
+			this._textures = new Textures( this, backend, this.info );
+			this._pipelines = new Pipelines( backend, this._nodes );
+			this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this.info );
+			this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._bindings, this.info );
+			this._renderLists = new RenderLists();
+			this._renderContexts = new RenderContexts();
+
+			//
+
+			this._initialized = true;
+
+			resolve();
+
+		} );
+
+		return this._initPromise;
+
+	}
+
+	get coordinateSystem() {
+
+		return this.backend.coordinateSystem;
+
+	}
+
+	async compileAsync( scene, camera, targetScene = null ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		// preserve render tree
+
+		const nodeFrame = this._nodes.nodeFrame;
+
+		const previousRenderId = nodeFrame.renderId;
+		const previousRenderContext = this._currentRenderContext;
+		const previousRenderObjectFunction = this._currentRenderObjectFunction;
+		const previousCompilationPromises = this._compilationPromises;
+
+		//
+
+		const sceneRef = ( scene.isScene === true ) ? scene : _scene;
+
+		if ( targetScene === null ) targetScene = scene;
+
+		const renderTarget = this._renderTarget;
+		const renderContext = this._renderContexts.get( targetScene, camera, renderTarget );
+		const activeMipmapLevel = this._activeMipmapLevel;
+
+		const compilationPromises = [];
+
+		this._currentRenderContext = renderContext;
+		this._currentRenderObjectFunction = this.renderObject;
+
+		this._handleObjectFunction = this._createObjectPipeline;
+
+		this._compilationPromises = compilationPromises;
+
+		nodeFrame.renderId ++;
+
+		//
+
+		nodeFrame.update();
+
+		//
+
+		renderContext.depth = this.depth;
+		renderContext.stencil = this.stencil;
+
+		if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
+		renderContext.clippingContext.updateGlobal( this, camera );
+
+		//
+
+		sceneRef.onBeforeRender( this, scene, camera, renderTarget );
+
+		//
+
+		const renderList = this._renderLists.get( scene, camera );
+		renderList.begin();
+
+		this._projectObject( scene, camera, 0, renderList );
+
+		// include lights from target scene
+		if ( targetScene !== scene ) {
+
+			targetScene.traverseVisible( function ( object ) {
+
+				if ( object.isLight && object.layers.test( camera.layers ) ) {
+
+					renderList.pushLight( object );
+
+				}
+
+			} );
+
+		}
+
+		renderList.finish();
+
+		//
+
+		if ( renderTarget !== null ) {
+
+			this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
+
+			const renderTargetData = this._textures.get( renderTarget );
+
+			renderContext.textures = renderTargetData.textures;
+			renderContext.depthTexture = renderTargetData.depthTexture;
+
+		} else {
+
+			renderContext.textures = null;
+			renderContext.depthTexture = null;
+
+		}
+
+		//
+
+		this._nodes.updateScene( sceneRef );
+
+		//
+
+		this._background.update( sceneRef, renderList, renderContext );
+
+		// process render lists
+
+		const opaqueObjects = renderList.opaque;
+		const transparentObjects = renderList.transparent;
+		const lightsNode = renderList.lightsNode;
+
+		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
+		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
+
+		// restore render tree
+
+		nodeFrame.renderId = previousRenderId;
+
+		this._currentRenderContext = previousRenderContext;
+		this._currentRenderObjectFunction = previousRenderObjectFunction;
+		this._compilationPromises = previousCompilationPromises;
+
+		this._handleObjectFunction = this._renderObjectDirect;
+
+		// wait for all promises setup by backends awaiting compilation/linking/pipeline creation to complete
+
+		await Promise.all( compilationPromises );
+
+	}
+
+	async renderAsync( scene, camera ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		const renderContext = this._renderContext( scene, camera );
+
+		await this.backend.resolveTimestampAsync( renderContext, 'render' );
+
+	}
+
+	render( scene, camera ) {
+
+		if ( this._initialized === false ) {
+
+			console.error( 'THREE.Renderer: .render() called before the backend is initialized. Try using .renderAsync() instead.' );
+			return;
+
+		}
+
+		this._renderContext( scene, camera );
+
+	}
+
+	_renderContext( scene, camera ) {
+
+		// preserve render tree
+
+		const nodeFrame = this._nodes.nodeFrame;
+
+		const previousRenderId = nodeFrame.renderId;
+		const previousRenderContext = this._currentRenderContext;
+		const previousRenderObjectFunction = this._currentRenderObjectFunction;
+
+		//
+
+		const sceneRef = ( scene.isScene === true ) ? scene : _scene;
+
+		const renderTarget = this._renderTarget;
+		const renderContext = this._renderContexts.get( scene, camera, renderTarget );
+		const activeCubeFace = this._activeCubeFace;
+		const activeMipmapLevel = this._activeMipmapLevel;
+
+		this._currentRenderContext = renderContext;
+		this._currentRenderObjectFunction = this._renderObjectFunction || this.renderObject;
+
+		//
+
+		this.info.calls ++;
+		this.info.render.calls ++;
+
+		nodeFrame.renderId = this.info.calls;
+
+		//
+
+		const coordinateSystem = this.coordinateSystem;
+
+		if ( camera.coordinateSystem !== coordinateSystem ) {
+
+			camera.coordinateSystem = coordinateSystem;
+
+			camera.updateProjectionMatrix();
+
+		}
+
+		//
+
+		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
+
+		if ( this.info.autoReset === true ) this.info.reset();
+
+		//
+
+		let viewport = this._viewport;
+		let scissor = this._scissor;
+		let pixelRatio = this._pixelRatio;
+
+		if ( renderTarget !== null ) {
+
+			viewport = renderTarget.viewport;
+			scissor = renderTarget.scissor;
+			pixelRatio = 1;
+
+		}
+
+		this.getDrawingBufferSize( _drawingBufferSize );
+
+		_screen.set( 0, 0, _drawingBufferSize.width, _drawingBufferSize.height );
+
+		const minDepth = ( viewport.minDepth === undefined ) ? 0 : viewport.minDepth;
+		const maxDepth = ( viewport.maxDepth === undefined ) ? 1 : viewport.maxDepth;
+
+		renderContext.viewportValue.copy( viewport ).multiplyScalar( pixelRatio ).floor();
+		renderContext.viewportValue.width >>= activeMipmapLevel;
+		renderContext.viewportValue.height >>= activeMipmapLevel;
+		renderContext.viewportValue.minDepth = minDepth;
+		renderContext.viewportValue.maxDepth = maxDepth;
+		renderContext.viewport = renderContext.viewportValue.equals( _screen ) === false;
+
+		renderContext.scissorValue.copy( scissor ).multiplyScalar( pixelRatio ).floor();
+		renderContext.scissor = this._scissorTest && renderContext.scissorValue.equals( _screen ) === false;
+		renderContext.scissorValue.width >>= activeMipmapLevel;
+		renderContext.scissorValue.height >>= activeMipmapLevel;
+
+		if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
+		renderContext.clippingContext.updateGlobal( this, camera );
+
+		//
+
+		sceneRef.onBeforeRender( this, scene, camera, renderTarget );
+
+		//
+
+		_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
+		_frustum.setFromProjectionMatrix( _projScreenMatrix, coordinateSystem );
+
+		const renderList = this._renderLists.get( scene, camera );
+		renderList.begin();
+
+		this._projectObject( scene, camera, 0, renderList );
+
+		renderList.finish();
+
+		if ( this.sortObjects === true ) {
+
+			renderList.sort( this._opaqueSort, this._transparentSort );
+
+		}
+
+		//
+
+		if ( renderTarget !== null ) {
+
+			this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
+
+			const renderTargetData = this._textures.get( renderTarget );
+
+			renderContext.textures = renderTargetData.textures;
+			renderContext.depthTexture = renderTargetData.depthTexture;
+			renderContext.width = renderTargetData.width;
+			renderContext.height = renderTargetData.height;
+			renderContext.renderTarget = renderTarget;
+			renderContext.depth = renderTarget.depthBuffer;
+			renderContext.stencil = renderTarget.stencilBuffer;
+
+		} else {
+
+			renderContext.textures = null;
+			renderContext.depthTexture = null;
+			renderContext.width = this.domElement.width;
+			renderContext.height = this.domElement.height;
+			renderContext.depth = this.depth;
+			renderContext.stencil = this.stencil;
+
+		}
+
+		renderContext.width >>= activeMipmapLevel;
+		renderContext.height >>= activeMipmapLevel;
+		renderContext.activeCubeFace = activeCubeFace;
+		renderContext.activeMipmapLevel = activeMipmapLevel;
+		renderContext.occlusionQueryCount = renderList.occlusionQueryCount;
+
+		//
+
+		this._nodes.updateScene( sceneRef );
+
+		//
+
+		this._background.update( sceneRef, renderList, renderContext );
+
+		//
+
+		this.backend.beginRender( renderContext );
+
+		// process render lists
+
+		const opaqueObjects = renderList.opaque;
+		const transparentObjects = renderList.transparent;
+		const lightsNode = renderList.lightsNode;
+
+		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
+		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
+
+		// finish render pass
+
+		this.backend.finishRender( renderContext );
+
+		// restore render tree
+
+		nodeFrame.renderId = previousRenderId;
+
+		this._currentRenderContext = previousRenderContext;
+		this._currentRenderObjectFunction = previousRenderObjectFunction;
+
+		//
+
+		sceneRef.onAfterRender( this, scene, camera, renderTarget );
+
+		//
+
+		return renderContext;
+
+	}
+
+	getMaxAnisotropy() {
+
+		return this.backend.getMaxAnisotropy();
+
+	}
+
+	getActiveCubeFace() {
+
+		return this._activeCubeFace;
+
+	}
+
+	getActiveMipmapLevel() {
+
+		return this._activeMipmapLevel;
+
+	}
+
+	async setAnimationLoop( callback ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		this._animation.setAnimationLoop( callback );
+
+	}
+
+	getArrayBuffer( attribute ) { // @deprecated, r155
+
+		console.warn( 'THREE.Renderer: getArrayBuffer() is deprecated. Use getArrayBufferAsync() instead.' );
+
+		return this.getArrayBufferAsync( attribute );
+
+	}
+
+	async getArrayBufferAsync( attribute ) {
+
+		return await this.backend.getArrayBufferAsync( attribute );
+
+	}
+
+	getContext() {
+
+		return this.backend.getContext();
+
+	}
+
+	getPixelRatio() {
+
+		return this._pixelRatio;
+
+	}
+
+	getDrawingBufferSize( target ) {
+
+		return target.set( this._width * this._pixelRatio, this._height * this._pixelRatio ).floor();
+
+	}
+
+	getSize( target ) {
+
+		return target.set( this._width, this._height );
+
+	}
+
+	setPixelRatio( value = 1 ) {
+
+		this._pixelRatio = value;
+
+		this.setSize( this._width, this._height, false );
+
+	}
+
+	setDrawingBufferSize( width, height, pixelRatio ) {
+
+		this._width = width;
+		this._height = height;
+
+		this._pixelRatio = pixelRatio;
+
+		this.domElement.width = Math.floor( width * pixelRatio );
+		this.domElement.height = Math.floor( height * pixelRatio );
+
+		this.setViewport( 0, 0, width, height );
+
+		if ( this._initialized ) this.backend.updateSize();
+
+	}
+
+	setSize( width, height, updateStyle = true ) {
+
+		this._width = width;
+		this._height = height;
+
+		this.domElement.width = Math.floor( width * this._pixelRatio );
+		this.domElement.height = Math.floor( height * this._pixelRatio );
+
+		if ( updateStyle === true ) {
+
+			this.domElement.style.width = width + 'px';
+			this.domElement.style.height = height + 'px';
+
+		}
+
+		this.setViewport( 0, 0, width, height );
+
+		if ( this._initialized ) this.backend.updateSize();
+
+	}
+
+	setOpaqueSort( method ) {
+
+		this._opaqueSort = method;
+
+	}
+
+	setTransparentSort( method ) {
+
+		this._transparentSort = method;
+
+	}
+
+	getScissor( target ) {
+
+		const scissor = this._scissor;
+
+		target.x = scissor.x;
+		target.y = scissor.y;
+		target.width = scissor.width;
+		target.height = scissor.height;
+
+		return target;
+
+	}
+
+	setScissor( x, y, width, height ) {
+
+		const scissor = this._scissor;
+
+		if ( x.isVector4 ) {
+
+			scissor.copy( x );
+
+		} else {
+
+			scissor.set( x, y, width, height );
+
+		}
+
+	}
+
+	getScissorTest() {
+
+		return this._scissorTest;
+
+	}
+
+	setScissorTest( boolean ) {
+
+		this._scissorTest = boolean;
+
+		this.backend.setScissorTest( boolean );
+
+	}
+
+	getViewport( target ) {
+
+		return target.copy( this._viewport );
+
+	}
+
+	setViewport( x, y, width, height, minDepth = 0, maxDepth = 1 ) {
+
+		const viewport = this._viewport;
+
+		if ( x.isVector4 ) {
+
+			viewport.copy( x );
+
+		} else {
+
+			viewport.set( x, y, width, height );
+
+		}
+
+		viewport.minDepth = minDepth;
+		viewport.maxDepth = maxDepth;
+
+	}
+
+	getClearColor( target ) {
+
+		return target.copy( this._clearColor );
+
+	}
+
+	setClearColor( color, alpha = 1 ) {
+
+		this._clearColor.set( color );
+		this._clearColor.a = alpha;
+
+	}
+
+	getClearAlpha() {
+
+		return this._clearColor.a;
+
+	}
+
+	setClearAlpha( alpha ) {
+
+		this._clearColor.a = alpha;
+
+	}
+
+	getClearDepth() {
+
+		return this._clearDepth;
+
+	}
+
+	setClearDepth( depth ) {
+
+		this._clearDepth = depth;
+
+	}
+
+	getClearStencil() {
+
+		return this._clearStencil;
+
+	}
+
+	setClearStencil( stencil ) {
+
+		this._clearStencil = stencil;
+
+	}
+
+	isOccluded( object ) {
+
+		const renderContext = this._currentRenderContext;
+
+		return renderContext && this.backend.isOccluded( renderContext, object );
+
+	}
+
+	clear( color = true, depth = true, stencil = true ) {
+
+		let renderTargetData = null;
+		const renderTarget = this._renderTarget;
+
+		if ( renderTarget !== null ) {
+
+			this._textures.updateRenderTarget( renderTarget );
+
+			renderTargetData = this._textures.get( renderTarget );
+
+		}
+
+		this.backend.clear( color, depth, stencil, renderTargetData );
+
+	}
+
+	clearColor() {
+
+		return this.clear( true, false, false );
+
+	}
+
+	clearDepth() {
+
+		return this.clear( false, true, false );
+
+	}
+
+	clearStencil() {
+
+		return this.clear( false, false, true );
+
+	}
+
+	async clearAsync( color = true, depth = true, stencil = true ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		this.clear( color, depth, stencil );
+
+	}
+
+	clearColorAsync() {
+
+		return this.clearAsync( true, false, false );
+
+	}
+
+	clearDepthAsync() {
+
+		return this.clearAsync( false, true, false );
+
+	}
+
+	clearStencilAsync() {
+
+		return this.clearAsync( false, false, true );
+
+	}
+
+	get currentColorSpace() {
+
+		const renderTarget = this._renderTarget;
+
+		if ( renderTarget !== null ) {
+
+			const texture = renderTarget.texture;
+
+			return ( Array.isArray( texture ) ? texture[ 0 ] : texture ).colorSpace;
+
+		}
+
+		return this.outputColorSpace;
+
+	}
+
+	dispose() {
+
+		this.info.dispose();
+
+		this._animation.dispose();
+		this._objects.dispose();
+		this._pipelines.dispose();
+		this._nodes.dispose();
+		this._bindings.dispose();
+		this._renderLists.dispose();
+		this._renderContexts.dispose();
+		this._textures.dispose();
+
+		this.setRenderTarget( null );
+		this.setAnimationLoop( null );
+
+	}
+
+	setRenderTarget( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
+
+		this._renderTarget = renderTarget;
+		this._activeCubeFace = activeCubeFace;
+		this._activeMipmapLevel = activeMipmapLevel;
+
+	}
+
+	getRenderTarget() {
+
+		return this._renderTarget;
+
+	}
+
+	setRenderObjectFunction( renderObjectFunction ) {
+
+		this._renderObjectFunction = renderObjectFunction;
+
+	}
+
+	getRenderObjectFunction() {
+
+		return this._renderObjectFunction;
+
+	}
+
+	async computeAsync( computeNodes ) {
+
+		if ( this._initialized === false ) await this.init();
+
+		const nodeFrame = this._nodes.nodeFrame;
+
+		const previousRenderId = nodeFrame.renderId;
+
+		//
+
+		this.info.calls ++;
+		this.info.compute.calls ++;
+		this.info.compute.computeCalls ++;
+
+		nodeFrame.renderId = this.info.calls;
+
+		//
+		if ( this.info.autoReset === true ) this.info.resetCompute();
+
+		const backend = this.backend;
+		const pipelines = this._pipelines;
+		const bindings = this._bindings;
+		const nodes = this._nodes;
+		const computeList = Array.isArray( computeNodes ) ? computeNodes : [ computeNodes ];
+
+		if ( computeList[ 0 ] === undefined || computeList[ 0 ].isComputeNode !== true ) {
+
+			throw new Error( 'THREE.Renderer: .compute() expects a ComputeNode.' );
+
+		}
+
+		backend.beginCompute( computeNodes );
+
+		for ( const computeNode of computeList ) {
+
+			// onInit
+
+			if ( pipelines.has( computeNode ) === false ) {
+
+				const dispose = () => {
+
+					computeNode.removeEventListener( 'dispose', dispose );
+
+					pipelines.delete( computeNode );
+					bindings.delete( computeNode );
+					nodes.delete( computeNode );
+
+				};
+
+				computeNode.addEventListener( 'dispose', dispose );
+
+				//
+
+				computeNode.onInit( { renderer: this } );
+
+			}
+
+			nodes.updateForCompute( computeNode );
+			bindings.updateForCompute( computeNode );
+
+			const computeBindings = bindings.getForCompute( computeNode );
+			const computePipeline = pipelines.getForCompute( computeNode, computeBindings );
+
+			backend.compute( computeNodes, computeNode, computeBindings, computePipeline );
+
+		}
+
+		backend.finishCompute( computeNodes );
+
+		await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
+
+		//
+
+		nodeFrame.renderId = previousRenderId;
+
+	}
+
+	hasFeatureAsync( name ) {
+
+		return this.backend.hasFeatureAsync( name );
+
+	}
+
+	hasFeature( name ) {
+
+		return this.backend.hasFeature( name );
+
+	}
+
+	copyFramebufferToTexture( framebufferTexture ) {
+
+		const renderContext = this._currentRenderContext;
+
+		this._textures.updateTexture( framebufferTexture );
+
+		this.backend.copyFramebufferToTexture( framebufferTexture, renderContext );
+
+	}
+
+	readRenderTargetPixelsAsync( renderTarget, x, y, width, height ) {
+
+		return this.backend.copyTextureToBuffer( renderTarget.texture, x, y, width, height );
+
+	}
+
+	_projectObject( object, camera, groupOrder, renderList ) {
+
+		if ( object.visible === false ) return;
+
+		const visible = object.layers.test( camera.layers );
+
+		if ( visible ) {
+
+			if ( object.isGroup ) {
+
+				groupOrder = object.renderOrder;
+
+			} else if ( object.isLOD ) {
+
+				if ( object.autoUpdate === true ) object.update( camera );
+
+			} else if ( object.isLight ) {
+
+				renderList.pushLight( object );
+
+			} else if ( object.isSprite ) {
+
+				if ( ! object.frustumCulled || _frustum.intersectsSprite( object ) ) {
+
+					if ( this.sortObjects === true ) {
+
+						_vector3.setFromMatrixPosition( object.matrixWorld ).applyMatrix4( _projScreenMatrix );
+
+					}
+
+					const geometry = object.geometry;
+					const material = object.material;
+
+					if ( material.visible ) {
+
+						renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
+
+					}
+
+				}
+
+			} else if ( object.isLineLoop ) {
+
+				console.error( 'THREE.Renderer: Objects of type THREE.LineLoop are not supported. Please use THREE.Line or THREE.LineSegments.' );
+
+			} else if ( object.isMesh || object.isLine || object.isPoints ) {
+
+				if ( ! object.frustumCulled || _frustum.intersectsObject( object ) ) {
+
+					const geometry = object.geometry;
+					const material = object.material;
+
+					if ( this.sortObjects === true ) {
+
+						if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
+
+						_vector3
+							.copy( geometry.boundingSphere.center )
+							.applyMatrix4( object.matrixWorld )
+							.applyMatrix4( _projScreenMatrix );
+
+					}
+
+					if ( Array.isArray( material ) ) {
+
+						const groups = geometry.groups;
+
+						for ( let i = 0, l = groups.length; i < l; i ++ ) {
+
+							const group = groups[ i ];
+							const groupMaterial = material[ group.materialIndex ];
+
+							if ( groupMaterial && groupMaterial.visible ) {
+
+								renderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
+
+							}
+
+						}
+
+					} else if ( material.visible ) {
+
+						renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
+
+					}
+
+				}
+
+			}
+
+		}
+
+		const children = object.children;
+
+		for ( let i = 0, l = children.length; i < l; i ++ ) {
+
+			this._projectObject( children[ i ], camera, groupOrder, renderList );
+
+		}
+
+	}
+
+	_renderObjects( renderList, camera, scene, lightsNode ) {
+
+		// process renderable objects
+
+		for ( let i = 0, il = renderList.length; i < il; i ++ ) {
+
+			const renderItem = renderList[ i ];
+
+			// @TODO: Add support for multiple materials per object. This will require to extract
+			// the material from the renderItem object and pass it with its group data to renderObject().
+
+			const { object, geometry, material, group } = renderItem;
+
+			if ( camera.isArrayCamera ) {
+
+				const cameras = camera.cameras;
+
+				for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
+
+					const camera2 = cameras[ j ];
+
+					if ( object.layers.test( camera2.layers ) ) {
+
+						const vp = camera2.viewport;
+						const minDepth = ( vp.minDepth === undefined ) ? 0 : vp.minDepth;
+						const maxDepth = ( vp.maxDepth === undefined ) ? 1 : vp.maxDepth;
+
+						const viewportValue = this._currentRenderContext.viewportValue;
+						viewportValue.copy( vp ).multiplyScalar( this._pixelRatio ).floor();
+						viewportValue.minDepth = minDepth;
+						viewportValue.maxDepth = maxDepth;
+
+						this.backend.updateViewport( this._currentRenderContext );
+
+						this._currentRenderObjectFunction( object, scene, camera2, geometry, material, group, lightsNode );
+
+					}
+
+				}
+
+			} else {
+
+				this._currentRenderObjectFunction( object, scene, camera, geometry, material, group, lightsNode );
+
+			}
+
+		}
+
+	}
+
+	renderObject( object, scene, camera, geometry, material, group, lightsNode ) {
+
+		let overridePositionNode;
+		let overrideFragmentNode;
+
+		//
+
+		object.onBeforeRender( this, scene, camera, geometry, material, group );
+
+		material.onBeforeRender( this, scene, camera, geometry, material, group );
+
+		//
+
+		if ( scene.overrideMaterial !== null ) {
+
+			const overrideMaterial = scene.overrideMaterial;
+
+			if ( material.positionNode && material.positionNode.isNode ) {
+
+				overridePositionNode = overrideMaterial.positionNode;
+
+				overrideMaterial.positionNode = material.positionNode;
+
+			}
+
+			if ( overrideMaterial.isShadowNodeMaterial ) {
+
+				overrideMaterial.side = material.shadowSide === null ? material.side : material.shadowSide;
+
+				if ( material.shadowNode && material.shadowNode.isNode ) {
+
+					overrideFragmentNode = overrideMaterial.fragmentNode;
+					overrideMaterial.fragmentNode = material.shadowNode;
+
+				}
+
+				if ( this.localClippingEnabled ) {
+
+					if ( material.clipShadows ) {
+
+						if ( overrideMaterial.clippingPlanes !== material.clippingPlanes ) {
+
+							overrideMaterial.clippingPlanes = material.clippingPlanes;
+							overrideMaterial.needsUpdate = true;
+
+						}
+
+						if ( overrideMaterial.clipIntersection !== material.clipIntersection ) {
+
+							overrideMaterial.clipIntersection = material.clipIntersection;
+
+						}
+
+					} else if ( Array.isArray( overrideMaterial.clippingPlanes ) ) {
+
+						overrideMaterial.clippingPlanes = null;
+						overrideMaterial.needsUpdate = true;
+
+					}
+
+				}
+
+			}
+
+			material = overrideMaterial;
+
+		}
+
+		//
+
+		if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
+
+			material.side = BackSide;
+			this._handleObjectFunction( object, material, scene, camera, lightsNode, 'backSide' ); // create backSide pass id
+
+			material.side = FrontSide;
+			this._handleObjectFunction( object, material, scene, camera, lightsNode ); // use default pass id
+
+			material.side = DoubleSide;
+
+		} else {
+
+			this._handleObjectFunction( object, material, scene, camera, lightsNode );
+
+		}
+
+		//
+
+		if ( overridePositionNode !== undefined ) {
+
+			scene.overrideMaterial.positionNode = overridePositionNode;
+
+		}
+
+		if ( overrideFragmentNode !== undefined ) {
+
+			scene.overrideMaterial.fragmentNode = overrideFragmentNode;
+
+		}
+
+		//
+
+		object.onAfterRender( this, scene, camera, geometry, material, group );
+
+	}
+
+	_renderObjectDirect( object, material, scene, camera, lightsNode, passId ) {
+
+		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
+
+		//
+
+		this._nodes.updateBefore( renderObject );
+
+		//
+
+		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
+		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
+
+		//
+
+		this._nodes.updateForRender( renderObject );
+		this._geometries.updateForRender( renderObject );
+		this._bindings.updateForRender( renderObject );
+		this._pipelines.updateForRender( renderObject );
+
+		//
+
+		this.backend.draw( renderObject, this.info );
+
+	}
+
+	_createObjectPipeline( object, material, scene, camera, lightsNode, passId ) {
+
+		const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
+
+		//
+
+		this._nodes.updateBefore( renderObject );
+
+		//
+
+		this._nodes.updateForRender( renderObject );
+		this._geometries.updateForRender( renderObject );
+		this._bindings.updateForRender( renderObject );
+
+		this._pipelines.getForRender( renderObject, this._compilationPromises );
+
+	}
+
+	get compute() {
+
+		return this.computeAsync;
+
+	}
+
+	get compile() {
+
+		return this.compileAsync;
+
+	}
+
+}
+
+export default Renderer;