@needle-tools/three 0.146.10 → 0.153.0

package/examples/jsm/utils/TextureUtils.js

@@ -7,79 +7,80 @@ import {
 	Scene,
 	WebGLRenderer,
 	Texture,
-    sRGBEncoding
+	SRGBColorSpace
 } from 'three';
 
-let temporaryRenderer;
+let _renderer;
 let fullscreenQuadGeometry;
 let fullscreenQuadMaterial;
 let fullscreenQuad;
 
-function decompress( texture, maxTextureSize, renderer ) {
+export function decompress( texture, maxTextureSize = Infinity, renderer = null ) {
 
-    if ( !fullscreenQuadGeometry ) fullscreenQuadGeometry = new PlaneGeometry( 2, 2, 1, 1 );
-    if ( !fullscreenQuadMaterial ) fullscreenQuadMaterial = new ShaderMaterial( {
-        uniforms: { blitTexture: new Uniform( texture ) },
-        vertexShader: `
+	if ( ! fullscreenQuadGeometry ) fullscreenQuadGeometry = new PlaneGeometry( 2, 2, 1, 1 );
+	if ( ! fullscreenQuadMaterial ) fullscreenQuadMaterial = new ShaderMaterial( {
+		uniforms: { blitTexture: new Uniform( texture ) },
+		vertexShader: `
             varying vec2 vUv;
             void main(){
                 vUv = uv;
                 gl_Position = vec4(position.xy * 1.0,0.,.999999);
             }`,
-        fragmentShader: `
+		fragmentShader: `
             uniform sampler2D blitTexture; 
             varying vec2 vUv;
 
-            // took from threejs 05fc79cd52b79e8c3e8dec1e7dca72c5c39983a4
-            vec4 conv_LinearTosRGB( in vec4 value ) {
-                return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
-            }
-
             void main(){ 
                 gl_FragColor = vec4(vUv.xy, 0, 1);
                 
                 #ifdef IS_SRGB
-                gl_FragColor = conv_LinearTosRGB( texture2D( blitTexture, vUv) );
+                gl_FragColor = LinearTosRGB( texture2D( blitTexture, vUv) );
                 #else
                 gl_FragColor = texture2D( blitTexture, vUv);
                 #endif
             }`
-    } );
+	} );
 
-    fullscreenQuadMaterial.uniforms.blitTexture.value = texture;
-    fullscreenQuadMaterial.defines.IS_SRGB = texture.encoding == sRGBEncoding;
-    fullscreenQuadMaterial.needsUpdate = true;
+	fullscreenQuadMaterial.uniforms.blitTexture.value = texture;
+	fullscreenQuadMaterial.defines.IS_SRGB = texture.colorSpace == SRGBColorSpace;
+	fullscreenQuadMaterial.needsUpdate = true;
 
-    if ( !fullscreenQuad ) {
+	if ( ! fullscreenQuad ) {
 
-        fullscreenQuad = new Mesh( fullscreenQuadGeometry, fullscreenQuadMaterial );
-        fullscreenQuad.frustrumCulled = false;
+		fullscreenQuad = new Mesh( fullscreenQuadGeometry, fullscreenQuadMaterial );
+		fullscreenQuad.frustrumCulled = false;
 
-    }
+	}
 
-    const temporaryCam = new PerspectiveCamera();
-    const temporaryScene = new Scene();
-    temporaryScene.add( fullscreenQuad );
+	const _camera = new PerspectiveCamera();
+	const _scene = new Scene();
+	_scene.add( fullscreenQuad );
 
-    if ( !renderer ) {
+	if ( ! renderer ) {
 
-        if ( !temporaryRenderer )
-            temporaryRenderer = new WebGLRenderer( { antialias: false } );
+		renderer = _renderer = new WebGLRenderer( { antialias: false } );
 
-        renderer = temporaryRenderer;
+	}
 
-    }
+	renderer.setSize( Math.min( texture.image.width, maxTextureSize ), Math.min( texture.image.height, maxTextureSize ) );
+	renderer.clear();
+	renderer.render( _scene, _camera );
 
-    renderer.setSize( Math.min(texture.image.width, maxTextureSize), Math.min(texture.image.height, maxTextureSize) );
-    renderer.clear();
-    renderer.render( temporaryScene, temporaryCam );
+	const readableTexture = new Texture( renderer.domElement );
 
-    const readableTexture = new Texture( renderer.domElement );
-    readableTexture.userData.mimeType = 'image/png';
-    return readableTexture;
+	readableTexture.minFilter = texture.minFilter;
+	readableTexture.magFilter = texture.magFilter;
+	readableTexture.wrapS = texture.wrapS;
+	readableTexture.wrapT = texture.wrapT;
+	readableTexture.name = texture.name;
 
-}
+	if ( _renderer ) {
+
+		_renderer.dispose();
+		_renderer = null;
 
-export {
-    decompress
-}
+	}
+
+	return readableTexture;
+
+}

package/examples/jsm/webxr/VRButton.js

@@ -174,8 +174,6 @@ class VRButton {
 
 	}
 
-	static xrSessionIsGranted = false;
-
 	static registerSessionGrantedListener() {
 
 		if ( 'xr' in navigator ) {
@@ -196,6 +194,7 @@ class VRButton {
 
 }
 
+VRButton.xrSessionIsGranted = false;
 VRButton.registerSessionGrantedListener();
 
 export { VRButton };

package/examples/jsm/webxr/XRButton.js

@@ -0,0 +1,198 @@
+class XRButton {
+
+	static createButton( renderer ) {
+
+		const button = document.createElement( 'button' );
+
+		function showStartXR( mode ) {
+
+			let currentSession = null;
+
+			async function onSessionStarted( session ) {
+
+				session.addEventListener( 'end', onSessionEnded );
+
+				await renderer.xr.setSession( session );
+
+				button.textContent = 'STOP XR';
+
+				currentSession = session;
+
+			}
+
+			function onSessionEnded( /*event*/ ) {
+
+				currentSession.removeEventListener( 'end', onSessionEnded );
+
+				button.textContent = 'START XR';
+
+				currentSession = null;
+
+			}
+
+			//
+
+			button.style.display = '';
+
+			button.style.cursor = 'pointer';
+			button.style.left = 'calc(50% - 50px)';
+			button.style.width = '100px';
+
+			button.textContent = 'START XR';
+
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
+
+			button.onclick = function () {
+
+				if ( currentSession === null ) {
+
+					const sessionInit = {
+						optionalFeatures: [
+							'local-floor',
+							'bounded-floor',
+							'hand-tracking',
+							'layers'
+						]
+					};
+
+					navigator.xr.requestSession( mode, sessionInit )
+						.then( onSessionStarted );
+
+				} else {
+
+					currentSession.end();
+
+				}
+
+			};
+
+		}
+
+		function disableButton() {
+
+			button.style.display = '';
+
+			button.style.cursor = 'auto';
+			button.style.left = 'calc(50% - 75px)';
+			button.style.width = '150px';
+
+			button.onmouseenter = null;
+			button.onmouseleave = null;
+
+			button.onclick = null;
+
+		}
+
+		function showXRNotSupported() {
+
+			disableButton();
+
+			button.textContent = 'XR NOT SUPPORTED';
+
+		}
+
+		function showXRNotAllowed( exception ) {
+
+			disableButton();
+
+			console.warn( 'Exception when trying to call xr.isSessionSupported', exception );
+
+			button.textContent = 'XR NOT ALLOWED';
+
+		}
+
+		function stylizeElement( element ) {
+
+			element.style.position = 'absolute';
+			element.style.bottom = '20px';
+			element.style.padding = '12px 6px';
+			element.style.border = '1px solid #fff';
+			element.style.borderRadius = '4px';
+			element.style.background = 'rgba(0,0,0,0.1)';
+			element.style.color = '#fff';
+			element.style.font = 'normal 13px sans-serif';
+			element.style.textAlign = 'center';
+			element.style.opacity = '0.5';
+			element.style.outline = 'none';
+			element.style.zIndex = '999';
+
+		}
+
+		if ( 'xr' in navigator ) {
+
+			button.id = 'XRButton';
+			button.style.display = 'none';
+
+			stylizeElement( button );
+
+			navigator.xr.isSessionSupported( 'immersive-ar' )
+				.then( function ( supported ) {
+
+					if ( supported ) {
+
+						showStartXR( 'immersive-ar' );
+
+					} else {
+
+						navigator.xr.isSessionSupported( 'immersive-vr' )
+							.then( function ( supported ) {
+
+								if ( supported ) {
+
+									showStartXR( 'immersive-vr' );
+
+								} else {
+
+									showXRNotSupported();
+
+								}
+
+							} ).catch( showXRNotAllowed );
+
+					}
+
+				} ).catch( showXRNotAllowed );
+
+			return button;
+
+		} else {
+
+			const message = document.createElement( 'a' );
+
+			if ( window.isSecureContext === false ) {
+
+				message.href = document.location.href.replace( /^http:/, 'https:' );
+				message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
+
+			} else {
+
+				message.href = 'https://immersiveweb.dev/';
+				message.innerHTML = 'WEBXR NOT AVAILABLE';
+
+			}
+
+			message.style.left = 'calc(50% - 90px)';
+			message.style.width = '180px';
+			message.style.textDecoration = 'none';
+
+			stylizeElement( message );
+
+			return message;
+
+		}
+
+	}
+
+}
+
+export { XRButton };

package/examples/jsm/webxr/XRHandPrimitiveModel.js

@@ -34,6 +34,7 @@ class XRHandPrimitiveModel {
 		const material = new MeshStandardMaterial();
 
 		this.handMesh = new InstancedMesh( geometry, material, 30 );
+		this.handMesh.frustumCulled = false;
 		this.handMesh.instanceMatrix.setUsage( DynamicDrawUsage ); // will be updated every frame
 		this.handMesh.castShadow = true;
 		this.handMesh.receiveShadow = true;

package/examples/jsm/webxr/XRPlanes.js

@@ -0,0 +1,100 @@
+import {
+	BoxGeometry,
+	Matrix4,
+	Mesh,
+	MeshBasicMaterial,
+	Object3D
+} from 'three';
+
+class XRPlanes extends Object3D {
+
+	constructor( renderer ) {
+
+		super();
+
+		const matrix = new Matrix4();
+
+		const currentPlanes = new Map();
+
+		const xr = renderer.xr;
+
+		xr.addEventListener( 'planesdetected', event => {
+
+			const frame = event.data;
+			const planes = frame.detectedPlanes;
+
+			const referenceSpace = xr.getReferenceSpace();
+
+			let planeschanged = false;
+
+			for ( const [ plane, mesh ] of currentPlanes ) {
+
+				if ( planes.has( plane ) === false ) {
+
+					mesh.geometry.dispose();
+					mesh.material.dispose();
+					this.remove( mesh );
+
+					currentPlanes.delete( plane );
+
+					planeschanged = true;
+
+				}
+
+			}
+
+			for ( const plane of planes ) {
+
+				if ( currentPlanes.has( plane ) === false ) {
+
+					const pose = frame.getPose( plane.planeSpace, referenceSpace );
+					matrix.fromArray( pose.transform.matrix );
+
+					const polygon = plane.polygon;
+
+					let minX = Number.MAX_SAFE_INTEGER;
+					let maxX = Number.MIN_SAFE_INTEGER;
+					let minZ = Number.MAX_SAFE_INTEGER;
+					let maxZ = Number.MIN_SAFE_INTEGER;
+
+					for ( const point of polygon ) {
+
+						minX = Math.min( minX, point.x );
+						maxX = Math.max( maxX, point.x );
+						minZ = Math.min( minZ, point.z );
+						maxZ = Math.max( maxZ, point.z );
+
+					}
+
+					const width = maxX - minX;
+					const height = maxZ - minZ;
+
+					const geometry = new BoxGeometry( width, 0.01, height );
+					const material = new MeshBasicMaterial( { color: 0xffffff * Math.random() } );
+
+					const mesh = new Mesh( geometry, material );
+					mesh.position.setFromMatrixPosition( matrix );
+					mesh.quaternion.setFromRotationMatrix( matrix );
+					this.add( mesh );
+
+					currentPlanes.set( plane, mesh );
+
+					planeschanged = true;
+
+				}
+
+			}
+
+			if ( planeschanged ) {
+
+				this.dispatchEvent( { type: 'planeschanged' } );
+
+			}
+
+		} );
+
+	}
+
+}
+
+export { XRPlanes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/three",
-  "version": "0.146.10",
+  "version": "0.153.0",
   "description": "JavaScript 3D library",
   "type": "module",
   "main": "./build/three.js",
@@ -22,11 +22,7 @@
   },
   "sideEffects": false,
   "files": [
-    "build/three.js",
-    "build/three.cjs",
-    "build/three.min.js",
-    "build/three.module.js",
-    "examples/js",
+    "build",
     "examples/jsm",
     "examples/fonts",
     "LICENSE",
@@ -39,65 +35,6 @@
     "example": "examples",
     "test": "test"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "mdcs",
-      "plugin:compat/recommended"
-    ],
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-      "babelOptions": {
-        "configFile": "./utils/build/.babelrc.json"
-      }
-    },
-    "plugins": [
-      "html",
-      "import"
-    ],
-    "settings": {
-      "polyfills": [
-        "WebGL2RenderingContext"
-      ]
-    },
-    "globals": {
-      "__THREE_DEVTOOLS__": "readonly",
-      "WebGL2ComputeRenderingContext": "readonly",
-      "potpack": "readonly",
-      "fflate": "readonly",
-      "OIMO": "readonly",
-      "Stats": "readonly",
-      "XRWebGLBinding": "readonly",
-      "XRWebGLLayer": "readonly",
-      "GPUShaderStage": "readonly",
-      "GPUBufferUsage": "readonly",
-      "GPUTextureUsage": "readonly",
-      "QUnit": "readonly",
-      "Ammo":"readonly",
-      "XRRigidTransform":"readonly",
-      "XRMediaBinding":"readonly"
-    },
-    "rules": {
-      "no-throw-literal": [
-        "error"
-      ],
-      "import/extensions": [
-        "error",
-        "always"
-      ],
-      "quotes": [
-        "error",
-        "single"
-      ],
-      "prefer-const": [
-        "error",
-        {
-          "destructuring": "any",
-          "ignoreReadBeforeAssign": false
-        }
-      ]
-    }
-  },
   "browserslist": [
     "> 1%, not dead, not ie 11, not op_mini all"
   ],
@@ -106,13 +43,19 @@
     "test": "npm run lint && npm run test-unit",
     "build": "rollup -c utils/build/rollup.config.js",
     "build-module": "rollup -c utils/build/rollup.config.js --configOnlyModule",
-    "build-examples": "rollup -c utils/build/rollup.examples.config.js && echo '\nFormatting...' && eslint examples/js --ext js --ignore-pattern libs --ignore-pattern ifc --fix",
     "dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080 --ssl\"",
-    "lint": "eslint src --ext js",
-    "lint-examples": "eslint examples/js examples/jsm examples/*.html --ext js,html --ignore-pattern libs --ignore-pattern ifc",
-    "lint-docs": "eslint docs --ext html",
-    "lint-fix": "npm run lint -- --fix && npm run lint-examples -- --fix && npm run lint-docs -- --fix",
-    "test-unit": "npm run unit --prefix test",
+    "lint-core": "eslint src",
+    "lint-addons": "eslint examples/jsm --ext .js --ignore-pattern libs --ignore-pattern ifc",
+    "lint-examples": "eslint examples --ext .html",
+    "lint-docs": "eslint docs --ignore-pattern prettify.js",
+    "lint-editor": "eslint editor --ignore-pattern libs",
+    "lint-playground": "eslint playground --ignore-pattern libs",
+    "lint-manual": "eslint manual --ignore-pattern 3rdparty --ignore-pattern prettify.js --ignore-pattern shapefile.js",
+    "lint-test": "eslint test --ignore-pattern vendor",
+    "lint-utils": "eslint utils",
+    "lint": "npm run lint-core",
+    "lint-fix": "npm run lint-core -- --fix && npm run lint-addons -- --fix && npm run lint-examples -- --fix && npm run lint-docs -- --fix && npm run lint-editor -- --fix && npm run lint-playground -- --fix && npm run lint-manual -- --fix && npm run lint-test -- --fix && npm run lint-utils -- --fix",
+    "test-unit": "qunit -r failonlyreporter -f !-webonly test/unit/three.source.unit.js",
     "test-e2e": "node test/e2e/puppeteer.js",
     "test-e2e-cov": "node test/e2e/check-coverage.js",
     "test-treeshake": "rollup -c test/rollup.treeshake.config.js",
@@ -141,24 +84,28 @@
   },
   "homepage": "https://threejs.org/",
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.19.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-node-resolve": "^14.1.0",
-    "chalk": "^5.0.1",
-    "concurrently": "^7.4.0",
-    "eslint": "^8.24.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "chalk": "^5.2.0",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.37.0",
     "eslint-config-mdcs": "^5.0.0",
-    "eslint-plugin-compat": "^4.0.2",
+    "eslint-plugin-compat": "^4.1.2",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.26.0",
-    "rollup": "^2.79.1",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.8.2",
-    "servez": "^1.14.1"
+    "eslint-plugin-import": "^2.27.5",
+    "failonlyreporter": "^1.0.0",
+    "jimp": "^0.22.7",
+    "magic-string": "^0.30.0",
+    "pixelmatch": "^5.3.0",
+    "puppeteer-core": "^19.8.1",
+    "qunit": "^2.19.4",
+    "rollup": "^3.20.2",
+    "rollup-plugin-filesize": "^10.0.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "servez": "^1.14.2"
+  },
+  "overrides": {
+    "jpeg-js": "^0.4.4"
   },
   "jspm": {
     "files": [