spoint 0.1.0 → 0.1.10

package/client/editor/js/Toolbar.js

@@ -0,0 +1,84 @@
+import { UIPanel, UIButton, UICheckbox } from './libs/ui.js';
+
+function Toolbar( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setId( 'toolbar' );
+
+	// translate / rotate / scale
+
+	const translateIcon = document.createElement( 'img' );
+	translateIcon.title = strings.getKey( 'toolbar/translate' );
+	translateIcon.src = 'images/translate.svg';
+
+	const translate = new UIButton();
+	translate.dom.className = 'Button selected';
+	translate.dom.appendChild( translateIcon );
+	translate.onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'translate' );
+
+	} );
+	container.add( translate );
+
+	const rotateIcon = document.createElement( 'img' );
+	rotateIcon.title = strings.getKey( 'toolbar/rotate' );
+	rotateIcon.src = 'images/rotate.svg';
+
+	const rotate = new UIButton();
+	rotate.dom.appendChild( rotateIcon );
+	rotate.onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'rotate' );
+
+	} );
+	container.add( rotate );
+
+	const scaleIcon = document.createElement( 'img' );
+	scaleIcon.title = strings.getKey( 'toolbar/scale' );
+	scaleIcon.src = 'images/scale.svg';
+
+	const scale = new UIButton();
+	scale.dom.appendChild( scaleIcon );
+	scale.onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'scale' );
+
+	} );
+	container.add( scale );
+
+	const local = new UICheckbox( false );
+	local.dom.title = strings.getKey( 'toolbar/local' );
+	local.onChange( function () {
+
+		signals.spaceChanged.dispatch( this.getValue() === true ? 'local' : 'world' );
+
+	} );
+	container.add( local );
+
+	//
+
+	signals.transformModeChanged.add( function ( mode ) {
+
+		translate.dom.classList.remove( 'selected' );
+		rotate.dom.classList.remove( 'selected' );
+		scale.dom.classList.remove( 'selected' );
+
+		switch ( mode ) {
+
+			case 'translate': translate.dom.classList.add( 'selected' ); break;
+			case 'rotate': rotate.dom.classList.add( 'selected' ); break;
+			case 'scale': scale.dom.classList.add( 'selected' ); break;
+
+		}
+
+	} );
+
+	return container;
+
+}
+
+export { Toolbar };

package/client/editor/js/Viewport.Controls.js

@@ -0,0 +1,92 @@
+import { UIPanel, UISelect } from './libs/ui.js';
+
+function ViewportControls( editor ) {
+
+	const signals = editor.signals;
+
+	const container = new UIPanel();
+	container.setPosition( 'absolute' );
+	container.setRight( '10px' );
+	container.setTop( '10px' );
+	container.setColor( '#ffffff' );
+
+	// camera
+
+	const cameraSelect = new UISelect();
+	cameraSelect.setMarginLeft( '10px' );
+	cameraSelect.setMarginRight( '10px' );
+	cameraSelect.onChange( function () {
+
+		editor.setViewportCamera( this.getValue() );
+
+	} );
+	container.add( cameraSelect );
+
+	signals.cameraAdded.add( update );
+	signals.cameraRemoved.add( update );
+	signals.objectChanged.add( function ( object ) {
+
+		if ( object.isCamera ) {
+
+			update();
+
+		}
+
+	} );
+
+	// shading
+
+	const shadingSelect = new UISelect();
+	shadingSelect.setOptions( { 'realistic': 'realistic', 'solid': 'solid', 'normals': 'normals', 'wireframe': 'wireframe' } );
+	shadingSelect.setValue( 'solid' );
+	shadingSelect.onChange( function () {
+
+		editor.setViewportShading( this.getValue() );
+
+	} );
+	container.add( shadingSelect );
+
+	signals.editorCleared.add( function () {
+
+		editor.setViewportCamera( editor.camera.uuid );
+
+		shadingSelect.setValue( 'solid' );
+		editor.setViewportShading( shadingSelect.getValue() );
+
+	} );
+
+	signals.cameraResetted.add( update );
+
+	update();
+
+	//
+
+	function update() {
+
+		const options = {};
+
+		const cameras = editor.cameras;
+
+		for ( const key in cameras ) {
+
+			const camera = cameras[ key ];
+			options[ camera.uuid ] = camera.name;
+
+		}
+
+		cameraSelect.setOptions( options );
+
+		const selectedCamera = ( editor.viewportCamera.uuid in options )
+			? editor.viewportCamera
+			: editor.camera;
+
+		cameraSelect.setValue( selectedCamera.uuid );
+		editor.setViewportCamera( selectedCamera.uuid );
+
+	}
+
+	return container;
+
+}
+
+export { ViewportControls };

package/client/editor/js/Viewport.Info.js

@@ -0,0 +1,136 @@
+import { UIPanel, UIBreak, UIText } from './libs/ui.js';
+
+function ViewportInfo( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setId( 'info' );
+	container.setPosition( 'absolute' );
+	container.setLeft( '10px' );
+	container.setBottom( '20px' );
+	container.setFontSize( '12px' );
+	container.setColor( '#fff' );
+	container.setTextTransform( 'lowercase' );
+
+	const objectsText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const verticesText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const trianglesText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const frametimeText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const samplesText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' ).setHidden( true );
+
+	const objectsUnitText = new UIText( strings.getKey( 'viewport/info/objects' ) );
+	const verticesUnitText = new UIText( strings.getKey( 'viewport/info/vertices' ) );
+	const trianglesUnitText = new UIText( strings.getKey( 'viewport/info/triangles' ) );
+	const samplesUnitText = new UIText( strings.getKey( 'viewport/info/samples' ) ).setHidden( true );
+
+	container.add( objectsText, objectsUnitText, new UIBreak() );
+	container.add( verticesText, verticesUnitText, new UIBreak() );
+	container.add( trianglesText, trianglesUnitText, new UIBreak() );
+	container.add( frametimeText, new UIText( strings.getKey( 'viewport/info/rendertime' ) ), new UIBreak() );
+	container.add( samplesText, samplesUnitText, new UIBreak() );
+
+	signals.objectAdded.add( update );
+	signals.objectRemoved.add( update );
+	signals.geometryChanged.add( update );
+	signals.sceneRendered.add( updateFrametime );
+
+	//
+
+	const pluralRules = new Intl.PluralRules( editor.config.getKey( 'language' ) );
+
+	//
+
+	function update() {
+
+		const scene = editor.scene;
+
+		let objects = 0, vertices = 0, triangles = 0;
+
+		for ( let i = 0, l = scene.children.length; i < l; i ++ ) {
+
+			const object = scene.children[ i ];
+
+			object.traverseVisible( function ( object ) {
+
+				objects ++;
+
+				if ( object.isMesh || object.isPoints ) {
+
+					const geometry = object.geometry;
+
+					vertices += geometry.attributes.position.count;
+
+					if ( object.isMesh ) {
+
+						if ( geometry.index !== null ) {
+
+							triangles += geometry.index.count / 3;
+
+						} else {
+
+							triangles += geometry.attributes.position.count / 3;
+
+						}
+
+					}
+
+				}
+
+			} );
+
+		}
+
+		objectsText.setValue( editor.utils.formatNumber( objects ) );
+		verticesText.setValue( editor.utils.formatNumber( vertices ) );
+		trianglesText.setValue( editor.utils.formatNumber( triangles ) );
+
+		const pluralRules = new Intl.PluralRules( editor.config.getKey( 'language' ) );
+
+		const objectsStringKey = ( pluralRules.select( objects ) === 'one' ) ? 'viewport/info/object' : 'viewport/info/objects';
+		objectsUnitText.setValue( strings.getKey( objectsStringKey ) );
+
+		const verticesStringKey = ( pluralRules.select( vertices ) === 'one' ) ? 'viewport/info/vertex' : 'viewport/info/vertices';
+		verticesUnitText.setValue( strings.getKey( verticesStringKey ) );
+
+		const trianglesStringKey = ( pluralRules.select( triangles ) === 'one' ) ? 'viewport/info/triangle' : 'viewport/info/triangles';
+		trianglesUnitText.setValue( strings.getKey( trianglesStringKey ) );
+
+	}
+
+	function updateFrametime( frametime ) {
+
+		frametimeText.setValue( Number( frametime ).toFixed( 2 ) );
+
+	}
+
+	//
+
+	editor.signals.pathTracerUpdated.add( function ( samples ) {
+
+		samples = Math.floor( samples );
+
+		samplesText.setValue( samples );
+
+		const samplesStringKey = ( pluralRules.select( samples ) === 'one' ) ? 'viewport/info/sample' : 'viewport/info/samples';
+		samplesUnitText.setValue( strings.getKey( samplesStringKey ) );
+
+	} );
+
+	editor.signals.viewportShadingChanged.add( function () {
+
+		const isRealisticShading = ( editor.viewportShading === 'realistic' );
+
+		samplesText.setHidden( ! isRealisticShading );
+		samplesUnitText.setHidden( ! isRealisticShading );
+
+		container.setBottom( isRealisticShading ? '32px' : '20px' );
+
+	} );
+
+	return container;
+
+}
+
+export { ViewportInfo };

package/client/editor/js/Viewport.Pathtracer.js

@@ -0,0 +1,91 @@
+import { WebGLPathTracer } from 'three-gpu-pathtracer';
+
+function ViewportPathtracer( renderer ) {
+
+	let pathTracer = null;
+
+	function init( scene, camera ) {
+
+		if ( pathTracer === null ) {
+
+			pathTracer = new WebGLPathTracer( renderer );
+			pathTracer.filterGlossyFactor = 0.5;
+
+		}
+
+		pathTracer.setScene( scene, camera );
+
+	}
+
+	function setSize( /* width, height */ ) {
+
+		if ( pathTracer === null ) return;
+
+		// path tracer size automatically updates based on the canvas
+		pathTracer.updateCamera();
+
+	}
+
+	function setBackground( /* background, blurriness */ ) {
+
+		if ( pathTracer === null ) return;
+
+		// update environment settings based on initialized scene fields
+		pathTracer.updateEnvironment();
+
+	}
+
+	function updateMaterials() {
+
+		if ( pathTracer === null ) return;
+
+		pathTracer.updateMaterials();
+
+	}
+
+	function setEnvironment( /* environment */ ) {
+
+		if ( pathTracer === null ) return;
+
+		pathTracer.updateEnvironment();
+
+	}
+
+	function update() {
+
+		if ( pathTracer === null ) return;
+
+		pathTracer.renderSample();
+
+	}
+
+	function reset() {
+
+		if ( pathTracer === null ) return;
+
+		pathTracer.updateCamera();
+
+	}
+
+	function getSamples() {
+
+		if ( pathTracer === null ) return;
+
+		return pathTracer.samples;
+
+	}
+
+	return {
+		init: init,
+		setSize: setSize,
+		setBackground: setBackground,
+		setEnvironment: setEnvironment,
+		updateMaterials: updateMaterials,
+		update: update,
+		reset: reset,
+		getSamples: getSamples
+	};
+
+}
+
+export { ViewportPathtracer };

package/client/editor/js/Viewport.ViewHelper.js

@@ -0,0 +1,39 @@
+import { UIPanel } from './libs/ui.js';
+
+import { ViewHelper as ViewHelperBase } from 'three/addons/helpers/ViewHelper.js';
+
+class ViewHelper extends ViewHelperBase {
+
+	constructor( editorCamera, container ) {
+
+		super( editorCamera, container.dom );
+
+		const panel = new UIPanel();
+		panel.setId( 'viewHelper' );
+		panel.setPosition( 'absolute' );
+		panel.setRight( '0px' );
+		panel.setBottom( '0px' );
+		panel.setHeight( '128px' );
+		panel.setWidth( '128px' );
+
+		panel.dom.addEventListener( 'pointerup', ( event ) => {
+
+			event.stopPropagation();
+
+			this.handleClick( event );
+
+		} );
+
+		panel.dom.addEventListener( 'pointerdown', function ( event ) {
+
+			event.stopPropagation();
+
+		} );
+
+		container.add( panel );
+
+	}
+
+}
+
+export { ViewHelper };

package/client/editor/js/Viewport.XR.js

@@ -0,0 +1,222 @@
+import * as THREE from 'three';
+
+import { HTMLMesh } from 'three/addons/interactive/HTMLMesh.js';
+import { InteractiveGroup } from 'three/addons/interactive/InteractiveGroup.js';
+
+import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
+
+class XR {
+
+	constructor( editor, controls ) {
+
+		const selector = editor.selector;
+		const signals = editor.signals;
+
+		let controllers = null;
+		let group = null;
+		let renderer = null;
+
+		const camera = new THREE.PerspectiveCamera();
+
+		const onSessionStarted = async ( session ) => {
+
+			camera.copy( editor.camera );
+
+			const sidebar = document.getElementById( 'sidebar' );
+			sidebar.style.width = '350px';
+			sidebar.style.height = '700px';
+
+			//
+
+			if ( controllers === null ) {
+
+				const geometry = new THREE.BufferGeometry();
+				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 5 ], 3 ) );
+
+				const line = new THREE.Line( geometry );
+
+				const raycaster = new THREE.Raycaster();
+
+				function onSelect( event ) {
+
+					const controller = event.target;
+
+					controller1.userData.active = false;
+					controller2.userData.active = false;
+
+					if ( controller === controller1 ) {
+
+						controller1.userData.active = true;
+						controller1.add( line );
+
+					}
+
+					if ( controller === controller2 ) {
+
+						controller2.userData.active = true;
+						controller2.add( line );
+
+					}
+
+					raycaster.setFromXRController( controller );
+
+					const intersects = selector.getIntersects( raycaster );
+
+					if ( intersects.length > 0 ) {
+
+						// Ignore menu clicks
+
+						const intersect = intersects[ 0 ];
+						if ( intersect.object === group.children[ 0 ] ) return;
+
+					}
+
+					signals.intersectionsDetected.dispatch( intersects );
+
+				}
+
+				function onControllerEvent( event ) {
+
+					const controller = event.target;
+
+					if ( controller.userData.active === false ) return;
+
+					controls.getRaycaster().setFromXRController( controller );
+
+					switch ( event.type ) {
+
+						case 'selectstart':
+							controls.pointerDown( null );
+							break;
+
+						case 'selectend':
+							controls.pointerUp( null );
+							break;
+
+						case 'move':
+							controls.pointerHover( null );
+							controls.pointerMove( null );
+							break;
+
+					}
+
+				}
+
+				controllers = new THREE.Group();
+
+				const controller1 = renderer.xr.getController( 0 );
+				controller1.addEventListener( 'select', onSelect );
+				controller1.addEventListener( 'selectstart', onControllerEvent );
+				controller1.addEventListener( 'selectend', onControllerEvent );
+				controller1.addEventListener( 'move', onControllerEvent );
+				controller1.userData.active = false;
+				controllers.add( controller1 );
+
+				const controller2 = renderer.xr.getController( 1 );
+				controller2.addEventListener( 'select', onSelect );
+				controller2.addEventListener( 'selectstart', onControllerEvent );
+				controller2.addEventListener( 'selectend', onControllerEvent );
+				controller2.addEventListener( 'move', onControllerEvent );
+				controller2.userData.active = true;
+				controllers.add( controller2 );
+
+				//
+
+				const controllerModelFactory = new XRControllerModelFactory();
+
+				const controllerGrip1 = renderer.xr.getControllerGrip( 0 );
+				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
+				controllers.add( controllerGrip1 );
+
+				const controllerGrip2 = renderer.xr.getControllerGrip( 1 );
+				controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
+				controllers.add( controllerGrip2 );
+
+				// menu
+
+				group = new InteractiveGroup();
+
+				const mesh = new HTMLMesh( sidebar );
+				mesh.name = 'picker'; // Make Selector be aware of the menu
+				mesh.position.set( 0.5, 1.0, - 0.5 );
+				mesh.rotation.y = - 0.5;
+				group.add( mesh );
+
+				group.listenToXRControllerEvents( controller1 );
+				group.listenToXRControllerEvents( controller2 );
+
+			}
+
+			editor.sceneHelpers.add( group );
+			editor.sceneHelpers.add( controllers );
+
+			renderer.xr.enabled = true;
+			renderer.xr.addEventListener( 'sessionend', onSessionEnded );
+
+			await renderer.xr.setSession( session );
+
+		};
+
+		const onSessionEnded = async () => {
+
+			editor.sceneHelpers.remove( group );
+			editor.sceneHelpers.remove( controllers );
+
+			const sidebar = document.getElementById( 'sidebar' );
+			sidebar.style.width = '';
+			sidebar.style.height = '';
+
+			renderer.xr.removeEventListener( 'sessionend', onSessionEnded );
+			renderer.xr.enabled = false;
+
+			editor.camera.copy( camera );
+
+			signals.windowResize.dispatch();
+			signals.leaveXR.dispatch();
+
+		};
+
+		// signals
+
+		const sessionInit = { optionalFeatures: [ 'local-floor' ] };
+
+		signals.enterXR.add( ( mode ) => {
+
+			if ( 'xr' in navigator ) {
+
+				navigator.xr.requestSession( mode, sessionInit )
+					.then( onSessionStarted );
+
+			}
+
+		} );
+
+		signals.offerXR.add( function ( mode ) {
+
+			if ( 'xr' in navigator ) {
+
+				navigator.xr.offerSession( mode, sessionInit )
+					.then( onSessionStarted );
+
+				signals.leaveXR.add( function () {
+
+					navigator.xr.offerSession( mode, sessionInit )
+						.then( onSessionStarted );
+
+				} );
+
+			}
+
+		} );
+
+		signals.rendererCreated.add( ( value ) => {
+
+			renderer = value;
+
+		} );
+
+	}
+
+}
+
+export { XR };