super-three 0.147.1 → 0.154.0

package/examples/jsm/postprocessing/SAOPass.js

@@ -5,6 +5,7 @@ import {
 	DepthTexture,
 	DstAlphaFactor,
 	DstColorFactor,
+	HalfFloatType,
 	MeshDepthMaterial,
 	MeshNormalMaterial,
 	NearestFilter,
@@ -62,13 +63,14 @@ class SAOPass extends Pass {
 
 		this.resolution = new Vector2( resolution.x, resolution.y );
 
-		this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y );
+		this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, { type: HalfFloatType } );
 		this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
 		this.beautyRenderTarget = this.saoRenderTarget.clone();
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter
+			magFilter: NearestFilter,
+			type: HalfFloatType
 		} );
 		this.depthRenderTarget = this.normalRenderTarget.clone();
 
@@ -91,12 +93,6 @@ class SAOPass extends Pass {
 		this.normalMaterial = new MeshNormalMaterial();
 		this.normalMaterial.blending = NoBlending;
 
-		if ( SAOShader === undefined ) {
-
-			console.error( 'THREE.SAOPass relies on SAOShader' );
-
-		}
-
 		this.saoMaterial = new ShaderMaterial( {
 			defines: Object.assign( {}, SAOShader.defines ),
 			fragmentShader: SAOShader.fragmentShader,
@@ -114,12 +110,6 @@ class SAOPass extends Pass {
 		this.saoMaterial.uniforms[ 'cameraProjectionMatrix' ].value = this.camera.projectionMatrix;
 		this.saoMaterial.blending = NoBlending;
 
-		if ( DepthLimitedBlurShader === undefined ) {
-
-			console.error( 'THREE.SAOPass relies on DepthLimitedBlurShader' );
-
-		}
-
 		this.vBlurMaterial = new ShaderMaterial( {
 			uniforms: UniformsUtils.clone( DepthLimitedBlurShader.uniforms ),
 			defines: Object.assign( {}, DepthLimitedBlurShader.defines ),
@@ -146,12 +136,6 @@ class SAOPass extends Pass {
 		this.hBlurMaterial.uniforms[ 'size' ].value.set( this.resolution.x, this.resolution.y );
 		this.hBlurMaterial.blending = NoBlending;
 
-		if ( CopyShader === undefined ) {
-
-			console.error( 'THREE.SAOPass relies on CopyShader' );
-
-		}
-
 		this.materialCopy = new ShaderMaterial( {
 			uniforms: UniformsUtils.clone( CopyShader.uniforms ),
 			vertexShader: CopyShader.vertexShader,
@@ -169,12 +153,6 @@ class SAOPass extends Pass {
 		this.materialCopy.blendDstAlpha = ZeroFactor;
 		this.materialCopy.blendEquationAlpha = AddEquation;
 
-		if ( UnpackDepthRGBAShader === undefined ) {
-
-			console.error( 'THREE.SAOPass relies on UnpackDepthRGBAShader' );
-
-		}
-
 		this.depthCopy = new ShaderMaterial( {
 			uniforms: UniformsUtils.clone( UnpackDepthRGBAShader.uniforms ),
 			vertexShader: UnpackDepthRGBAShader.vertexShader,

package/examples/jsm/postprocessing/SMAAPass.js

@@ -1,4 +1,5 @@
 import {
+	HalfFloatType,
 	LinearFilter,
 	NearestFilter,
 	ShaderMaterial,
@@ -20,12 +21,14 @@ class SMAAPass extends Pass {
 		// render targets
 
 		this.edgesRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false
+			depthBuffer: false,
+			type: HalfFloatType
 		} );
 		this.edgesRT.texture.name = 'SMAAPass.edges';
 
 		this.weightsRT = new WebGLRenderTarget( width, height, {
-			depthBuffer: false
+			depthBuffer: false,
+			type: HalfFloatType
 		} );
 		this.weightsRT.texture.name = 'SMAAPass.weights';
 
@@ -67,12 +70,6 @@ class SMAAPass extends Pass {
 
 		// materials - pass 1
 
-		if ( SMAAEdgesShader === undefined ) {
-
-			console.error( 'THREE.SMAAPass relies on SMAAShader' );
-
-		}
-
 		this.uniformsEdges = UniformsUtils.clone( SMAAEdgesShader.uniforms );
 
 		this.uniformsEdges[ 'resolution' ].value.set( 1 / width, 1 / height );

package/examples/jsm/postprocessing/SSAARenderPass.js

@@ -1,6 +1,7 @@
 import {
 	AdditiveBlending,
 	Color,
+	HalfFloatType,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -35,8 +36,6 @@ class SSAARenderPass extends Pass {
 		this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
 		this._oldClearColor = new Color();
 
-		if ( CopyShader === undefined ) console.error( 'THREE.SSAARenderPass relies on CopyShader' );
-
 		const copyShader = CopyShader;
 		this.copyUniforms = UniformsUtils.clone( copyShader.uniforms );
 
@@ -45,9 +44,10 @@ class SSAARenderPass extends Pass {
 			vertexShader: copyShader.vertexShader,
 			fragmentShader: copyShader.fragmentShader,
 			transparent: true,
-			blending: AdditiveBlending,
 			depthTest: false,
-			depthWrite: false
+			depthWrite: false,
+			premultipliedAlpha: true,
+			blending: AdditiveBlending
 		} );
 
 		this.fsQuad = new FullScreenQuad( this.copyMaterial );
@@ -79,7 +79,7 @@ class SSAARenderPass extends Pass {
 
 		if ( ! this.sampleRenderTarget ) {
 
-			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height );
+			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType } );
 			this.sampleRenderTarget.texture.name = 'SSAARenderPass.sample';
 
 		}

package/examples/jsm/postprocessing/SSAOPass.js

@@ -7,6 +7,7 @@ import {
 	DstAlphaFactor,
 	DstColorFactor,
 	FloatType,
+	HalfFloatType,
 	MathUtils,
 	MeshNormalMaterial,
 	NearestFilter,
@@ -65,30 +66,25 @@ class SSAOPass extends Pass {
 		depthTexture.format = DepthStencilFormat;
 		depthTexture.type = UnsignedInt248Type;
 
-		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height );
+		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, { type: HalfFloatType } );
 
 		// normal render target with depth buffer
 
 		this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
+			type: HalfFloatType,
 			depthTexture: depthTexture
 		} );
 
 		// ssao render target
 
-		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height );
+		this.ssaoRenderTarget = new WebGLRenderTarget( this.width, this.height, { type: HalfFloatType } );
 
 		this.blurRenderTarget = this.ssaoRenderTarget.clone();
 
 		// ssao material
 
-		if ( SSAOShader === undefined ) {
-
-			console.error( 'THREE.SSAOPass: The pass relies on SSAOShader.' );
-
-		}
-
 		this.ssaoMaterial = new ShaderMaterial( {
 			defines: Object.assign( {}, SSAOShader.defines ),
 			uniforms: UniformsUtils.clone( SSAOShader.uniforms ),
@@ -377,12 +373,6 @@ class SSAOPass extends Pass {
 
 		const width = 4, height = 4;
 
-		if ( SimplexNoise === undefined ) {
-
-			console.error( 'THREE.SSAOPass: The pass relies on SimplexNoise.' );
-
-		}
-
 		const simplex = new SimplexNoise();
 
 		const size = width * height;

package/examples/jsm/postprocessing/SSRPass.js

@@ -162,6 +162,7 @@ class SSRPass extends Pass {
 		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
+			type: HalfFloatType,
 			depthTexture: depthTexture,
 			depthBuffer: true
 		} );
@@ -184,7 +185,8 @@ class SSRPass extends Pass {
 
 		this.metalnessRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
-			magFilter: NearestFilter
+			magFilter: NearestFilter,
+			type: HalfFloatType,
 		} );
 
 
@@ -202,12 +204,6 @@ class SSRPass extends Pass {
 
 		// ssr material
 
-		if ( SSRShader === undefined ) {
-
-			console.error( 'THREE.SSRPass: The pass relies on SSRShader.' );
-
-		}
-
 		this.ssrMaterial = new ShaderMaterial( {
 			defines: Object.assign( {}, SSRShader.defines, {
 				MAX_STEP: Math.sqrt( this.width * this.width + this.height * this.height )

package/examples/jsm/postprocessing/SavePass.js

@@ -1,4 +1,6 @@
 import {
+	HalfFloatType,
+	NoBlending,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
@@ -12,8 +14,6 @@ class SavePass extends Pass {
 
 		super();
 
-		if ( CopyShader === undefined ) console.error( 'THREE.SavePass relies on CopyShader' );
-
 		const shader = CopyShader;
 
 		this.textureID = 'tDiffuse';
@@ -24,7 +24,8 @@ class SavePass extends Pass {
 
 			uniforms: this.uniforms,
 			vertexShader: shader.vertexShader,
-			fragmentShader: shader.fragmentShader
+			fragmentShader: shader.fragmentShader,
+			blending: NoBlending
 
 		} );
 
@@ -32,7 +33,7 @@ class SavePass extends Pass {
 
 		if ( this.renderTarget === undefined ) {
 
-			this.renderTarget = new WebGLRenderTarget(); // will be resized later
+			this.renderTarget = new WebGLRenderTarget( 1, 1, { type: HalfFloatType } ); // will be resized later
 			this.renderTarget.texture.name = 'SavePass.rt';
 
 		}

package/examples/jsm/postprocessing/ShaderPass.js

@@ -24,6 +24,7 @@ class ShaderPass extends Pass {
 
 			this.material = new ShaderMaterial( {
 
+				name: ( shader.name !== undefined ) ? shader.name : 'unspecified',
 				defines: Object.assign( {}, shader.defines ),
 				uniforms: this.uniforms,
 				vertexShader: shader.vertexShader,

package/examples/jsm/postprocessing/TAARenderPass.js

@@ -1,4 +1,5 @@
 import {
+	HalfFloatType,
 	WebGLRenderTarget
 } from 'three';
 import { SSAARenderPass } from './SSAARenderPass.js';
@@ -23,6 +24,7 @@ class TAARenderPass extends SSAARenderPass {
 
 		this.sampleLevel = 0;
 		this.accumulate = false;
+		this.accumulateIndex = - 1;
 
 	}
 
@@ -41,14 +43,14 @@ class TAARenderPass extends SSAARenderPass {
 
 		if ( this.sampleRenderTarget === undefined ) {
 
-			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
+			this.sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType } );
 			this.sampleRenderTarget.texture.name = 'TAARenderPass.sample';
 
 		}
 
 		if ( this.holdRenderTarget === undefined ) {
 
-			this.holdRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params );
+			this.holdRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType } );
 			this.holdRenderTarget.texture.name = 'TAARenderPass.hold';
 
 		}
@@ -64,6 +66,9 @@ class TAARenderPass extends SSAARenderPass {
 		const autoClear = renderer.autoClear;
 		renderer.autoClear = false;
 
+		renderer.getClearColor( this._oldClearColor );
+		const oldClearAlpha = renderer.getClearAlpha();
+
 		const sampleWeight = 1.0 / ( jitterOffsets.length );
 
 		if ( this.accumulateIndex >= 0 && this.accumulateIndex < jitterOffsets.length ) {
@@ -87,11 +92,18 @@ class TAARenderPass extends SSAARenderPass {
 				}
 
 				renderer.setRenderTarget( writeBuffer );
+				renderer.setClearColor( this.clearColor, this.clearAlpha );
 				renderer.clear();
 				renderer.render( this.scene, this.camera );
 
 				renderer.setRenderTarget( this.sampleRenderTarget );
-				if ( this.accumulateIndex === 0 ) renderer.clear();
+				if ( this.accumulateIndex === 0 ) {
+
+					renderer.setClearColor( 0x000000, 0.0 );
+					renderer.clear();
+
+				}
+
 				this.fsQuad.render( renderer );
 
 				this.accumulateIndex ++;
@@ -104,6 +116,7 @@ class TAARenderPass extends SSAARenderPass {
 
 		}
 
+		renderer.setClearColor( this.clearColor, this.clearAlpha );
 		const accumulationWeight = this.accumulateIndex * sampleWeight;
 
 		if ( accumulationWeight > 0 ) {
@@ -121,12 +134,12 @@ class TAARenderPass extends SSAARenderPass {
 			this.copyUniforms[ 'opacity' ].value = 1.0 - accumulationWeight;
 			this.copyUniforms[ 'tDiffuse' ].value = this.holdRenderTarget.texture;
 			renderer.setRenderTarget( writeBuffer );
-			if ( accumulationWeight === 0 ) renderer.clear();
 			this.fsQuad.render( renderer );
 
 		}
 
 		renderer.autoClear = autoClear;
+		renderer.setClearColor( this._oldClearColor, oldClearAlpha );
 
 	}
 

package/examples/jsm/postprocessing/TexturePass.js

@@ -11,8 +11,6 @@ class TexturePass extends Pass {
 
 		super();
 
-		if ( CopyShader === undefined ) console.error( 'THREE.TexturePass relies on CopyShader' );
-
 		const shader = CopyShader;
 
 		this.map = map;
@@ -26,7 +24,8 @@ class TexturePass extends Pass {
 			vertexShader: shader.vertexShader,
 			fragmentShader: shader.fragmentShader,
 			depthTest: false,
-			depthWrite: false
+			depthWrite: false,
+			premultipliedAlpha: true
 
 		} );
 

package/examples/jsm/postprocessing/UnrealBloomPass.js

@@ -1,6 +1,7 @@
 import {
 	AdditiveBlending,
 	Color,
+	HalfFloatType,
 	MeshBasicMaterial,
 	ShaderMaterial,
 	UniformsUtils,
@@ -42,20 +43,20 @@ class UnrealBloomPass extends Pass {
 		let resx = Math.round( this.resolution.x / 2 );
 		let resy = Math.round( this.resolution.y / 2 );
 
-		this.renderTargetBright = new WebGLRenderTarget( resx, resy );
+		this.renderTargetBright = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 		this.renderTargetBright.texture.name = 'UnrealBloomPass.bright';
 		this.renderTargetBright.texture.generateMipmaps = false;
 
 		for ( let i = 0; i < this.nMips; i ++ ) {
 
-			const renderTargetHorizonal = new WebGLRenderTarget( resx, resy );
+			const renderTargetHorizonal = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 
 			renderTargetHorizonal.texture.name = 'UnrealBloomPass.h' + i;
 			renderTargetHorizonal.texture.generateMipmaps = false;
 
 			this.renderTargetsHorizontal.push( renderTargetHorizonal );
 
-			const renderTargetVertical = new WebGLRenderTarget( resx, resy );
+			const renderTargetVertical = new WebGLRenderTarget( resx, resy, { type: HalfFloatType } );
 
 			renderTargetVertical.texture.name = 'UnrealBloomPass.v' + i;
 			renderTargetVertical.texture.generateMipmaps = false;
@@ -70,9 +71,6 @@ class UnrealBloomPass extends Pass {
 
 		// luminosity high pass material
 
-		if ( LuminosityHighPassShader === undefined )
-			console.error( 'THREE.UnrealBloomPass relies on LuminosityHighPassShader' );
-
 		const highPassShader = LuminosityHighPassShader;
 		this.highPassUniforms = UniformsUtils.clone( highPassShader.uniforms );
 
@@ -82,11 +80,11 @@ class UnrealBloomPass extends Pass {
 		this.materialHighPassFilter = new ShaderMaterial( {
 			uniforms: this.highPassUniforms,
 			vertexShader: highPassShader.vertexShader,
-			fragmentShader: highPassShader.fragmentShader,
-			defines: {}
+			fragmentShader: highPassShader.fragmentShader
 		} );
 
-		// Gaussian Blur Materials
+		// gaussian blur materials
+
 		this.separableBlurMaterials = [];
 		const kernelSizeArray = [ 3, 5, 7, 9, 11 ];
 		resx = Math.round( this.resolution.x / 2 );
@@ -104,7 +102,8 @@ class UnrealBloomPass extends Pass {
 
 		}
 
-		// Composite material
+		// composite material
+
 		this.compositeMaterial = this.getCompositeMaterial( this.nMips );
 		this.compositeMaterial.uniforms[ 'blurTexture1' ].value = this.renderTargetsVertical[ 0 ].texture;
 		this.compositeMaterial.uniforms[ 'blurTexture2' ].value = this.renderTargetsVertical[ 1 ].texture;
@@ -113,26 +112,19 @@ class UnrealBloomPass extends Pass {
 		this.compositeMaterial.uniforms[ 'blurTexture5' ].value = this.renderTargetsVertical[ 4 ].texture;
 		this.compositeMaterial.uniforms[ 'bloomStrength' ].value = strength;
 		this.compositeMaterial.uniforms[ 'bloomRadius' ].value = 0.1;
-		this.compositeMaterial.needsUpdate = true;
 
 		const bloomFactors = [ 1.0, 0.8, 0.6, 0.4, 0.2 ];
 		this.compositeMaterial.uniforms[ 'bloomFactors' ].value = bloomFactors;
 		this.bloomTintColors = [ new Vector3( 1, 1, 1 ), new Vector3( 1, 1, 1 ), new Vector3( 1, 1, 1 ), new Vector3( 1, 1, 1 ), new Vector3( 1, 1, 1 ) ];
 		this.compositeMaterial.uniforms[ 'bloomTintColors' ].value = this.bloomTintColors;
 
-		// copy material
-		if ( CopyShader === undefined ) {
-
-			console.error( 'THREE.UnrealBloomPass relies on CopyShader' );
-
-		}
+		// blend material
 
 		const copyShader = CopyShader;
 
 		this.copyUniforms = UniformsUtils.clone( copyShader.uniforms );
-		this.copyUniforms[ 'opacity' ].value = 1.0;
 
-		this.materialCopy = new ShaderMaterial( {
+		this.blendMaterial = new ShaderMaterial( {
 			uniforms: this.copyUniforms,
 			vertexShader: copyShader.vertexShader,
 			fragmentShader: copyShader.fragmentShader,
@@ -179,7 +171,7 @@ class UnrealBloomPass extends Pass {
 		}
 
 		this.compositeMaterial.dispose();
-		this.materialCopy.dispose();
+		this.blendMaterial.dispose();
 		this.basic.dispose();
 
 		//
@@ -280,7 +272,7 @@ class UnrealBloomPass extends Pass {
 
 		// Blend it additively over the input texture
 
-		this.fsQuad.material = this.materialCopy;
+		this.fsQuad.material = this.blendMaterial;
 		this.copyUniforms[ 'tDiffuse' ].value = this.renderTargetsHorizontal[ 0 ].texture;
 
 		if ( maskActive ) renderer.state.buffers.stencil.setTest( true );

package/examples/jsm/renderers/CSS2DRenderer.js

@@ -1,6 +1,7 @@
 import {
 	Matrix4,
 	Object3D,
+	Vector2,
 	Vector3
 } from 'three';
 
@@ -19,6 +20,8 @@ class CSS2DObject extends Object3D {
 
 		this.element.setAttribute( 'draggable', false );
 
+		this.center = new Vector2( 0.5, 0.5 ); // ( 0, 0 ) is the lower left; ( 1, 1 ) is the top right
+
 		this.addEventListener( 'removed', function () {
 
 			this.traverse( function ( object ) {
@@ -41,6 +44,8 @@ class CSS2DObject extends Object3D {
 
 		this.element = source.element.cloneNode( true );
 
+		this.center = source.center;
+
 		return this;
 
 	}
@@ -125,7 +130,7 @@ class CSS2DRenderer {
 
 					const element = object.element;
 
-					element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+					element.style.transform = 'translate(' + ( - 100 * object.center.x ) + '%,' + ( - 100 * object.center.y ) + '%)' + 'translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
 					if ( element.parentNode !== domElement ) {
 

package/examples/jsm/renderers/CSS3DRenderer.js

@@ -105,12 +105,16 @@ class CSS3DRenderer {
 
 		this.domElement = domElement;
 
+		const viewElement = document.createElement( 'div' );
+		viewElement.style.transformOrigin = '0 0';
+		viewElement.style.pointerEvents = 'none';
+		domElement.appendChild( viewElement );
+
 		const cameraElement = document.createElement( 'div' );
 
 		cameraElement.style.transformStyle = 'preserve-3d';
-		cameraElement.style.pointerEvents = 'none';
 
-		domElement.appendChild( cameraElement );
+		viewElement.appendChild( cameraElement );
 
 		this.getSize = function () {
 
@@ -127,11 +131,25 @@ class CSS3DRenderer {
 
 			if ( cache.camera.fov !== fov ) {
 
-				domElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : '';
+				viewElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : '';
 				cache.camera.fov = fov;
 
 			}
 
+			if ( camera.view && camera.view.enabled ) {
+
+				// view offset
+				viewElement.style.transform = `translate( ${ - camera.view.offsetX * ( _width / camera.view.width ) }px, ${ - camera.view.offsetY * ( _height / camera.view.height ) }px )`;
+
+				// view fullWidth and fullHeight, view width and height
+				viewElement.style.transform += `scale( ${ camera.view.fullWidth / camera.view.width }, ${ camera.view.fullHeight / camera.view.height } )`;
+
+			} else {
+
+				viewElement.style.transform = '';
+
+			}
+
 			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
@@ -144,9 +162,10 @@ class CSS3DRenderer {
 
 			}
 
+			const scaleByViewOffset = camera.view && camera.view.enabled ? camera.view.height / camera.view.fullHeight : 1;
 			const cameraCSSMatrix = camera.isOrthographicCamera ?
-				'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
-				'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
+				`scale( ${ scaleByViewOffset } )` + 'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
+				`scale( ${ scaleByViewOffset } )` + 'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
 
 			const style = cameraCSSMatrix +
 				'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
@@ -173,6 +192,9 @@ class CSS3DRenderer {
 			domElement.style.width = width + 'px';
 			domElement.style.height = height + 'px';
 
+			viewElement.style.width = width + 'px';
+			viewElement.style.height = height + 'px';
+
 			cameraElement.style.width = width + 'px';
 			cameraElement.style.height = height + 'px';
 

package/examples/jsm/renderers/{webgpu/WebGPUAnimation.js → common/Animation.js}

@@ -1,4 +1,4 @@
-class WebGPUAnimation {
+class Animation {
 
 	constructor() {
 
@@ -23,9 +23,9 @@ class WebGPUAnimation {
 
 			this.requestId = self.requestAnimationFrame( update );
 
-			this.animationLoop( time, frame );
+			this.nodes.nodeFrame.update();
 
-			this.nodes.updateFrame();
+			this.animationLoop( time, frame );
 
 		};
 
@@ -55,4 +55,4 @@ class WebGPUAnimation {
 
 }
 
-export default WebGPUAnimation;
+export default Animation;

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

@@ -0,0 +1,75 @@
+import DataMap from './DataMap.js';
+import { AttributeType } from './Constants.js';
+import { DynamicDrawUsage } from 'three';
+
+class Attributes extends DataMap {
+
+	constructor( backend ) {
+
+		super();
+
+		this.backend = backend;
+
+	}
+
+	delete( attribute ) {
+
+		const attributeData = super.delete( attribute );
+
+		if ( attributeData !== undefined ) {
+
+			this.backend.destroyAttribute( attribute );
+
+		}
+
+	}
+
+	update( attribute, type ) {
+
+		const data = this.get( attribute );
+
+		if ( data.version === undefined ) {
+
+			if ( type === AttributeType.VERTEX ) {
+
+				this.backend.createAttribute( attribute );
+
+			} else if ( type === AttributeType.INDEX ) {
+
+				this.backend.createIndexAttribute( attribute );
+
+			} else if ( type === AttributeType.STORAGE ) {
+
+				this.backend.createStorageAttribute( attribute );
+
+			}
+
+			data.version = this._getBufferAttribute( attribute ).version;
+
+		} else {
+
+			const bufferAttribute = this._getBufferAttribute( attribute );
+
+			if ( data.version < bufferAttribute.version || bufferAttribute.usage === DynamicDrawUsage ) {
+
+				this.backend.updateAttribute( attribute );
+
+				data.version = bufferAttribute.version;
+
+			}
+
+		}
+
+	}
+
+	_getBufferAttribute( attribute ) {
+
+		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+
+		return attribute;
+
+	}
+
+}
+
+export default Attributes;