224 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			224 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
import {
 | 
						|
	DirectionalLight,
 | 
						|
	Group,
 | 
						|
	LightProbe,
 | 
						|
	WebGLCubeRenderTarget
 | 
						|
} from 'three';
 | 
						|
 | 
						|
class SessionLightProbe {
 | 
						|
 | 
						|
	constructor( xrLight, renderer, lightProbe, environmentEstimation, estimationStartCallback ) {
 | 
						|
 | 
						|
		this.xrLight = xrLight;
 | 
						|
		this.renderer = renderer;
 | 
						|
		this.lightProbe = lightProbe;
 | 
						|
		this.xrWebGLBinding = null;
 | 
						|
		this.estimationStartCallback = estimationStartCallback;
 | 
						|
		this.frameCallback = this.onXRFrame.bind( this );
 | 
						|
 | 
						|
		const session = renderer.xr.getSession();
 | 
						|
 | 
						|
		// If the XRWebGLBinding class is available then we can also query an
 | 
						|
		// estimated reflection cube map.
 | 
						|
		if ( environmentEstimation && 'XRWebGLBinding' in window ) {
 | 
						|
 | 
						|
			// This is the simplest way I know of to initialize a WebGL cubemap in Three.
 | 
						|
			const cubeRenderTarget = new WebGLCubeRenderTarget( 16 );
 | 
						|
			xrLight.environment = cubeRenderTarget.texture;
 | 
						|
 | 
						|
			const gl = renderer.getContext();
 | 
						|
 | 
						|
			// Ensure that we have any extensions needed to use the preferred cube map format.
 | 
						|
			switch ( session.preferredReflectionFormat ) {
 | 
						|
 | 
						|
				case 'srgba8':
 | 
						|
					gl.getExtension( 'EXT_sRGB' );
 | 
						|
					break;
 | 
						|
 | 
						|
				case 'rgba16f':
 | 
						|
					gl.getExtension( 'OES_texture_half_float' );
 | 
						|
					break;
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
			this.xrWebGLBinding = new XRWebGLBinding( session, gl );
 | 
						|
 | 
						|
			this.lightProbe.addEventListener( 'reflectionchange', () => {
 | 
						|
 | 
						|
				this.updateReflection();
 | 
						|
 | 
						|
			} );
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
		// Start monitoring the XR animation frame loop to look for lighting
 | 
						|
		// estimation changes.
 | 
						|
		session.requestAnimationFrame( this.frameCallback );
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	updateReflection() {
 | 
						|
 | 
						|
		const textureProperties = this.renderer.properties.get( this.xrLight.environment );
 | 
						|
 | 
						|
		if ( textureProperties ) {
 | 
						|
 | 
						|
			const cubeMap = this.xrWebGLBinding.getReflectionCubeMap( this.lightProbe );
 | 
						|
 | 
						|
			if ( cubeMap ) {
 | 
						|
 | 
						|
				textureProperties.__webglTexture = cubeMap;
 | 
						|
 | 
						|
				this.xrLight.environment.needsPMREMUpdate = true;
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	onXRFrame( time, xrFrame ) {
 | 
						|
 | 
						|
		// If either this obejct or the XREstimatedLight has been destroyed, stop
 | 
						|
		// running the frame loop.
 | 
						|
		if ( ! this.xrLight ) {
 | 
						|
 | 
						|
			return;
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
		const session = xrFrame.session;
 | 
						|
		session.requestAnimationFrame( this.frameCallback );
 | 
						|
 | 
						|
		const lightEstimate = xrFrame.getLightEstimate( this.lightProbe );
 | 
						|
		if ( lightEstimate ) {
 | 
						|
 | 
						|
			// We can copy the estimate's spherical harmonics array directly into the light probe.
 | 
						|
			this.xrLight.lightProbe.sh.fromArray( lightEstimate.sphericalHarmonicsCoefficients );
 | 
						|
			this.xrLight.lightProbe.intensity = 1.0;
 | 
						|
 | 
						|
			// For the directional light we have to normalize the color and set the scalar as the
 | 
						|
			// intensity, since WebXR can return color values that exceed 1.0.
 | 
						|
			const intensityScalar = Math.max( 1.0,
 | 
						|
				Math.max( lightEstimate.primaryLightIntensity.x,
 | 
						|
					Math.max( lightEstimate.primaryLightIntensity.y,
 | 
						|
						lightEstimate.primaryLightIntensity.z ) ) );
 | 
						|
 | 
						|
			this.xrLight.directionalLight.color.setRGB(
 | 
						|
				lightEstimate.primaryLightIntensity.x / intensityScalar,
 | 
						|
				lightEstimate.primaryLightIntensity.y / intensityScalar,
 | 
						|
				lightEstimate.primaryLightIntensity.z / intensityScalar );
 | 
						|
			this.xrLight.directionalLight.intensity = intensityScalar;
 | 
						|
			this.xrLight.directionalLight.position.copy( lightEstimate.primaryLightDirection );
 | 
						|
 | 
						|
			if ( this.estimationStartCallback ) {
 | 
						|
 | 
						|
				this.estimationStartCallback();
 | 
						|
				this.estimationStartCallback = null;
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	dispose() {
 | 
						|
 | 
						|
		this.xrLight = null;
 | 
						|
		this.renderer = null;
 | 
						|
		this.lightProbe = null;
 | 
						|
		this.xrWebGLBinding = null;
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
}
 | 
						|
 | 
						|
export class XREstimatedLight extends Group {
 | 
						|
 | 
						|
	constructor( renderer, environmentEstimation = true ) {
 | 
						|
 | 
						|
		super();
 | 
						|
 | 
						|
		this.lightProbe = new LightProbe();
 | 
						|
		this.lightProbe.intensity = 0;
 | 
						|
		this.add( this.lightProbe );
 | 
						|
 | 
						|
		this.directionalLight = new DirectionalLight();
 | 
						|
		this.directionalLight.intensity = 0;
 | 
						|
		this.add( this.directionalLight );
 | 
						|
 | 
						|
		// Will be set to a cube map in the SessionLightProbe if environment estimation is
 | 
						|
		// available and requested.
 | 
						|
		this.environment = null;
 | 
						|
 | 
						|
		let sessionLightProbe = null;
 | 
						|
		let estimationStarted = false;
 | 
						|
		renderer.xr.addEventListener( 'sessionstart', () => {
 | 
						|
 | 
						|
			const session = renderer.xr.getSession();
 | 
						|
 | 
						|
			if ( 'requestLightProbe' in session ) {
 | 
						|
 | 
						|
				session.requestLightProbe( {
 | 
						|
 | 
						|
					reflectionFormat: session.preferredReflectionFormat
 | 
						|
 | 
						|
				} ).then( ( probe ) => {
 | 
						|
 | 
						|
					sessionLightProbe = new SessionLightProbe( this, renderer, probe, environmentEstimation, () => {
 | 
						|
 | 
						|
						estimationStarted = true;
 | 
						|
 | 
						|
						// Fired to indicate that the estimated lighting values are now being updated.
 | 
						|
						this.dispatchEvent( { type: 'estimationstart' } );
 | 
						|
 | 
						|
					} );
 | 
						|
 | 
						|
				} );
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
		} );
 | 
						|
 | 
						|
		renderer.xr.addEventListener( 'sessionend', () => {
 | 
						|
 | 
						|
			if ( sessionLightProbe ) {
 | 
						|
 | 
						|
				sessionLightProbe.dispose();
 | 
						|
				sessionLightProbe = null;
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
			if ( estimationStarted ) {
 | 
						|
 | 
						|
				// Fired to indicate that the estimated lighting values are no longer being updated.
 | 
						|
				this.dispatchEvent( { type: 'estimationend' } );
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
		} );
 | 
						|
 | 
						|
		// Done inline to provide access to sessionLightProbe.
 | 
						|
		this.dispose = () => {
 | 
						|
 | 
						|
			if ( sessionLightProbe ) {
 | 
						|
 | 
						|
				sessionLightProbe.dispose();
 | 
						|
				sessionLightProbe = null;
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
			this.remove( this.lightProbe );
 | 
						|
			this.lightProbe = null;
 | 
						|
 | 
						|
			this.remove( this.directionalLight );
 | 
						|
			this.directionalLight = null;
 | 
						|
 | 
						|
			this.environment = null;
 | 
						|
 | 
						|
		};
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
}
 |