zincjs 2.3.0 → 2.3.1-beta.0

package/src/three/line/LineMaterial.js

@@ -3,31 +3,18 @@ import {
 	ShaderMaterial,
 	UniformsLib,
 	UniformsUtils,
-	Vector2
+	Vector2,
 } from 'three';
 
-/**
- * parameters = {
- *  color: <hex>,
- *  linewidth: <float>,
- *  dashed: <boolean>,
- *  dashScale: <float>,
- *  dashSize: <float>,
- *  dashOffset: <float>,
- *  gapSize: <float>,
- *  resolution: <Vector2>, // to be set by renderer
- * }
- */
-
 UniformsLib.line = {
 
+	worldUnits: { value: 1 },
 	linewidth: { value: 1 },
-	resolution: { value: new Vector2( 1, 1 ) },
+	resolution: { value: new Vector2() },
+	dashOffset: { value: 0 },
 	dashScale: { value: 1 },
 	dashSize: { value: 1 },
-	dashOffset: { value: 0 },
-	gapSize: { value: 1 }, // todo FIX - maybe change to totalSize
-	opacity: { value: 1 }
+	gapSize: { value: 1 } // todo FIX - maybe change to totalSize
 
 };
 
@@ -39,7 +26,8 @@ ShaderLib[ 'line' ] = {
 		UniformsLib.line
 	] ),
 
-	vertexShader: /* glsl */`
+	vertexShader:
+	/* glsl */`
 		#include <common>
 		#include <color_pars_vertex>
 		#include <fog_pars_vertex>
@@ -55,7 +43,23 @@ ShaderLib[ 'line' ] = {
 		attribute vec3 instanceColorStart;
 		attribute vec3 instanceColorEnd;
 
-		varying vec2 vUv;
+		#ifdef WORLD_UNITS
+
+			varying vec4 worldPos;
+			varying vec3 worldStart;
+			varying vec3 worldEnd;
+
+			#ifdef USE_DASH
+
+				varying vec2 vUv;
+
+			#endif
+
+		#else
+
+			varying vec2 vUv;
+
+		#endif
 
 		#ifdef USE_DASH
 
@@ -66,18 +70,20 @@ ShaderLib[ 'line' ] = {
 
 		#endif
 
-		void trimSegment( const in vec4 start, inout vec4 end ) {
+		float trimSegmentAlpha( const in vec4 start, const in vec4 end ) {
 
-			// trim end segment so it terminates between the camera plane and the near plane
+			// compute the interpolation factor needed to trim the segment so it terminates
+			// between the camera plane and the near plane
 
 			// conservative estimate of the near plane
 			float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
 			float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
-			float nearEstimate = - 0.5 * b / a;
 
-			float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
+			// we need different nearEstimate formula for reversed and default depth buffer
+			// a is positive with a reversed depth buffer so it can be used for controlling the code flow
+			float nearEstimate = ( a > 0.0 ) ? ( - b / ( a + 1.0 ) ) : ( - 0.5 * b / a );
 
-			end.xyz = mix( start.xyz, end.xyz, alpha );
+			return ( nearEstimate - start.z ) / ( end.z - start.z );
 
 		}
 
@@ -89,19 +95,29 @@ ShaderLib[ 'line' ] = {
 
 			#endif
 
+			float aspect = resolution.x / resolution.y;
+
+			// camera space
+			vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
+			vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
+
 			#ifdef USE_DASH
 
-				vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
+				float lineDistanceStart = dashScale * instanceDistanceStart;
+				float lineDistanceEnd = dashScale * instanceDistanceEnd;
 
 			#endif
 
-			float aspect = resolution.x / resolution.y;
+			#ifdef WORLD_UNITS
 
-			vUv = uv;
+				worldStart = start.xyz;
+				worldEnd = end.xyz;
 
-			// camera space
-			vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
-			vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
+			#else
+
+				vUv = uv;
+
+			#endif
 
 			// special case for perspective projection, and segments that terminate either in, or behind, the camera plane
 			// clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
@@ -114,65 +130,127 @@ ShaderLib[ 'line' ] = {
 
 				if ( start.z < 0.0 && end.z >= 0.0 ) {
 
-					trimSegment( start, end );
+					float alpha = trimSegmentAlpha( start, end );
+					end.xyz = mix( start.xyz, end.xyz, alpha );
+
+					#ifdef USE_DASH
+
+						lineDistanceEnd = mix( lineDistanceStart, lineDistanceEnd, alpha );
+
+					#endif
 
 				} else if ( end.z < 0.0 && start.z >= 0.0 ) {
 
-					trimSegment( end, start );
+					float alpha = trimSegmentAlpha( end, start );
+					start.xyz = mix( end.xyz, start.xyz, alpha );
+
+					#ifdef USE_DASH
+
+						lineDistanceStart = mix( lineDistanceEnd, lineDistanceStart, alpha );
+
+					#endif
 
 				}
 
 			}
 
+			#ifdef USE_DASH
+
+				vLineDistance = ( position.y < 0.5 ) ? lineDistanceStart : lineDistanceEnd;
+				vUv = uv;
+
+			#endif
+
 			// clip space
 			vec4 clipStart = projectionMatrix * start;
 			vec4 clipEnd = projectionMatrix * end;
 
 			// ndc space
-			vec2 ndcStart = clipStart.xy / clipStart.w;
-			vec2 ndcEnd = clipEnd.xy / clipEnd.w;
+			vec3 ndcStart = clipStart.xyz / clipStart.w;
+			vec3 ndcEnd = clipEnd.xyz / clipEnd.w;
 
 			// direction
-			vec2 dir = ndcEnd - ndcStart;
+			vec2 dir = ndcEnd.xy - ndcStart.xy;
 
 			// account for clip-space aspect ratio
 			dir.x *= aspect;
 			dir = normalize( dir );
 
-			// perpendicular to dir
-			vec2 offset = vec2( dir.y, - dir.x );
+			#ifdef WORLD_UNITS
 
-			// undo aspect ratio adjustment
-			dir.x /= aspect;
-			offset.x /= aspect;
+				vec3 worldDir = normalize( end.xyz - start.xyz );
+				vec3 tmpFwd = normalize( mix( start.xyz, end.xyz, 0.5 ) );
+				vec3 worldUp = normalize( cross( worldDir, tmpFwd ) );
+				vec3 worldFwd = cross( worldDir, worldUp );
+				worldPos = position.y < 0.5 ? start: end;
 
-			// sign flip
-			if ( position.x < 0.0 ) offset *= - 1.0;
+				// height offset
+				float hw = linewidth * 0.5;
+				worldPos.xyz += position.x < 0.0 ? hw * worldUp : - hw * worldUp;
 
-			// endcaps
-			if ( position.y < 0.0 ) {
+				// don't extend the line if we're rendering dashes because we
+				// won't be rendering the endcaps
+				#ifndef USE_DASH
 
-				offset += - dir;
+					// cap extension
+					worldPos.xyz += position.y < 0.5 ? - hw * worldDir : hw * worldDir;
 
-			} else if ( position.y > 1.0 ) {
+					// add width to the box
+					worldPos.xyz += worldFwd * hw;
 
-				offset += dir;
+					// endcaps
+					if ( position.y > 1.0 || position.y < 0.0 ) {
 
-			}
+						worldPos.xyz -= worldFwd * 2.0 * hw;
+
+					}
+
+				#endif
 
-			// adjust for linewidth
-			offset *= linewidth;
+				// project the worldpos
+				vec4 clip = projectionMatrix * worldPos;
 
-			// adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
-			offset /= resolution.y;
+				// shift the depth of the projected points so the line
+				// segments overlap neatly
+				vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd;
+				clip.z = clipPose.z * clip.w;
 
-			// select end
-			vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
+			#else
+
+				vec2 offset = vec2( dir.y, - dir.x );
+				// undo aspect ratio adjustment
+				dir.x /= aspect;
+				offset.x /= aspect;
+
+				// sign flip
+				if ( position.x < 0.0 ) offset *= - 1.0;
+
+				// endcaps
+				if ( position.y < 0.0 ) {
+
+					offset += - dir;
+
+				} else if ( position.y > 1.0 ) {
+
+					offset += dir;
+
+				}
+
+				// adjust for linewidth
+				offset *= linewidth;
+
+				// adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
+				offset /= resolution.y;
 
-			// back to clip space
-			offset *= clip.w;
+				// select end
+				vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
 
-			clip.xy += offset;
+				// back to clip space
+				offset *= clip.w;
+
+				clip.xy += offset;
+
+			#endif
 
 			gl_Position = clip;
 
@@ -182,32 +260,83 @@ ShaderLib[ 'line' ] = {
 			#include <clipping_planes_vertex>
 			#include <fog_vertex>
 
-		}`,
+		}
+		`,
 
-	fragmentShader: /* glsl */`
+	fragmentShader:
+	/* glsl */`
 		uniform vec3 diffuse;
 		uniform float opacity;
+		uniform float linewidth;
 
 		#ifdef USE_DASH
 
-			uniform float dashSize;
 			uniform float dashOffset;
+			uniform float dashSize;
 			uniform float gapSize;
 
 		#endif
 
 		varying float vLineDistance;
 
+		#ifdef WORLD_UNITS
+
+			varying vec4 worldPos;
+			varying vec3 worldStart;
+			varying vec3 worldEnd;
+
+			#ifdef USE_DASH
+
+				varying vec2 vUv;
+
+			#endif
+
+		#else
+
+			varying vec2 vUv;
+
+		#endif
+
 		#include <common>
 		#include <color_pars_fragment>
 		#include <fog_pars_fragment>
 		#include <logdepthbuf_pars_fragment>
 		#include <clipping_planes_pars_fragment>
 
-		varying vec2 vUv;
+		vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) {
+
+			float mua;
+			float mub;
+
+			vec3 p13 = p1 - p3;
+			vec3 p43 = p4 - p3;
+
+			vec3 p21 = p2 - p1;
+
+			float d1343 = dot( p13, p43 );
+			float d4321 = dot( p43, p21 );
+			float d1321 = dot( p13, p21 );
+			float d4343 = dot( p43, p43 );
+			float d2121 = dot( p21, p21 );
+
+			float denom = d2121 * d4343 - d4321 * d4321;
+
+			float numer = d1343 * d4321 - d1321 * d4343;
+
+			mua = numer / denom;
+			mua = clamp( mua, 0.0, 1.0 );
+			mub = ( d1343 + d4321 * ( mua ) ) / d4343;
+			mub = clamp( mub, 0.0, 1.0 );
+
+			return vec2( mua, mub );
+
+		}
 
 		void main() {
 
+			float alpha = opacity;
+			vec4 diffuseColor = vec4( diffuse, alpha );
+
 			#include <clipping_planes_fragment>
 
 			#ifdef USE_DASH
@@ -218,37 +347,69 @@ ShaderLib[ 'line' ] = {
 
 			#endif
 
-			float alpha = opacity;
+			#ifdef WORLD_UNITS
 
-			#ifdef ALPHA_TO_COVERAGE
+				// Find the closest points on the view ray and the line segment
+				vec3 rayEnd = normalize( worldPos.xyz ) * 1e5;
+				vec3 lineDir = worldEnd - worldStart;
+				vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd );
 
-			// artifacts appear on some hardware if a derivative is taken within a conditional
-			float a = vUv.x;
-			float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
-			float len2 = a * a + b * b;
-			float dlen = fwidth( len2 );
+				vec3 p1 = worldStart + lineDir * params.x;
+				vec3 p2 = rayEnd * params.y;
+				vec3 delta = p1 - p2;
+				float len = length( delta );
+				float norm = len / linewidth;
 
-			if ( abs( vUv.y ) > 1.0 ) {
+				#ifndef USE_DASH
 
-				alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 );
+					#ifdef USE_ALPHA_TO_COVERAGE
 
-			}
+						float dnorm = fwidth( norm );
+						alpha = 1.0 - smoothstep( 0.5 - dnorm, 0.5 + dnorm, norm );
+
+					#else
+
+						if ( norm > 0.5 ) {
+
+							discard;
+
+						}
+
+					#endif
+
+				#endif
 
 			#else
 
-			if ( abs( vUv.y ) > 1.0 ) {
+				#ifdef USE_ALPHA_TO_COVERAGE
 
-				float a = vUv.x;
-				float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
-				float len2 = a * a + b * b;
+					// artifacts appear on some hardware if a derivative is taken within a conditional
+					float a = vUv.x;
+					float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
+					float len2 = a * a + b * b;
+					float dlen = fwidth( len2 );
 
-				if ( len2 > 1.0 ) discard;
+					if ( abs( vUv.y ) > 1.0 ) {
 
-			}
+						alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 );
 
-			#endif
+					}
 
-			vec4 diffuseColor = vec4( diffuse, alpha );
+				#else
+
+					if ( abs( vUv.y ) > 1.0 ) {
+
+						float a = vUv.x;
+						float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
+						float len2 = a * a + b * b;
+
+						if ( len2 > 1.0 ) discard;
+
+					}
+
+				#endif
+
+			#endif
 
 			#include <logdepthbuf_fragment>
 			#include <color_fragment>
@@ -256,22 +417,42 @@ ShaderLib[ 'line' ] = {
 			gl_FragColor = vec4( diffuseColor.rgb, alpha );
 
 			#include <tonemapping_fragment>
-			#include <encodings_fragment>
+			#include <colorspace_fragment>
 			#include <fog_fragment>
 			#include <premultiplied_alpha_fragment>
 
-		}`
-
+		}
+		`
 };
 
+/**
+ * A material for drawing wireframe-style geometries.
+ *
+ * Unlike {@link LineBasicMaterial}, it supports arbitrary line widths and allows using world units
+ * instead of screen space units. This material is used with {@link LineSegments2} and {@link Line2}.
+ *
+ * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
+ * use {@link Line2NodeMaterial}.
+ *
+ * @augments ShaderMaterial
+ * @three_import import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
+ */
 class LineMaterial extends ShaderMaterial {
 
+	/**
+	 * Constructs a new line segments geometry.
+	 *
+	 * @param {Object} [parameters] - An object with one or more properties
+	 * defining the material's appearance. Any property of the material
+	 * (including any property from inherited materials) can be passed
+	 * in here. Color values can be passed any type of value accepted
+	 * by {@link Color#set}.
+	 */
 	constructor( parameters ) {
 
 		super( {
 
 			type: 'LineMaterial',
-
 			uniforms: UniformsUtils.clone( ShaderLib[ 'line' ].uniforms ),
 
 			vertexShader: ShaderLib[ 'line' ].vertexShader,
@@ -281,226 +462,265 @@ class LineMaterial extends ShaderMaterial {
 
 		} );
 
-		Object.defineProperties( this, {
-
-			color: {
-
-				enumerable: true,
-
-				get: function () {
-
-					return this.uniforms.diffuse.value;
-
-				},
-
-				set: function ( value ) {
-
-					this.uniforms.diffuse.value = value;
-
-				}
-
-			},
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isLineMaterial = true;
 
-			linewidth: {
-
-				enumerable: true,
-
-				get: function () {
-
-					return this.uniforms.linewidth.value;
-
-				},
-
-				set: function ( value ) {
-
-					this.uniforms.linewidth.value = value;
-
-				}
-
-			},
+		this.setValues( parameters );
 
-			dashed: {
+	}
 
-				enumerable: true,
+	/**
+	 * The material's color.
+	 *
+	 * @type {Color}
+	 * @default (1,1,1)
+	 */
+	get color() {
 
-				get: function () {
+		return this.uniforms.diffuse.value;
 
-					return Boolean( 'USE_DASH' in this.defines );
+	}
 
-				},
+	set color( value ) {
 
-				set( value ) {
+		this.uniforms.diffuse.value = value;
 
-					if ( Boolean( value ) !== Boolean( 'USE_DASH' in this.defines ) ) {
+	}
 
-						this.needsUpdate = true;
+	/**
+	 * Whether the material's sizes (width, dash gaps) are in world units.
+	 *
+	 * @type {boolean}
+	 * @default false
+	 */
+	get worldUnits() {
 
-					}
+		return 'WORLD_UNITS' in this.defines;
 
-					if ( value === true ) {
+	}
 
-						this.defines.USE_DASH = '';
+	set worldUnits( value ) {
 
-					} else {
+		if ( ( value === true ) !== this.worldUnits ) {
 
-						delete this.defines.USE_DASH;
+			this.needsUpdate = true;
 
-					}
+		}
 
-				}
+		if ( value === true ) {
 
-			},
+			this.defines.WORLD_UNITS = '';
 
-			dashScale: {
+		} else {
 
-				enumerable: true,
+			delete this.defines.WORLD_UNITS;
 
-				get: function () {
+		}
 
-					return this.uniforms.dashScale.value;
+	}
 
-				},
+	/**
+	 * Controls line thickness in CSS pixel units when `worldUnits` is `false` (default),
+	 * or in world units when `worldUnits` is `true`.
+	 *
+	 * @type {number}
+	 * @default 1
+	 */
+	get linewidth() {
 
-				set: function ( value ) {
+		return this.uniforms.linewidth.value;
 
-					this.uniforms.dashScale.value = value;
+	}
 
-				}
+	set linewidth( value ) {
 
-			},
+		if ( ! this.uniforms.linewidth ) return;
+		this.uniforms.linewidth.value = value;
 
-			dashSize: {
+	}
 
-				enumerable: true,
+	/**
+	 * Whether the line is dashed, or solid.
+	 *
+	 * @type {boolean}
+	 * @default false
+	 */
+	get dashed() {
 
-				get: function () {
+		return 'USE_DASH' in this.defines;
 
-					return this.uniforms.dashSize.value;
+	}
 
-				},
+	set dashed( value ) {
 
-				set: function ( value ) {
+		if ( ( value === true ) !== this.dashed ) {
 
-					this.uniforms.dashSize.value = value;
+			this.needsUpdate = true;
 
-				}
+		}
 
-			},
+		if ( value === true ) {
 
-			dashOffset: {
+			this.defines.USE_DASH = '';
 
-				enumerable: true,
+		} else {
 
-				get: function () {
+			delete this.defines.USE_DASH;
 
-					return this.uniforms.dashOffset.value;
+		}
 
-				},
+	}
 
-				set: function ( value ) {
+	/**
+	 * The scale of the dashes and gaps.
+	 *
+	 * @type {number}
+	 * @default 1
+	 */
+	get dashScale() {
 
-					this.uniforms.dashOffset.value = value;
+		return this.uniforms.dashScale.value;
 
-				}
+	}
 
-			},
+	set dashScale( value ) {
 
-			gapSize: {
+		this.uniforms.dashScale.value = value;
 
-				enumerable: true,
+	}
 
-				get: function () {
+	/**
+	 * The size of the dash.
+	 *
+	 * @type {number}
+	 * @default 1
+	 */
+	get dashSize() {
 
-					return this.uniforms.gapSize.value;
+		return this.uniforms.dashSize.value;
 
-				},
+	}
 
-				set: function ( value ) {
+	set dashSize( value ) {
 
-					this.uniforms.gapSize.value = value;
+		this.uniforms.dashSize.value = value;
 
-				}
+	}
 
-			},
+	/**
+	 * Where in the dash cycle the dash starts.
+	 *
+	 * @type {number}
+	 * @default 0
+	 */
+	get dashOffset() {
 
-			opacity: {
+		return this.uniforms.dashOffset.value;
 
-				enumerable: true,
+	}
 
-				get: function () {
+	set dashOffset( value ) {
 
-					return this.uniforms.opacity.value;
+		this.uniforms.dashOffset.value = value;
 
-				},
+	}
 
-				set: function ( value ) {
+	/**
+	 * The size of the gap.
+	 *
+	 * @type {number}
+	 * @default 0
+	 */
+	get gapSize() {
 
-					this.uniforms.opacity.value = value;
+		return this.uniforms.gapSize.value;
 
-				}
+	}
 
-			},
+	set gapSize( value ) {
 
-			resolution: {
+		this.uniforms.gapSize.value = value;
 
-				enumerable: true,
+	}
 
-				get: function () {
+	/**
+	 * The opacity.
+	 *
+	 * @type {number}
+	 * @default 1
+	 */
+	get opacity() {
 
-					return this.uniforms.resolution.value;
+		return this.uniforms.opacity.value;
 
-				},
+	}
 
-				set: function ( value ) {
+	set opacity( value ) {
 
-					this.uniforms.resolution.value.copy( value );
+		if ( ! this.uniforms ) return;
+		this.uniforms.opacity.value = value;
 
-				}
+	}
 
-			},
+	/**
+	 * The size of the viewport, in screen pixels. This must be kept updated to make
+	 * screen-space rendering accurate. The `LineSegments2.onBeforeRender` callback
+	 * performs the update for visible objects.
+	 *
+	 * @type {Vector2}
+	 */
+	get resolution() {
 
-			alphaToCoverage: {
+		return this.uniforms.resolution.value;
 
-				enumerable: true,
+	}
 
-				get: function () {
+	set resolution( value ) {
 
-					return Boolean( 'ALPHA_TO_COVERAGE' in this.defines );
+		this.uniforms.resolution.value.copy( value );
 
-				},
+	}
 
-				set: function ( value ) {
+	/**
+	 * Whether to use alphaToCoverage or not. When enabled, this can improve the
+	 * anti-aliasing of line edges when using MSAA.
+	 *
+	 * @type {boolean}
+	 */
+	get alphaToCoverage() {
 
-					if ( Boolean( value ) !== Boolean( 'ALPHA_TO_COVERAGE' in this.defines ) ) {
+		return 'USE_ALPHA_TO_COVERAGE' in this.defines;
 
-						this.needsUpdate = true;
+	}
 
-					}
+	set alphaToCoverage( value ) {
 
-					if ( value === true ) {
+		if ( ! this.defines ) return;
 
-						this.defines.ALPHA_TO_COVERAGE = '';
-						this.extensions.derivatives = true;
+		if ( ( value === true ) !== this.alphaToCoverage ) {
 
-					} else {
+			this.needsUpdate = true;
 
-						delete this.defines.ALPHA_TO_COVERAGE;
-						this.extensions.derivatives = false;
+		}
 
-					}
+		if ( value === true ) {
 
-				}
+			this.defines.USE_ALPHA_TO_COVERAGE = '';
 
-			}
+		} else {
 
-		} );
+			delete this.defines.USE_ALPHA_TO_COVERAGE;
 
-		this.setValues( parameters );
+		}
 
 	}
 
 }
 
-LineMaterial.prototype.isLineMaterial = true;
-
 export { LineMaterial };