super-three 0.133.2 → 0.135.0

package/src/renderers/webxr/WebXRManager.js

@@ -4,7 +4,19 @@ import { PerspectiveCamera } from '../../cameras/PerspectiveCamera.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { WebGLAnimation } from '../webgl/WebGLAnimation.js';
+import { WebGLRenderTarget } from '../WebGLRenderTarget.js';
 import { WebXRController } from './WebXRController.js';
+import { DepthTexture } from '../../textures/DepthTexture.js';
+import { WebGLMultisampleRenderTarget } from '../WebGLMultisampleRenderTarget.js';
+import {
+	DepthFormat,
+	DepthStencilFormat,
+	RGBAFormat,
+	RGBFormat,
+	UnsignedByteType,
+	UnsignedShortType,
+	UnsignedInt248Type,
+} from '../../constants.js';
 
 class WebXRManager extends EventDispatcher {
 
@@ -13,7 +25,6 @@ class WebXRManager extends EventDispatcher {
 		super();
 
 		const scope = this;
-		const state = renderer.state;
 
 		let session = null;
 		let framebufferScaleFactor = 1.0;
@@ -21,21 +32,19 @@ class WebXRManager extends EventDispatcher {
 
 		let referenceSpace = null;
 		let referenceSpaceType = 'local-floor';
+		const hasMultisampledRenderToTexture = renderer.extensions.has( 'WEBGL_multisampled_render_to_texture' );
 
 		let pose = null;
 		var layers = [];
 
 		let glBinding = null;
-		let glFramebuffer = null;
 		let glProjLayer = null;
 		let glBaseLayer = null;
 		let isMultisample = false;
-		let glMultisampledFramebuffer = null;
-		let glColorRenderbuffer = null;
-		let glDepthRenderbuffer = null;
 		let xrFrame = null;
-		let depthStyle = null;
-		let clearStyle = null;
+		const attributes = gl.getContextAttributes();
+		let initialRenderTarget = null;
+		let newRenderTarget = null;
 
 		const controllers = [];
 		const inputSourcesMap = new Map();
@@ -146,21 +155,13 @@ class WebXRManager extends EventDispatcher {
 
 			// restore framebuffer/rendering state
 
-			state.bindXRFramebuffer( null );
-			renderer.setRenderTarget( renderer.getRenderTarget() );
-
-			if ( glFramebuffer ) gl.deleteFramebuffer( glFramebuffer );
-			if ( glMultisampledFramebuffer ) gl.deleteFramebuffer( glMultisampledFramebuffer );
-			if ( glColorRenderbuffer ) gl.deleteRenderbuffer( glColorRenderbuffer );
-			if ( glDepthRenderbuffer ) gl.deleteRenderbuffer( glDepthRenderbuffer );
-			glFramebuffer = null;
-			glMultisampledFramebuffer = null;
-			glColorRenderbuffer = null;
-			glDepthRenderbuffer = null;
+			renderer.setRenderTarget( initialRenderTarget );
+
 			glBaseLayer = null;
 			glProjLayer = null;
 			glBinding = null;
 			session = null;
+			newRenderTarget = null;
 
 			//
 
@@ -232,6 +233,8 @@ class WebXRManager extends EventDispatcher {
 
 			if ( session !== null ) {
 
+				initialRenderTarget = renderer.getRenderTarget();
+
 				session.addEventListener( 'select', onSessionEvent );
 				session.addEventListener( 'selectstart', onSessionEvent );
 				session.addEventListener( 'selectend', onSessionEvent );
@@ -241,18 +244,16 @@ class WebXRManager extends EventDispatcher {
 				session.addEventListener( 'end', onSessionEnd );
 				session.addEventListener( 'inputsourceschange', onInputSourcesChange );
 
-				const attributes = gl.getContextAttributes();
-
 				if ( attributes.xrCompatible !== true ) {
 
 					await gl.makeXRCompatible();
 
 				}
 
-				if ( session.renderState.layers === undefined) {
+				if ( ( session.renderState.layers === undefined ) || ( renderer.capabilities.isWebGL2 === false ) ) {
 
 					const layerInit = {
-						antialias: attributes.antialias,
+						antialias: ( session.renderState.layers === undefined ) ? attributes.antialias : true,
 						alpha: attributes.alpha,
 						depth: attributes.depth,
 						stencil: attributes.stencil,
@@ -263,43 +264,29 @@ class WebXRManager extends EventDispatcher {
 
 					session.updateRenderState( { baseLayer: glBaseLayer } );
 
-				} else if ( gl instanceof WebGLRenderingContext ) {
-
-					// Use old style webgl layer because we can't use MSAA
-					// WebGL2 support.
-
-					const layerInit = {
-						antialias: true,
-						alpha: attributes.alpha,
-						depth: attributes.depth,
-						stencil: attributes.stencil,
-						framebufferScaleFactor: framebufferScaleFactor
-					};
-
-					glBaseLayer = new XRWebGLLayer( session, gl, layerInit );
-
-					session.updateRenderState( { layers: [ glBaseLayer ] } );
+					newRenderTarget = new WebGLRenderTarget(
+						glBaseLayer.framebufferWidth,
+						glBaseLayer.framebufferHeight
+					);
 
 				} else {
 
 					isMultisample = attributes.antialias;
 					let depthFormat = null;
-
+					let depthType = null;
+					let glDepthFormat = null;
 
 					if ( attributes.depth ) {
 
-						clearStyle = gl.DEPTH_BUFFER_BIT;
-
-						if ( attributes.stencil ) clearStyle |= gl.STENCIL_BUFFER_BIT;
-
-						depthStyle = attributes.stencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
-						depthFormat = attributes.stencil ? gl.DEPTH24_STENCIL8 : gl.DEPTH_COMPONENT24;
+						glDepthFormat = attributes.stencil ? gl.DEPTH24_STENCIL8 : gl.DEPTH_COMPONENT16;
+						depthFormat = attributes.stencil ? DepthStencilFormat : DepthFormat;
+						depthType = attributes.stencil ? UnsignedInt248Type : UnsignedShortType;
 
 					}
 
 					const projectionlayerInit = {
-						colorFormat: attributes.alpha ? gl.RGBA8 : gl.RGB8,
-						depthFormat: depthFormat,
+						colorFormat: ( attributes.alpha || isMultisample ) ? gl.RGBA8 : gl.RGB8,
+						depthFormat: glDepthFormat,
 						scaleFactor: framebufferScaleFactor
 					};
 
@@ -307,41 +294,42 @@ class WebXRManager extends EventDispatcher {
 
 					glProjLayer = glBinding.createProjectionLayer( projectionlayerInit );
 
-					glFramebuffer = gl.createFramebuffer();
-
 					session.updateRenderState( { layers: [ glProjLayer ] } );
 
 					if ( isMultisample ) {
 
-						glMultisampledFramebuffer = gl.createFramebuffer();
-						glColorRenderbuffer = gl.createRenderbuffer();
-						gl.bindRenderbuffer( gl.RENDERBUFFER, glColorRenderbuffer );
-						gl.renderbufferStorageMultisample(
-							gl.RENDERBUFFER,
-							4,
-							gl.RGBA8,
+						newRenderTarget = new WebGLMultisampleRenderTarget(
 							glProjLayer.textureWidth,
-							glProjLayer.textureHeight );
-						state.bindFramebuffer( gl.FRAMEBUFFER, glMultisampledFramebuffer );
-						gl.framebufferRenderbuffer( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, glColorRenderbuffer );
-						gl.bindRenderbuffer( gl.RENDERBUFFER, null );
-
-						if ( depthFormat !== null ) {
+							glProjLayer.textureHeight,
+							{
+								format: RGBAFormat,
+								type: UnsignedByteType,
+								depthTexture: new DepthTexture( glProjLayer.textureWidth, glProjLayer.textureHeight, depthType, undefined, undefined, undefined, undefined, undefined, undefined, depthFormat ),
+								stencilBuffer: attributes.stencil,
+								ignoreDepth: glProjLayer.ignoreDepthValues,
+								useRenderToTexture: hasMultisampledRenderToTexture,
+							} );
 
-							glDepthRenderbuffer = gl.createRenderbuffer();
-							gl.bindRenderbuffer( gl.RENDERBUFFER, glDepthRenderbuffer );
-							gl.renderbufferStorageMultisample( gl.RENDERBUFFER, 4, depthFormat, glProjLayer.textureWidth, glProjLayer.textureHeight );
-							gl.framebufferRenderbuffer( gl.FRAMEBUFFER, depthStyle, gl.RENDERBUFFER, glDepthRenderbuffer );
-							gl.bindRenderbuffer( gl.RENDERBUFFER, null );
-
-						}
+					} else {
 
-						state.bindFramebuffer( gl.FRAMEBUFFER, null );
+						newRenderTarget = new WebGLRenderTarget(
+							glProjLayer.textureWidth,
+							glProjLayer.textureHeight,
+							{
+								format: attributes.alpha ? RGBAFormat : RGBFormat,
+								type: UnsignedByteType,
+								depthTexture: new DepthTexture( glProjLayer.textureWidth, glProjLayer.textureHeight, depthType, undefined, undefined, undefined, undefined, undefined, undefined, depthFormat ),
+								stencilBuffer: attributes.stencil,
+								ignoreDepth: glProjLayer.ignoreDepthValues,
+							} );
 
 					}
 
 				}
 
+				// Set foveation to maximum.
+				this.setFoveation( 0 );
+
 				referenceSpace = await session.requestReferenceSpace( referenceSpaceType );
 
 				animation.setContext( session );
@@ -372,8 +360,8 @@ class WebXRManager extends EventDispatcher {
 
 		this.updateLayers = function() {
 			var layersCopy = layers.map(function (x) { return x; });
-			layersCopy.push(layersCopy);
-			
+
+			layersCopy.unshift( session.renderState.layers[0] );			
 			session.updateRenderState( { layers: layersCopy } );
 		};
 
@@ -543,7 +531,7 @@ class WebXRManager extends EventDispatcher {
 
 			object.matrixWorld.copy( cameraVR.matrixWorld );
 			object.matrix.copy( cameraVR.matrix );
-			object.matrix.decompose( cameraVR.position, cameraVR.quaternion, cameraVR.scale );
+			object.matrix.decompose( object.position, object.quaternion, object.scale );
 
 			const children = object.children;
 
@@ -627,7 +615,8 @@ class WebXRManager extends EventDispatcher {
 
 				if ( glBaseLayer !== null ) {
 
-					state.bindXRFramebuffer( glBaseLayer.framebuffer );
+					renderer.setRenderTargetFramebuffer( newRenderTarget, glBaseLayer.framebuffer );
+					renderer.setRenderTarget( newRenderTarget );
 
 				}
 
@@ -638,7 +627,6 @@ class WebXRManager extends EventDispatcher {
 				if ( views.length !== cameraVR.cameras.length ) {
 
 					cameraVR.cameras.length = 0;
-
 					cameraVRNeedsUpdate = true;
 
 				}
@@ -656,19 +644,20 @@ class WebXRManager extends EventDispatcher {
 					} else {
 
 						const glSubImage = glBinding.getViewSubImage( glProjLayer, view );
+						viewport = glSubImage.viewport;
 
-						state.bindXRFramebuffer( glFramebuffer );
+						// For side-by-side projection, we only produce a single texture for both eyes.
+						if ( i === 0 ) {
 
-						if ( glSubImage.depthStencilTexture !== undefined ) {
+							renderer.setRenderTargetTextures(
+								newRenderTarget,
+								glSubImage.colorTexture,
+								glProjLayer.ignoreDepthValues ? undefined : glSubImage.depthStencilTexture );
 
-							gl.framebufferTexture2D( gl.FRAMEBUFFER, depthStyle, gl.TEXTURE_2D, glSubImage.depthStencilTexture, 0 );
+							renderer.setRenderTarget( newRenderTarget );
 
 						}
 
-						gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, glSubImage.colorTexture, 0 );
-
-						viewport = glSubImage.viewport;
-
 					}
 
 					const camera = cameras[ i ];
@@ -691,14 +680,6 @@ class WebXRManager extends EventDispatcher {
 
 				}
 
-				if ( isMultisample ) {
-
-					state.bindXRFramebuffer( glMultisampledFramebuffer );
-
-					if ( clearStyle !== null ) gl.clear( clearStyle );
-
-				}
-
 			}
 
 			//
@@ -716,26 +697,6 @@ class WebXRManager extends EventDispatcher {
 
 			if ( onAnimationFrameCallback ) onAnimationFrameCallback( time, frame );
 
-			if ( isMultisample ) {
-
-				const width = glProjLayer.textureWidth;
-				const height = glProjLayer.textureHeight;
-
-				state.bindFramebuffer( gl.READ_FRAMEBUFFER, glMultisampledFramebuffer );
-				state.bindFramebuffer( gl.DRAW_FRAMEBUFFER, glFramebuffer );
-				// Invalidate the depth here to avoid flush of the depth data to main memory.
-				gl.invalidateFramebuffer( gl.READ_FRAMEBUFFER, [ depthStyle ] );
-				gl.invalidateFramebuffer( gl.DRAW_FRAMEBUFFER, [ depthStyle ] );
-				gl.blitFramebuffer( 0, 0, width, height, 0, 0, width, height, gl.COLOR_BUFFER_BIT, gl.NEAREST );
-				// Invalidate the MSAA buffer because it's not needed anymore.
-				gl.invalidateFramebuffer( gl.READ_FRAMEBUFFER, [ gl.COLOR_ATTACHMENT0 ] );
-				state.bindFramebuffer( gl.READ_FRAMEBUFFER, null );
-				state.bindFramebuffer( gl.DRAW_FRAMEBUFFER, null );
-
-				state.bindFramebuffer( gl.FRAMEBUFFER, glMultisampledFramebuffer );
-
-			}
-
 			xrFrame = null;
 
 		}

package/src/textures/Texture.js

@@ -65,6 +65,8 @@ class Texture extends EventDispatcher {
 		// update. You need to explicitly call Material.needsUpdate to trigger it to recompile.
 		this.encoding = encoding;
 
+		this.userData = {};
+
 		this.version = 0;
 		this.onUpdate = null;
 
@@ -119,6 +121,8 @@ class Texture extends EventDispatcher {
 		this.unpackAlignment = source.unpackAlignment;
 		this.encoding = source.encoding;
 
+		this.userData = JSON.parse( JSON.stringify( source.userData ) );
+
 		return this;
 
 	}
@@ -225,6 +229,8 @@ class Texture extends EventDispatcher {
 
 		}
 
+		if ( JSON.stringify( this.userData ) !== '{}' ) output.userData = this.userData;
+
 		if ( ! isRootObject ) {
 
 			meta.textures[ this.uuid ] = output;

package/src/utils.js

@@ -54,4 +54,40 @@ function createElementNS( name ) {
 
 }
 
-export { arrayMin, arrayMax, getTypedArray, createElementNS };
+/**
+  * cyrb53 hash for string from: https://stackoverflow.com/a/52171480
+  *
+  * Public Domain, @bryc - https://stackoverflow.com/users/815680/bryc
+  *
+  * It is roughly similar to the well-known MurmurHash/xxHash algorithms. It uses a combination
+  * of multiplication and Xorshift to generate the hash, but not as thorough. As a result it's
+  * faster than either would be in JavaScript and significantly simpler to implement. Keep in
+  * mind this is not a secure algorithm, if privacy/security is a concern, this is not for you.
+  *
+  * @param {string} str
+  * @param {number} seed, default 0
+  * @returns number
+  */
+function hashString( str, seed = 0 ) {
+
+	let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
+
+	for ( let i = 0, ch; i < str.length; i ++ ) {
+
+		ch = str.charCodeAt( i );
+
+		h1 = Math.imul( h1 ^ ch, 2654435761 );
+
+		h2 = Math.imul( h2 ^ ch, 1597334677 );
+
+	}
+
+	h1 = Math.imul( h1 ^ ( h1 >>> 16 ), 2246822507 ) ^ Math.imul( h2 ^ ( h2 >>> 13 ), 3266489909 );
+
+	h2 = Math.imul( h2 ^ ( h2 >>> 16 ), 2246822507 ) ^ Math.imul( h1 ^ ( h1 >>> 13 ), 3266489909 );
+
+	return 4294967296 * ( 2097151 & h2 ) + ( h1 >>> 0 );
+
+}
+
+export { arrayMin, arrayMax, getTypedArray, createElementNS, hashString };

package/examples/js/controls/DeviceOrientationControls.js

@@ -1,147 +0,0 @@
-( function () {
-
-	const _zee = new THREE.Vector3( 0, 0, 1 );
-
-	const _euler = new THREE.Euler();
-
-	const _q0 = new THREE.Quaternion();
-
-	const _q1 = new THREE.Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis
-
-
-	const _changeEvent = {
-		type: 'change'
-	};
-
-	class DeviceOrientationControls extends THREE.EventDispatcher {
-
-		constructor( object ) {
-
-			super();
-
-			if ( window.isSecureContext === false ) {
-
-				console.error( 'THREE.DeviceOrientationControls: DeviceOrientationEvent is only available in secure contexts (https)' );
-
-			}
-
-			const scope = this;
-			const EPS = 0.000001;
-			const lastQuaternion = new THREE.Quaternion();
-			this.object = object;
-			this.object.rotation.reorder( 'YXZ' );
-			this.enabled = true;
-			this.deviceOrientation = {};
-			this.screenOrientation = 0;
-			this.alphaOffset = 0; // radians
-
-			const onDeviceOrientationChangeEvent = function ( event ) {
-
-				scope.deviceOrientation = event;
-
-			};
-
-			const onScreenOrientationChangeEvent = function () {
-
-				scope.screenOrientation = window.orientation || 0;
-
-			}; // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
-
-
-			const setObjectQuaternion = function ( quaternion, alpha, beta, gamma, orient ) {
-
-				_euler.set( beta, alpha, - gamma, 'YXZ' ); // 'ZXY' for the device, but 'YXZ' for us
-
-
-				quaternion.setFromEuler( _euler ); // orient the device
-
-				quaternion.multiply( _q1 ); // camera looks out the back of the device, not the top
-
-				quaternion.multiply( _q0.setFromAxisAngle( _zee, - orient ) ); // adjust for screen orientation
-
-			};
-
-			this.connect = function () {
-
-				onScreenOrientationChangeEvent(); // run once on load
-				// iOS 13+
-
-				if ( window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function' ) {
-
-					window.DeviceOrientationEvent.requestPermission().then( function ( response ) {
-
-						if ( response == 'granted' ) {
-
-							window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent );
-							window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent );
-
-						}
-
-					} ).catch( function ( error ) {
-
-						console.error( 'THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:', error );
-
-					} );
-
-				} else {
-
-					window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent );
-					window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent );
-
-				}
-
-				scope.enabled = true;
-
-			};
-
-			this.disconnect = function () {
-
-				window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent );
-				window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent );
-				scope.enabled = false;
-
-			};
-
-			this.update = function () {
-
-				if ( scope.enabled === false ) return;
-				const device = scope.deviceOrientation;
-
-				if ( device ) {
-
-					const alpha = device.alpha ? THREE.MathUtils.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z
-
-					const beta = device.beta ? THREE.MathUtils.degToRad( device.beta ) : 0; // X'
-
-					const gamma = device.gamma ? THREE.MathUtils.degToRad( device.gamma ) : 0; // Y''
-
-					const orient = scope.screenOrientation ? THREE.MathUtils.degToRad( scope.screenOrientation ) : 0; // O
-
-					setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
-
-					if ( 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
-
-						lastQuaternion.copy( scope.object.quaternion );
-						scope.dispatchEvent( _changeEvent );
-
-					}
-
-				}
-
-			};
-
-			this.dispose = function () {
-
-				scope.disconnect();
-
-			};
-
-			this.connect();
-
-		}
-
-	}
-
-	THREE.DeviceOrientationControls = DeviceOrientationControls;
-
-} )();