super-three 0.179.0 → 0.184.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' );
@@ -120,7 +125,7 @@ class SVGRenderer {
 		/**
 		 * The DOM where the renderer appends its child-elements.
 		 *
-		 * @type {DOMElement}
+		 * @type {SVGSVGElement}
 		 */
 		this.domElement = _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,26 @@ 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
+
+			}
+
+		}
+
 		/**
 		 * Performs a manual clear with the defined clear color.
 		 */
@@ -327,10 +352,7 @@ class SVGRenderer {
 
 			calculateLights( _lights );
 
-			 // reset accumulated path
-
-			_currentPath = '';
-			_currentStyle = '';
+			_renderListCount = 0;
 
 			for ( let e = 0, el = _elements.length; e < el; e ++ ) {
 
@@ -339,88 +361,130 @@ class SVGRenderer {
 
 				if ( material === undefined || material.opacity === 0 ) continue;
 
-				_elemBox.makeEmpty();
+				getRenderItem( _renderListCount ++, 'element', element, material );
 
-				if ( element instanceof RenderableSprite ) {
+			}
+
+			_svgObjectCount = 0;
 
-					_v1 = element;
-					_v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf;
+			scene.traverseVisible( function ( object ) {
 
-					renderSprite( _v1, element, material );
+				if ( object.isSVGObject ) {
 
-				} else if ( element instanceof RenderableLine ) {
+					_vector3.setFromMatrixPosition( object.matrixWorld );
+					_vector3.applyMatrix4( _viewProjectionMatrix );
 
-					_v1 = element.v1; _v2 = element.v2;
+					if ( _vector3.z < - 1 || _vector3.z > 1 ) return;
 
-					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
-					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+					const x = _vector3.x * _svgWidthHalf;
+					const y = - _vector3.y * _svgHeightHalf;
 
-					_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] );
+					const svgObject = getSVGObjectData( _svgObjectCount ++ );
 
-					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+					svgObject.node = object.node;
+					svgObject.x = x;
+					svgObject.y = y;
+					svgObject.z = _vector3.z;
+					svgObject.renderOrder = object.renderOrder;
 
-						renderLine( _v1, _v2, material );
+					getRenderItem( _renderListCount ++, 'svgObject', svgObject, null );
 
-					}
+				}
 
-				} else if ( element instanceof RenderableFace ) {
+			} );
 
-					_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
+			_renderListPool.length = _renderListCount;
 
-					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 && _svgObjectCount > 0 ) {
 
-					_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
-					_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
-					_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
+				// Elements are already sorted by the Projector.
+				// Only re-sort when SVGObjects need depth-interleaving.
+				_renderListPool.sort( renderSort );
 
-					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 +724,71 @@ class SVGRenderer {
 
 		function getPathNode( id ) {
 
-			if ( _svgPathPool[ id ] == null ) {
+			let path = _svgPathPool[ id ];
+
+			if ( path === undefined ) {
 
-				_svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+				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 _svgPathPool[ id ];
+			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 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/ACESFilmicToneMappingShader.js

@@ -5,7 +5,7 @@
 
 /**
  * ACES Filmic Tone Mapping Shader by Stephen Hill.
- * Reference: [ltc_blit.fs]{@link https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs}
+ * Reference: [ltc_blit.fs](https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs)
  *
  * This implementation of ACES is modified to accommodate a brighter viewing environment.
  * The scale factor of 1/0.6 is subjective. See discussion in #19621.

package/examples/jsm/shaders/AfterimageShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Inspired by [Three.js FBO motion trails]{@link https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&}.
+ * Inspired by [Three.js FBO motion trails](https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/BleachBypassShader.js

@@ -6,7 +6,7 @@
 
 /**
  * Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass] based on
- * [Nvidia Shader library]{@link http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass}.
+ * [Nvidia Shader library](http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/BokehShader.js

@@ -5,7 +5,7 @@
 
 /**
  * Depth-of-field shader with bokeh ported from
- * [GLSL shader by Martins Upitis]{@link http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html}.
+ * [GLSL shader by Martins Upitis](http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/BokehShader2.js

@@ -9,7 +9,7 @@ import {
 
 /**
  * Depth-of-field shader with bokeh ported from
- * [GLSL shader by Martins Upitis]{@link http://blenderartists.org/forum/showthread.php?237488-GLSL-depth-of-field-with-bokeh-v2-4-(update)}.
+ * [GLSL shader by Martins Upitis](http://blenderartists.org/forum/showthread.php?237488-GLSL-depth-of-field-with-bokeh-v2-4-(update)).
  *
  * Requires #define RINGS and SAMPLES integers
  *

package/examples/jsm/shaders/DotScreenShader.js

@@ -8,7 +8,7 @@ import {
  */
 
 /**
- * Dot screen shader based on [glfx.js sepia shader]{@link https://github.com/evanw/glfx.js}.
+ * Dot screen shader based on [glfx.js sepia shader](https://github.com/evanw/glfx.js).
  *
  * @constant
  * @type {ShaderMaterial~Shader}

package/examples/jsm/shaders/FocusShader.js

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

package/examples/jsm/shaders/GTAOShader.js

@@ -15,8 +15,8 @@ import {
  * GTAO shader. Use by {@link GTAOPass}.
  *
  * References:
- * - [Practical Realtime Strategies for Accurate Indirect Occlusion]{@link https://iryoku.com/downloads/Practical-Realtime-Strategies-for-Accurate-Indirect-Occlusion.pdf}.
- * - [Horizon-Based Indirect Lighting (HBIL)]{@link https://github.com/Patapom/GodComplex/blob/master/Tests/TestHBIL/2018%20Mayaux%20-%20Horizon-Based%20Indirect%20Lighting%20(HBIL).pdf}
+ * - [Practical Realtime Strategies for Accurate Indirect Occlusion](https://iryoku.com/downloads/Practical-Realtime-Strategies-for-Accurate-Indirect-Occlusion.pdf).
+ * - [Horizon-Based Indirect Lighting (HBIL)](https://github.com/Patapom/GodComplex/blob/master/Tests/TestHBIL/2018%20Mayaux%20-%20Horizon-Based%20Indirect%20Lighting%20(HBIL).pdf)
  *
  * @constant
  * @type {ShaderMaterial~Shader}
@@ -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/KaleidoShader.js

@@ -7,7 +7,7 @@
  * Kaleidoscope Shader.
  * Radial reflection around center point
  * Ported from: {@link http://pixelshaders.com/editor/}
- * by [Toby Schachman]{@link http://tobyschachman.com/}
+ * by [Toby Schachman](http://tobyschachman.com/)
  *
  * sides: number of reflections
  * angle: initial angle in radians

package/examples/jsm/shaders/PoissonDenoiseShader.js

@@ -13,8 +13,8 @@ import {
  * Poisson Denoise Shader.
  *
  * References:
- * - [Self-Supervised Poisson-Gaussian Denoising]{@link https://openaccess.thecvf.com/content/WACV2021/papers/Khademi_Self-Supervised_Poisson-Gaussian_Denoising_WACV_2021_paper.pdf}.
- * - [Poisson2Sparse: Self-Supervised Poisson Denoising From a Single Image]{@link https://arxiv.org/pdf/2206.01856.pdf}
+ * - [Self-Supervised Poisson-Gaussian Denoising](https://openaccess.thecvf.com/content/WACV2021/papers/Khademi_Self-Supervised_Poisson-Gaussian_Denoising_WACV_2021_paper.pdf).
+ * - [Poisson2Sparse: Self-Supervised Poisson Denoising From a Single Image](https://arxiv.org/pdf/2206.01856.pdf)
  *
  * @constant
  * @type {ShaderMaterial~Shader}
@@ -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

@@ -8,7 +8,7 @@ import {
  * A collection of shaders used for SSR.
  *
  * References:
- * - [3D Game Shaders For Beginners, Screen Space Reflection (SSR)]{@link https://lettier.github.io/3d-game-shaders-for-beginners/screen-space-reflection.html}.
+ * - [3D Game Shaders For Beginners, Screen Space Reflection (SSR)](https://lettier.github.io/3d-game-shaders-for-beginners/screen-space-reflection.html).
  *
  * @module SSRShader
  * @three_import import * as SSRShader from 'three/addons/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/SepiaShader.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * Sepia tone shader based on [glfx.js sepia shader]{@link https://github.com/evanw/glfx.js}.
+ * Sepia tone shader based on [glfx.js sepia shader](https://github.com/evanw/glfx.js).
  *
  * @constant
  * @type {ShaderMaterial~Shader}