@plastic-software/three 0.181.3 → 0.183.0

package/examples/jsm/renderers/SVGRenderer.js

@@ -8,12 +8,13 @@ import {
 	SRGBColorSpace,
 	Vector3
 } from 'three';
+
 import {
 	Projector,
 	RenderableFace,
 	RenderableLine,
 	RenderableSprite
-} from '../renderers/Projector.js';
+} from './Projector.js';
 
 /**
  * Can be used to wrap SVG elements into a 3D object.
@@ -87,6 +88,8 @@ class SVGRenderer {
 
 			_svgNode,
 			_pathCount = 0,
+			_svgObjectCount = 0,
+			_renderListCount = 0,
 
 			_precision = null,
 			_quality = 1,
@@ -113,6 +116,8 @@ class SVGRenderer {
 			_viewProjectionMatrix = new Matrix4(),
 
 			_svgPathPool = [],
+			_svgObjectsPool = [],
+			_renderListPool = [],
 
 			_projector = new Projector(),
 			_svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
@@ -183,8 +188,8 @@ class SVGRenderer {
 		};
 
 		/**
-		 * Sets the render quality. Setting to `high` means This value indicates that the browser
-		 * tries to improve the SVG quality over rendering speed and geometric precision.
+		 * Sets the render quality. Setting to `high` makes the browser improve SVG quality
+		 * over rendering speed and geometric precision.
 		 *
 		 * @param {('low'|'high')} quality - The quality.
 		 */
@@ -275,6 +280,49 @@ class SVGRenderer {
 
 		}
 
+		function renderSort( a, b ) {
+
+			const aOrder = a.data.renderOrder !== undefined ? a.data.renderOrder : 0;
+			const bOrder = b.data.renderOrder !== undefined ? b.data.renderOrder : 0;
+
+			if ( aOrder !== bOrder ) {
+
+				return aOrder - bOrder;
+
+			} else {
+
+				const aZ = a.data.z !== undefined ? a.data.z : 0;
+				const bZ = b.data.z !== undefined ? b.data.z : 0;
+
+				return bZ - aZ; // Painter's algorithm: far to near
+
+			}
+
+		}
+
+		function arraySortStable( array, start, length ) {
+
+			// A stable insertion sort for sorting the render list
+			// This avoids the GC overhead of Array.prototype.sort()
+
+			for ( let i = start + 1; i < start + length; i ++ ) {
+
+				const item = array[ i ];
+				let j = i - 1;
+
+				while ( j >= start && renderSort( array[ j ], item ) > 0 ) {
+
+					array[ j + 1 ] = array[ j ];
+					j --;
+
+				}
+
+				array[ j + 1 ] = item;
+
+			}
+
+		}
+
 		/**
 		 * Performs a manual clear with the defined clear color.
 		 */
@@ -327,10 +375,7 @@ class SVGRenderer {
 
 			calculateLights( _lights );
 
-			 // reset accumulated path
-
-			_currentPath = '';
-			_currentStyle = '';
+			_renderListCount = 0;
 
 			for ( let e = 0, el = _elements.length; e < el; e ++ ) {
 
@@ -339,88 +384,126 @@ class SVGRenderer {
 
 				if ( material === undefined || material.opacity === 0 ) continue;
 
-				_elemBox.makeEmpty();
+				getRenderItem( _renderListCount ++, 'element', element, material );
 
-				if ( element instanceof RenderableSprite ) {
+			}
 
-					_v1 = element;
-					_v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf;
+			_svgObjectCount = 0;
 
-					renderSprite( _v1, element, material );
+			scene.traverseVisible( function ( object ) {
 
-				} else if ( element instanceof RenderableLine ) {
+				if ( object.isSVGObject ) {
 
-					_v1 = element.v1; _v2 = element.v2;
+					_vector3.setFromMatrixPosition( object.matrixWorld );
+					_vector3.applyMatrix4( _viewProjectionMatrix );
 
-					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
-					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+					if ( _vector3.z < - 1 || _vector3.z > 1 ) return;
 
-					_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] );
+					const x = _vector3.x * _svgWidthHalf;
+					const y = - _vector3.y * _svgHeightHalf;
 
-					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+					const svgObject = getSVGObjectData( _svgObjectCount ++ );
 
-						renderLine( _v1, _v2, material );
+					svgObject.node = object.node;
+					svgObject.x = x;
+					svgObject.y = y;
+					svgObject.z = _vector3.z;
+					svgObject.renderOrder = object.renderOrder;
 
-					}
+					getRenderItem( _renderListCount ++, 'svgObject', svgObject, null );
 
-				} else if ( element instanceof RenderableFace ) {
+				}
 
-					_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
+			} );
 
-					if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
-					if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
-					if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
+			if ( this.sortElements ) {
 
-					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
-					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
-					_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
+				arraySortStable( _renderListPool, 0, _renderListCount );
 
-					if ( this.overdraw > 0 ) {
+			}
 
-						expand( _v1.positionScreen, _v2.positionScreen, this.overdraw );
-						expand( _v2.positionScreen, _v3.positionScreen, this.overdraw );
-						expand( _v3.positionScreen, _v1.positionScreen, this.overdraw );
+			// Reset accumulated path
+			_currentPath = '';
+			_currentStyle = '';
 
-					}
+			// Render in sorted order
+			for ( let i = 0; i < _renderListCount; i ++ ) {
 
-					_elemBox.setFromPoints( [
-						_v1.positionScreen,
-						_v2.positionScreen,
-						_v3.positionScreen
-					] );
+				const item = _renderListPool[ i ];
 
-					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+				if ( item.type === 'svgObject' ) {
 
-						renderFace3( _v1, _v2, _v3, element, material );
+					flushPath(); // Flush any accumulated paths before inserting SVG node
 
-					}
+					const svgObject = item.data;
+					const node = svgObject.node;
+					node.setAttribute( 'transform', 'translate(' + svgObject.x + ',' + svgObject.y + ')' );
+					_svg.appendChild( node );
 
-				}
+				} else {
 
-			}
+					const element = item.data;
+					const material = item.material;
 
-			flushPath(); // just to flush last svg:path
+					_elemBox.makeEmpty();
 
-			scene.traverseVisible( function ( object ) {
+					if ( element instanceof RenderableSprite ) {
 
-				 if ( object.isSVGObject ) {
+						_v1 = element;
+						_v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf;
 
-					_vector3.setFromMatrixPosition( object.matrixWorld );
-					_vector3.applyMatrix4( _viewProjectionMatrix );
+						renderSprite( _v1, element, material );
 
-					if ( _vector3.z < - 1 || _vector3.z > 1 ) return;
+					} else if ( element instanceof RenderableLine ) {
 
-					const x = _vector3.x * _svgWidthHalf;
-					const y = - _vector3.y * _svgHeightHalf;
+						_v1 = element.v1; _v2 = element.v2;
 
-					const node = object.node;
-					node.setAttribute( 'transform', 'translate(' + x + ',' + y + ')' );
+						_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
+						_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
 
-					_svg.appendChild( node );
+						_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] );
+
+						if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+							renderLine( _v1, _v2, material );
+
+						}
+
+					} else if ( element instanceof RenderableFace ) {
+
+						_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
+
+						_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
+						_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+						_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
+
+						if ( this.overdraw > 0 ) {
+
+							expand( _v1.positionScreen, _v2.positionScreen, this.overdraw );
+							expand( _v2.positionScreen, _v3.positionScreen, this.overdraw );
+							expand( _v3.positionScreen, _v1.positionScreen, this.overdraw );
+
+						}
+
+						_elemBox.setFromPoints( [
+							_v1.positionScreen,
+							_v2.positionScreen,
+							_v3.positionScreen
+						] );
+
+						if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+							renderFace3( _v1, _v2, _v3, element, material );
+
+						}
+
+					}
 
 				}
 
-			} );
+			}
+
+			flushPath(); // Flush any remaining paths
 
 		};
 
@@ -660,21 +743,71 @@ class SVGRenderer {
 
 		function getPathNode( id ) {
 
-			if ( _svgPathPool[ id ] == null ) {
+			let path = _svgPathPool[ id ];
 
-				_svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+			if ( path === undefined ) {
+
+				path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
 
 				if ( _quality == 0 ) {
 
-					_svgPathPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
+					path.setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
 
 				}
 
-				return _svgPathPool[ id ];
+				_svgPathPool[ id ] = path;
+
+			}
+
+			return path;
+
+		}
+
+		function getSVGObjectData( id ) {
+
+			let svgObject = _svgObjectsPool[ id ];
+
+			if ( svgObject === undefined ) {
+
+				svgObject = {
+					node: null,
+					x: 0,
+					y: 0,
+					z: 0,
+					renderOrder: 0
+				};
+
+				_svgObjectsPool[ id ] = svgObject;
 
 			}
 
-			return _svgPathPool[ id ];
+			return svgObject;
+
+		}
+
+		function getRenderItem( id, type, data, material ) {
+
+			let item = _renderListPool[ id ];
+
+			if ( item === undefined ) {
+
+				item = {
+					type: type,
+					data: data,
+					material: material
+				};
+
+				_renderListPool[ id ] = item;
+
+				return item;
+
+			}
+
+			item.type = type;
+			item.data = data;
+			item.material = material;
+
+			return item;
 
 		}
 

package/examples/jsm/shaders/GTAOShader.js

@@ -91,8 +91,12 @@ const GTAOShader = {
 		#define FRAGMENT_OUTPUT vec4(vec3(ao), 1.)
 		#endif
 
-		vec3 getViewPosition(const in vec2 screenPosition, const in float depth) {
-			vec4 clipSpacePosition = vec4(vec3(screenPosition, depth) * 2.0 - 1.0, 1.0);
+		vec3 getViewPosition( const in vec2 screenPosition, const in float depth ) {
+			#ifdef USE_REVERSED_DEPTH_BUFFER
+				vec4 clipSpacePosition = vec4( vec2( screenPosition ) * 2.0 - 1.0, depth, 1.0 );
+			#else
+				vec4 clipSpacePosition = vec4( vec3( screenPosition, depth ) * 2.0 - 1.0, 1.0 );
+			#endif
 			vec4 viewSpacePosition = cameraProjectionMatrixInverse * clipSpacePosition;
 			return viewSpacePosition.xyz / viewSpacePosition.w;
 		}
@@ -154,10 +158,19 @@ const GTAOShader = {
 
 		void main() {
 			float depth = getDepth(vUv.xy);
-			if (depth >= 1.0) {
-				discard;
-				return;
-			}
+
+			#ifdef USE_REVERSED_DEPTH_BUFFER
+				if (depth <= 0.0) {
+					discard;
+					return;
+				}
+			#else
+				if (depth >= 1.0) {
+					discard;
+					return;
+				}
+			#endif
+			
 			vec3 viewPos = getViewPosition(vUv, depth);
 			vec3 viewNormal = getViewNormal(vUv);
 

package/examples/jsm/shaders/HalftoneShader.js

@@ -8,7 +8,7 @@
  *
  * Used by {@link HalftonePass}.
  *
- * Shape (1 = Dot, 2 = Ellipse, 3 = Line, 4 = Square)
+ * Shape (1 = Dot, 2 = Ellipse, 3 = Line, 4 = Square, 5 = Diamond)
  * Blending Mode (1 = Linear, 2 = Multiply, 3 = Add, 4 = Lighter, 5 = Darker)
  *
  * @constant
@@ -49,11 +49,13 @@ const HalftoneShader = {
 
 		#define SQRT2_MINUS_ONE 0.41421356
 		#define SQRT2_HALF_MINUS_ONE 0.20710678
+		#define PI 3.14159265
 		#define PI2 6.28318531
 		#define SHAPE_DOT 1
 		#define SHAPE_ELLIPSE 2
 		#define SHAPE_LINE 3
 		#define SHAPE_SQUARE 4
+		#define SHAPE_DIAMOND 5
 		#define BLENDING_LINEAR 1
 		#define BLENDING_MULTIPLY 2
 		#define BLENDING_ADD 3
@@ -129,6 +131,15 @@ const HalftoneShader = {
 				rad = pow( abs( rad ), 1.4 );
 				rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );
 
+			} else if ( shape == SHAPE_DIAMOND ) {
+
+				float angle45 = PI / 4.0;
+				float theta = atan( p.y - coord.y, p.x - coord.x ) - angle - angle45;
+				float sin_t = abs( sin( theta ) );
+				float cos_t = abs( cos( theta ) );
+				rad = pow( abs( rad ), 1.4 );
+				rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );
+
 			}
 
 			return rad - dist;

package/examples/jsm/shaders/PoissonDenoiseShader.js

@@ -86,8 +86,12 @@ const PoissonDenoiseShader = {
 
 		const vec3 poissonDisk[SAMPLES] = SAMPLE_VECTORS;
 
-		vec3 getViewPosition(const in vec2 screenPosition, const in float depth) {
-			vec4 clipSpacePosition = vec4(vec3(screenPosition, depth) * 2.0 - 1.0, 1.0);
+		vec3 getViewPosition( const in vec2 screenPosition, const in float depth ) {
+			#ifdef USE_REVERSED_DEPTH_BUFFER
+				vec4 clipSpacePosition = vec4( vec2( screenPosition ) * 2.0 - 1.0, depth, 1.0 );
+			#else
+				vec4 clipSpacePosition = vec4( vec3( screenPosition, depth ) * 2.0 - 1.0, 1.0 );
+			#endif
 			vec4 viewSpacePosition = cameraProjectionMatrixInverse * clipSpacePosition;
 			return viewSpacePosition.xyz / viewSpacePosition.w;
 		}

package/examples/jsm/shaders/SAOShader.js

@@ -153,9 +153,15 @@ const SAOShader = {
 				angle += ANGLE_STEP;
 
 				float sampleDepth = getDepth( sampleUv );
-				if( sampleDepth >= ( 1.0 - EPSILON ) ) {
+				#ifdef USE_REVERSED_DEPTH_BUFFER
+				if( sampleDepth <= 0.0 + EPSILON ) {
 					continue;
 				}
+				#else
+					if( sampleDepth >= 1.0 - EPSILON ) {
+						continue;
+					}
+				#endif
 
 				float sampleViewZ = getViewZ( sampleDepth );
 				vec3 sampleViewPosition = getViewPosition( sampleUv, sampleDepth, sampleViewZ );
@@ -170,9 +176,16 @@ const SAOShader = {
 
 		void main() {
 			float centerDepth = getDepth( vUv );
-			if( centerDepth >= ( 1.0 - EPSILON ) ) {
-				discard;
-			}
+			
+			#ifdef USE_REVERSED_DEPTH_BUFFER
+				if( centerDepth <= 0.0 + EPSILON ) {
+					discard;
+				}
+			#else
+				if( centerDepth >= 1.0 - EPSILON ) {
+					discard;
+				}
+			#endif
 
 			float centerViewZ = getViewZ( centerDepth );
 			vec3 viewPosition = getViewPosition( vUv, centerDepth, centerViewZ );

package/examples/jsm/shaders/SSAOShader.js

@@ -79,6 +79,16 @@ const SSAOShader = {
 
 		#include <packing>
 
+		#ifdef USE_REVERSED_DEPTH_BUFFER
+
+			const float depthThreshold = 0.0;
+
+		#else
+
+			const float depthThreshold = 1.0;
+
+		#endif
+
 		float getDepth( const in vec2 screenPosition ) {
 
 			return texture2D( tDepth, screenPosition ).x;
@@ -137,7 +147,7 @@ const SSAOShader = {
 
 			float depth = getDepth( vUv );
 
-			if ( depth == 1.0 ) {
+			if ( depth == depthThreshold ) {
 
 				gl_FragColor = vec4( 1.0 ); // don't influence background
 

package/examples/jsm/shaders/SSRShader.js

@@ -96,7 +96,7 @@ const SSRShader = {
 			float x0=point.x,y0=point.y,z0=point.z;
 			float x=planePoint.x,y=planePoint.y,z=planePoint.z;
 			float d=-(a*x+b*y+c*z);
-			float distance=(a*x0+b*y0+c*z0+d)/sqrt(a*a+b*b+c*c);
+			float distance=a*x0+b*y0+c*z0+d;
 			return distance;
 		}
 		float getDepth( const in vec2 uv ) {
@@ -170,17 +170,17 @@ const SSRShader = {
 			#endif
 			d1=viewPositionToXY(d1viewPosition);
 
-			float totalLen=length(d1-d0);
 			float xLen=d1.x-d0.x;
 			float yLen=d1.y-d0.y;
 			float totalStep=max(abs(xLen),abs(yLen));
 			float xSpan=xLen/totalStep;
 			float ySpan=yLen/totalStep;
-			for(float i=0.;i<float(MAX_STEP);i++){
+			float sStep=1./totalStep;
+			float s=sStep; // start at sStep since loop starts at i=1
+			for(float i=1.;i<float(MAX_STEP);i++){
 				if(i>=totalStep) break;
 				vec2 xy=vec2(d0.x+i*xSpan,d0.y+i*ySpan);
 				if(xy.x<0.||xy.x>resolution.x||xy.y<0.||xy.y>resolution.y) break;
-				float s=length(xy-d0)/totalLen;
 				vec2 uv=xy/resolution;
 
 				float d = getDepth(uv);
@@ -221,7 +221,7 @@ const SSRShader = {
 
 					if(hit){
 						vec3 vN=getViewNormal( uv );
-						if(dot(viewReflectDir,vN)>=0.) continue;
+						if(dot(viewReflectDir,vN)>=0.) break; // treat backfaces as opaque
 						float distance=pointPlaneDistance(vP,viewPosition,viewNormal);
 						if(distance>maxDistance) break;
 						float op=opacity;
@@ -240,6 +240,7 @@ const SSRShader = {
 						break;
 					}
 				}
+				s+=sStep;
 			}
 		}
 	`

package/examples/jsm/shaders/UnpackDepthRGBAShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Unpack RGBA depth shader that shows RGBA encoded depth as monochrome color.
+ * Depth visualization shader that shows depth values as monochrome color.
  *
  * @constant
  * @type {ShaderMaterial~Shader}
@@ -39,11 +39,9 @@ const UnpackDepthRGBAShader = {
 
 		varying vec2 vUv;
 
-		#include <packing>
-
 		void main() {
 
-			float depth = unpackRGBAToDepth( texture2D( tDiffuse, vUv ) );
+			float depth = texture2D( tDiffuse, vUv ).r;
 
 			#ifdef USE_REVERSED_DEPTH_BUFFER
 

package/examples/jsm/shaders/VignetteShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Based on [PaintEffect postprocess from ro.me](http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js).
+ * Based on [PaintEffect postprocess from ro.me](https://github.com/dataarts/3-dreams-of-black/blob/master/deploy/js/effects/PaintEffect.js).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/transpiler/AST.js

@@ -46,6 +46,20 @@ export class ASTNode {
 
 	}
 
+	getProgram() {
+
+		let current = this;
+
+		while ( current.parent !== null ) {
+
+			current = current.parent;
+
+		}
+
+		return current.isProgram === true ? current : null;
+
+	}
+
 	getParent( parents = [] ) {
 
 		if ( this.parent === null ) {
@@ -114,6 +128,7 @@ export class Program extends ASTNode {
 		super();
 
 		this.body = body;
+		this.structTypes = new Map();
 
 		this.isProgram = true;
 
@@ -629,3 +644,32 @@ export class SwitchCase extends ASTNode {
 	}
 
 }
+
+// helper class for StructDefinition
+export class StructMember {
+
+	constructor( type, name ) {
+
+		this.type = type;
+		this.name = name;
+		this.isStructMember = true;
+
+	}
+
+}
+
+export class StructDefinition extends ASTNode {
+
+	constructor( name, members = [] ) {
+
+		super();
+
+		this.name = name;
+		this.members = members;
+		this.isStructDefinition = true;
+
+		this.initialize();
+
+	}
+
+}