@plastic-software/three 0.182.0 → 0.183.0

package/examples/jsm/materials/LDrawConditionalLineNodeMaterial.js

@@ -1,5 +1,5 @@
-import { Color } from 'three/webgpu';
-import { attribute, cameraProjectionMatrix, dot, float, Fn, modelViewMatrix, modelViewProjection, NodeMaterial, normalize, positionGeometry, sign, uniform, varyingProperty, vec2, vec4 } from 'three/tsl';
+import { Color, NodeMaterial } from 'three/webgpu';
+import { attribute, cameraProjectionMatrix, dot, float, Fn, modelViewMatrix, modelViewProjection, normalize, positionGeometry, sign, uniform, varyingProperty, vec2, vec4 } from 'three/tsl';
 
 /**
  * A special line material for meshes loaded via {@link LDrawLoader}.

package/examples/jsm/objects/LensflareMesh.js

@@ -215,7 +215,7 @@ class LensflareMesh extends Mesh {
 
 			renderer.getViewport( viewport );
 
-			viewport.multiplyScalar( window.devicePixelRatio );
+			viewport.multiplyScalar( renderer.getPixelRatio() ).floor();
 
 			const renderTarget = renderer.getRenderTarget();
 			const type = ( renderTarget !== null ) ? renderTarget.texture.type : UnsignedByteType;

package/examples/jsm/objects/Sky.js

@@ -72,7 +72,13 @@ Sky.SkyShader = {
 		'mieCoefficient': { value: 0.005 },
 		'mieDirectionalG': { value: 0.8 },
 		'sunPosition': { value: new Vector3() },
-		'up': { value: new Vector3( 0, 1, 0 ) }
+		'up': { value: new Vector3( 0, 1, 0 ) },
+		'cloudScale': { value: 0.0002 },
+		'cloudSpeed': { value: 0.0001 },
+		'cloudCoverage': { value: 0.4 },
+		'cloudDensity': { value: 0.4 },
+		'cloudElevation': { value: 0.5 },
+		'time': { value: 0.0 }
 	},
 
 	vertexShader: /* glsl */`
@@ -150,13 +156,45 @@ Sky.SkyShader = {
 	fragmentShader: /* glsl */`
 		varying vec3 vWorldPosition;
 		varying vec3 vSunDirection;
-		varying float vSunfade;
 		varying vec3 vBetaR;
 		varying vec3 vBetaM;
 		varying float vSunE;
 
 		uniform float mieDirectionalG;
 		uniform vec3 up;
+		uniform float cloudScale;
+		uniform float cloudSpeed;
+		uniform float cloudCoverage;
+		uniform float cloudDensity;
+		uniform float cloudElevation;
+		uniform float time;
+
+		// Cloud noise functions
+		float hash( vec2 p ) {
+			return fract( sin( dot( p, vec2( 127.1, 311.7 ) ) ) * 43758.5453123 );
+		}
+
+		float noise( vec2 p ) {
+			vec2 i = floor( p );
+			vec2 f = fract( p );
+			f = f * f * ( 3.0 - 2.0 * f );
+			float a = hash( i );
+			float b = hash( i + vec2( 1.0, 0.0 ) );
+			float c = hash( i + vec2( 0.0, 1.0 ) );
+			float d = hash( i + vec2( 1.0, 1.0 ) );
+			return mix( mix( a, b, f.x ), mix( c, d, f.x ), f.y );
+		}
+
+		float fbm( vec2 p ) {
+			float value = 0.0;
+			float amplitude = 0.5;
+			for ( int i = 0; i < 5; i ++ ) {
+				value += amplitude * noise( p );
+				p *= 2.0;
+				amplitude *= 0.5;
+			}
+			return value;
+		}
 
 		// constants for atmospheric scattering
 		const float pi = 3.141592653589793238462643383279502884197169;
@@ -223,9 +261,43 @@ Sky.SkyShader = {
 
 			vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );
 
-			vec3 retColor = pow( texColor, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );
+			// Clouds
+			if ( direction.y > 0.0 && cloudCoverage > 0.0 ) {
+
+				// Project to cloud plane (higher elevation = clouds appear lower/closer)
+				float elevation = mix( 1.0, 0.1, cloudElevation );
+				vec2 cloudUV = direction.xz / ( direction.y * elevation );
+				cloudUV *= cloudScale;
+				cloudUV += time * cloudSpeed;
+
+				// Multi-octave noise for fluffy clouds
+				float cloudNoise = fbm( cloudUV * 1000.0 );
+				cloudNoise += 0.5 * fbm( cloudUV * 2000.0 + 3.7 );
+				cloudNoise = cloudNoise * 0.5 + 0.5;
+
+				// Apply coverage threshold
+				float cloudMask = smoothstep( 1.0 - cloudCoverage, 1.0 - cloudCoverage + 0.3, cloudNoise );
+
+				// Fade clouds near horizon (adjusted by elevation)
+				float horizonFade = smoothstep( 0.0, 0.1 + 0.2 * cloudElevation, direction.y );
+				cloudMask *= horizonFade;
+
+				// Cloud lighting based on sun position
+				float sunInfluence = dot( direction, vSunDirection ) * 0.5 + 0.5;
+				float daylight = max( 0.0, vSunDirection.y * 2.0 );
+
+				// Base cloud color affected by atmosphere
+				vec3 atmosphereColor = Lin * 0.04;
+				vec3 cloudColor = mix( vec3( 0.3 ), vec3( 1.0 ), daylight );
+				cloudColor = mix( cloudColor, atmosphereColor + vec3( 1.0 ), sunInfluence * 0.5 );
+				cloudColor *= vSunE * 0.00002;
+
+				// Blend clouds with sky
+				texColor = mix( texColor, cloudColor, cloudMask * cloudDensity );
+
+			}
 
-			gl_FragColor = vec4( retColor, 1.0 );
+			gl_FragColor = vec4( texColor, 1.0 );
 
 			#include <tonemapping_fragment>
 			#include <colorspace_fragment>

package/examples/jsm/objects/SkyMesh.js

@@ -6,7 +6,7 @@ import {
 	NodeMaterial
 } from 'three/webgpu';
 
-import { Fn, float, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelViewProjection, normalize, positionWorld, pow, smoothstep, sub, varyingProperty, vec4, uniform, cameraPosition } from 'three/tsl';
+import { Fn, float, vec2, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelViewProjection, normalize, positionWorld, pow, smoothstep, sub, varyingProperty, vec4, uniform, cameraPosition, fract, floor, sin, time, Loop, If } from 'three/tsl';
 
 /**
  * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight](https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight)
@@ -82,6 +82,41 @@ class SkyMesh extends Mesh {
 		 */
 		this.upUniform = uniform( new Vector3( 0, 1, 0 ) );
 
+		/**
+		 * The cloud scale uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudScale = uniform( 0.0002 );
+
+		/**
+		 * The cloud speed uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudSpeed = uniform( 0.0001 );
+
+		/**
+		 * The cloud coverage uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudCoverage = uniform( 0.4 );
+
+		/**
+		 * The cloud density uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudDensity = uniform( 0.4 );
+
+		/**
+		 * The cloud elevation uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudElevation = uniform( 0.5 );
+
 		/**
 		 * This flag can be used for type testing.
 		 *
@@ -105,7 +140,6 @@ class SkyMesh extends Mesh {
 
 		const vSunDirection = varyingProperty( 'vec3' );
 		const vSunE = varyingProperty( 'float' );
-		const vSunfade = varyingProperty( 'float' );
 		const vBetaR = varyingProperty( 'vec3' );
 		const vBetaM = varyingProperty( 'vec3' );
 
@@ -146,10 +180,9 @@ class SkyMesh extends Mesh {
 			const sunIntensity = EE.mul( max( 0.0, float( 1.0 ).sub( pow( e, cutoffAngle.sub( acos( zenithAngleCos ) ).div( steepness ).negate() ) ) ) );
 			vSunE.assign( sunIntensity );
 
-			// varying sun fade
+			// sun fade
 
 			const sunfade = float( 1.0 ).sub( clamp( float( 1.0 ).sub( exp( this.sunPosition.y.div( 450000.0 ) ) ), 0, 1 ) );
-			vSunfade.assign( sunfade );
 
 			// varying vBetaR
 
@@ -232,11 +265,85 @@ class SkyMesh extends Mesh {
 			const sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos.add( 0.00002 ), cosTheta );
 			L0.addAssign( vSunE.mul( 19000.0 ).mul( Fex ).mul( sundisk ) );
 
-			const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) );
+			const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) ).toVar();
+
+			// Cloud noise functions
+			const hash = Fn( ( [ p ] ) => {
+
+				return fract( sin( dot( p, vec2( 127.1, 311.7 ) ) ).mul( 43758.5453123 ) );
+
+			} );
+
+			const noise = Fn( ( [ p_immutable ] ) => {
+
+				const p = vec2( p_immutable ).toVar();
+				const i = floor( p );
+				const f = fract( p );
+				const ff = f.mul( f ).mul( sub( 3.0, f.mul( 2.0 ) ) );
+
+				const a = hash( i );
+				const b = hash( add( i, vec2( 1.0, 0.0 ) ) );
+				const c = hash( add( i, vec2( 0.0, 1.0 ) ) );
+				const d = hash( add( i, vec2( 1.0, 1.0 ) ) );
+
+				return mix( mix( a, b, ff.x ), mix( c, d, ff.x ), ff.y );
+
+			} );
+
+			const fbm = Fn( ( [ p_immutable ] ) => {
+
+				const p = vec2( p_immutable ).toVar();
+				const value = float( 0.0 ).toVar();
+				const amplitude = float( 0.5 ).toVar();
+
+				Loop( 5, () => {
+
+					value.addAssign( amplitude.mul( noise( p ) ) );
+					p.mulAssign( 2.0 );
+					amplitude.mulAssign( 0.5 );
+
+				} );
+
+				return value;
+
+			} );
+
+			// Clouds
+			If( direction.y.greaterThan( 0.0 ).and( this.cloudCoverage.greaterThan( 0.0 ) ), () => {
+
+				// Project to cloud plane (higher elevation = clouds appear lower/closer)
+				const elevation = mix( 1.0, 0.1, this.cloudElevation );
+				const cloudUV = direction.xz.div( direction.y.mul( elevation ) ).toVar();
+				cloudUV.mulAssign( this.cloudScale );
+				cloudUV.addAssign( time.mul( this.cloudSpeed ) );
+
+				// Multi-octave noise for fluffy clouds
+				const cloudNoise = fbm( cloudUV.mul( 1000.0 ) ).add( fbm( cloudUV.mul( 2000.0 ).add( 3.7 ) ).mul( 0.5 ) ).toVar();
+				cloudNoise.assign( cloudNoise.mul( 0.5 ).add( 0.5 ) );
+
+				// Apply coverage threshold
+				const cloudMask = smoothstep( sub( 1.0, this.cloudCoverage ), sub( 1.0, this.cloudCoverage ).add( 0.3 ), cloudNoise ).toVar();
+
+				// Fade clouds near horizon (adjusted by elevation)
+				const horizonFade = smoothstep( 0.0, add( 0.1, mul( 0.2, this.cloudElevation ) ), direction.y );
+				cloudMask.mulAssign( horizonFade );
+
+				// Cloud lighting based on sun position
+				const sunInfluence = dot( direction, vSunDirection ).mul( 0.5 ).add( 0.5 );
+				const daylight = max( 0.0, vSunDirection.y.mul( 2.0 ) );
+
+				// Base cloud color affected by atmosphere
+				const atmosphereColor = Lin.mul( 0.04 );
+				const cloudColor = mix( vec3( 0.3 ), vec3( 1.0 ), daylight ).toVar();
+				cloudColor.assign( mix( cloudColor, atmosphereColor.add( vec3( 1.0 ) ), sunInfluence.mul( 0.5 ) ) );
+				cloudColor.mulAssign( vSunE.mul( 0.00002 ) );
+
+				// Blend clouds with sky
+				texColor.assign( mix( texColor, cloudColor, cloudMask.mul( this.cloudDensity ) ) );
 
-			const retColor = pow( texColor, vec3( float( 1.0 ).div( float( 1.2 ).add( vSunfade.mul( 1.2 ) ) ) ) );
+			} );
 
-			return vec4( retColor, 1.0 );
+			return vec4( texColor, 1.0 );
 
 		} )();
 

package/examples/jsm/objects/Water.js

@@ -1,6 +1,7 @@
 import {
 	Color,
 	FrontSide,
+	HalfFloatType,
 	Matrix4,
 	Mesh,
 	PerspectiveCamera,
@@ -84,7 +85,7 @@ class Water extends Mesh {
 
 		const mirrorCamera = new PerspectiveCamera();
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { type: HalfFloatType } );
 
 		const mirrorShader = {
 
@@ -196,10 +197,10 @@ class Water extends Mesh {
 					vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );
 
 					float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
-					float rf0 = 0.3;
+					float rf0 = 0.02;
 					float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );
 					vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;
-					vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);
+					vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), reflectionSample + specularLight, reflectance );
 					vec3 outgoingLight = albedo;
 					gl_FragColor = vec4( outgoingLight, alpha );
 

package/examples/jsm/objects/Water2.js

@@ -1,5 +1,5 @@
 import {
-	Clock,
+	Timer,
 	Color,
 	Matrix4,
 	Mesh,
@@ -74,7 +74,7 @@ class Water extends Mesh {
 		const cycle = 0.15; // a cycle of a flow map phase
 		const halfCycle = cycle * 0.5;
 		const textureMatrix = new Matrix4();
-		const clock = new Clock();
+		const timer = new Timer();
 
 		// internal components
 
@@ -180,7 +180,7 @@ class Water extends Mesh {
 
 		function updateFlow() {
 
-			const delta = clock.getDelta();
+			const delta = timer.getDelta();
 			const config = scope.material.uniforms[ 'config' ];
 
 			config.value.x += flowSpeed * delta; // flowMapOffset0
@@ -207,6 +207,8 @@ class Water extends Mesh {
 
 		this.onBeforeRender = function ( renderer, scene, camera ) {
 
+			timer.update();
+
 			updateTextureMatrix( camera );
 			updateFlow();
 

package/examples/jsm/objects/WaterMesh.js

@@ -2,10 +2,10 @@ import {
 	Color,
 	Mesh,
 	Vector3,
-	MeshLambertNodeMaterial
+	NodeMaterial
 } from 'three/webgpu';
 
-import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix, diffuseColor } from 'three/tsl';
+import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';
 
 /**
  * A basic flat, reflective water effect.
@@ -32,7 +32,7 @@ class WaterMesh extends Mesh {
 	 */
 	constructor( geometry, options ) {
 
-		const material = new MeshLambertNodeMaterial();
+		const material = new NodeMaterial();
 
 		super( geometry, material );
 
@@ -155,8 +155,6 @@ class WaterMesh extends Mesh {
 
 		material.receivedShadowPositionNode = positionWorld.add( distortion );
 
-		material.setupOutgoingLight = () => diffuseColor.rgb; // backwards compatibility
-
 		material.colorNode = Fn( () => {
 
 			const mirrorSampler = reflector();
@@ -166,10 +164,10 @@ class WaterMesh extends Mesh {
 			this.add( mirrorSampler.target );
 
 			const theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
-			const rf0 = float( 0.3 );
+			const rf0 = float( 0.02 );
 			const reflectance = mul( pow( float( 1.0 ).sub( theta ), 5.0 ), float( 1.0 ).sub( rf0 ) ).add( rf0 );
 			const scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ).mul( this.waterColor );
-			const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.mul( specularLight ).add( mirrorSampler.rgb.mul( 0.9 ) ).add( vec3( 0.1 ) ), reflectance );
+			const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.add( specularLight ), reflectance );
 
 			return albedo;
 

package/examples/jsm/physics/JoltPhysics.js

@@ -1,6 +1,6 @@
-import { Clock, Vector3, Quaternion, Matrix4 } from 'three';
+import { Timer, Vector3, Quaternion, Matrix4 } from 'three';
 
-const JOLT_PATH = 'https://cdn.jsdelivr.net/npm/jolt-physics@0.23.0/dist/jolt-physics.wasm-compat.js';
+const JOLT_PATH = 'https://cdn.jsdelivr.net/npm/jolt-physics@1.0.0/dist/jolt-physics.wasm-compat.js';
 
 const frameRate = 60;
 
@@ -77,7 +77,7 @@ async function JoltPhysics() {
 
 	if ( Jolt === null ) {
 
-		const { default: initJolt } = await import( `${JOLT_PATH}` );
+		const { default: initJolt } = await import( JOLT_PATH /* @vite-ignore */ );
 		Jolt = await initJolt();
 
 	}
@@ -222,11 +222,13 @@ async function JoltPhysics() {
 
 	//
 
-	const clock = new Clock();
+	const timer = new Timer();
 
 	function step() {
 
-		let deltaTime = clock.getDelta();
+		timer.update();
+
+		let deltaTime = timer.getDelta();
 
 		// Don't go below 30 Hz to prevent spiral of death
 		deltaTime = Math.min( deltaTime, 1.0 / 30.0 );

package/examples/jsm/physics/RapierPhysics.js

@@ -1,4 +1,4 @@
-import { Clock, Vector3, Quaternion, Matrix4 } from 'three';
+import { Timer, Vector3, Quaternion, Matrix4 } from 'three';
 
 const RAPIER_PATH = 'https://cdn.skypack.dev/@dimforge/rapier3d-compat@0.17.3';
 
@@ -97,7 +97,7 @@ async function RapierPhysics() {
 
 	if ( RAPIER === null ) {
 
-		RAPIER = await import( `${RAPIER_PATH}` );
+		RAPIER = await import( RAPIER_PATH /* @vite-ignore */ );
 		await RAPIER.init();
 
 	}
@@ -301,11 +301,13 @@ async function RapierPhysics() {
 
 	//
 
-	const clock = new Clock();
+	const timer = new Timer();
 
 	function step() {
 
-		world.timestep = clock.getDelta();
+		timer.update();
+
+		world.timestep = timer.getDelta();
 		world.step();
 
 		//

package/examples/jsm/postprocessing/EffectComposer.js

@@ -1,7 +1,7 @@
 import {
-	Clock,
 	HalfFloatType,
 	NoBlending,
+	Timer,
 	Vector2,
 	WebGLRenderTarget
 } from 'three';
@@ -121,12 +121,12 @@ class EffectComposer {
 		this.copyPass.material.blending = NoBlending;
 
 		/**
-		 * The internal clock for managing time data.
+		 * The internal timer for managing time data.
 		 *
 		 * @private
-		 * @type {Clock}
+		 * @type {Timer}
 		 */
-		this.clock = new Clock();
+		this.timer = new Timer();
 
 	}
 
@@ -215,9 +215,11 @@ class EffectComposer {
 
 		// deltaTime value is in seconds
 
+		this.timer.update();
+
 		if ( deltaTime === undefined ) {
 
-			deltaTime = this.clock.getDelta();
+			deltaTime = this.timer.getDelta();
 
 		}
 

package/examples/jsm/postprocessing/RenderTransitionPass.js

@@ -114,7 +114,7 @@ class RenderTransitionPass extends Pass {
 	}
 
 	/**
-	 * Sets the texture threshold. This value defined how strong the texture effects
+	 * Sets the texture threshold. This value defines how strong the texture effects
 	 * the transition. Must be in the range `[0,1]` (0 means full effect, 1 means no effect).
 	 *
 	 * @param {boolean|number} value - The threshold value.

package/examples/jsm/renderers/CSS3DRenderer.js

@@ -141,7 +141,7 @@ const _matrix2 = new Matrix4();
  * This renderer can be used to apply hierarchical 3D transformations to DOM elements
  * via the CSS3 [transform](https://www.w3schools.com/cssref/css3_pr_transform.asp) property.
  * `CSS3DRenderer` is particularly interesting if you want to apply 3D effects to a website without
- * canvas based rendering. It can also be used in order to combine DOM elements with WebGLcontent.
+ * canvas based rendering. It can also be used in order to combine DOM elements with WebGL content.
  *
  * There are, however, some important limitations:
  *

package/examples/jsm/renderers/SVGRenderer.js

@@ -188,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.
 		 */

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 );