@anov/3d 0.0.1 → 0.0.2

package/examples/jsm/shaders/SobelOperatorShader.js

@@ -0,0 +1,90 @@
+import {
+	Vector2
+} from 'three';
+
+/**
+ * Sobel Edge Detection (see https://youtu.be/uihBwtPIBxM)
+ *
+ * As mentioned in the video the Sobel operator expects a grayscale image as input.
+ *
+ */
+
+const SobelOperatorShader = {
+
+	uniforms: {
+
+		'tDiffuse': { value: null },
+		'resolution': { value: new Vector2() }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform sampler2D tDiffuse;
+		uniform vec2 resolution;
+		varying vec2 vUv;
+
+		void main() {
+
+			vec2 texel = vec2( 1.0 / resolution.x, 1.0 / resolution.y );
+
+		// kernel definition (in glsl matrices are filled in column-major order)
+
+			const mat3 Gx = mat3( -1, -2, -1, 0, 0, 0, 1, 2, 1 ); // x direction kernel
+			const mat3 Gy = mat3( -1, 0, 1, -2, 0, 2, -1, 0, 1 ); // y direction kernel
+
+		// fetch the 3x3 neighbourhood of a fragment
+
+		// first column
+
+			float tx0y0 = texture2D( tDiffuse, vUv + texel * vec2( -1, -1 ) ).r;
+			float tx0y1 = texture2D( tDiffuse, vUv + texel * vec2( -1,  0 ) ).r;
+			float tx0y2 = texture2D( tDiffuse, vUv + texel * vec2( -1,  1 ) ).r;
+
+		// second column
+
+			float tx1y0 = texture2D( tDiffuse, vUv + texel * vec2(  0, -1 ) ).r;
+			float tx1y1 = texture2D( tDiffuse, vUv + texel * vec2(  0,  0 ) ).r;
+			float tx1y2 = texture2D( tDiffuse, vUv + texel * vec2(  0,  1 ) ).r;
+
+		// third column
+
+			float tx2y0 = texture2D( tDiffuse, vUv + texel * vec2(  1, -1 ) ).r;
+			float tx2y1 = texture2D( tDiffuse, vUv + texel * vec2(  1,  0 ) ).r;
+			float tx2y2 = texture2D( tDiffuse, vUv + texel * vec2(  1,  1 ) ).r;
+
+		// gradient value in x direction
+
+			float valueGx = Gx[0][0] * tx0y0 + Gx[1][0] * tx1y0 + Gx[2][0] * tx2y0 +
+				Gx[0][1] * tx0y1 + Gx[1][1] * tx1y1 + Gx[2][1] * tx2y1 +
+				Gx[0][2] * tx0y2 + Gx[1][2] * tx1y2 + Gx[2][2] * tx2y2;
+
+		// gradient value in y direction
+
+			float valueGy = Gy[0][0] * tx0y0 + Gy[1][0] * tx1y0 + Gy[2][0] * tx2y0 +
+				Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 +
+				Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2;
+
+		// magnitute of the total gradient
+
+			float G = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) );
+
+			gl_FragColor = vec4( vec3( G ), 1 );
+
+		}`
+
+};
+
+export { SobelOperatorShader };

package/examples/jsm/shaders/SubsurfaceScatteringShader.js

@@ -0,0 +1,88 @@
+import {
+	Color,
+	ShaderChunk,
+	ShaderLib,
+	UniformsUtils
+} from 'three';
+
+/**
+ * ------------------------------------------------------------------------------------------
+ * Subsurface Scattering shader
+ * Based on GDC 2011 – Approximating Translucency for a Fast, Cheap and Convincing Subsurface Scattering Look
+ * https://colinbarrebrisebois.com/2011/03/07/gdc-2011-approximating-translucency-for-a-fast-cheap-and-convincing-subsurface-scattering-look/
+ *------------------------------------------------------------------------------------------
+ */
+
+function replaceAll( string, find, replace ) {
+
+	return string.split( find ).join( replace );
+
+}
+
+const meshphong_frag_head = ShaderChunk[ 'meshphong_frag' ].slice( 0, ShaderChunk[ 'meshphong_frag' ].indexOf( 'void main() {' ) );
+const meshphong_frag_body = ShaderChunk[ 'meshphong_frag' ].slice( ShaderChunk[ 'meshphong_frag' ].indexOf( 'void main() {' ) );
+
+const SubsurfaceScatteringShader = {
+
+	uniforms: UniformsUtils.merge( [
+		ShaderLib[ 'phong' ].uniforms,
+		{
+			'thicknessMap': { value: null },
+			'thicknessColor': { value: new Color( 0xffffff ) },
+			'thicknessDistortion': { value: 0.1 },
+			'thicknessAmbient': { value: 0.0 },
+			'thicknessAttenuation': { value: 0.1 },
+			'thicknessPower': { value: 2.0 },
+			'thicknessScale': { value: 10.0 }
+		}
+
+	] ),
+
+	vertexShader: [
+		'#define USE_UV',
+		ShaderChunk[ 'meshphong_vert' ],
+	].join( '\n' ),
+
+	fragmentShader: [
+		'#define USE_UV',
+		'#define SUBSURFACE',
+
+		meshphong_frag_head,
+
+		'uniform sampler2D thicknessMap;',
+		'uniform float thicknessPower;',
+		'uniform float thicknessScale;',
+		'uniform float thicknessDistortion;',
+		'uniform float thicknessAmbient;',
+		'uniform float thicknessAttenuation;',
+		'uniform vec3 thicknessColor;',
+
+		'void RE_Direct_Scattering(const in IncidentLight directLight, const in vec2 uv, const in GeometricContext geometry, inout ReflectedLight reflectedLight) {',
+		'	vec3 thickness = thicknessColor * texture2D(thicknessMap, uv).r;',
+		'	vec3 scatteringHalf = normalize(directLight.direction + (geometry.normal * thicknessDistortion));',
+		'	float scatteringDot = pow(saturate(dot(geometry.viewDir, -scatteringHalf)), thicknessPower) * thicknessScale;',
+		'	vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * thickness;',
+		'	reflectedLight.directDiffuse += scatteringIllu * thicknessAttenuation * directLight.color;',
+		'}',
+
+		meshphong_frag_body.replace( '#include <lights_fragment_begin>',
+
+			replaceAll(
+				ShaderChunk[ 'lights_fragment_begin' ],
+				'RE_Direct( directLight, geometry, material, reflectedLight );',
+				[
+					'RE_Direct( directLight, geometry, material, reflectedLight );',
+
+					'#if defined( SUBSURFACE ) && defined( USE_UV )',
+					' RE_Direct_Scattering(directLight, vUv, geometry, reflectedLight);',
+					'#endif',
+				].join( '\n' )
+			),
+
+		),
+
+	].join( '\n' ),
+
+};
+
+export { SubsurfaceScatteringShader };

package/examples/jsm/shaders/TechnicolorShader.js

@@ -0,0 +1,43 @@
+/**
+ * Technicolor Shader
+ * Simulates the look of the two-strip technicolor process popular in early 20th century films.
+ * More historical info here: http://www.widescreenmuseum.com/oldcolor/technicolor1.htm
+ * Demo here: http://charliehoey.com/technicolor_shader/shader_test.html
+ */
+
+const TechnicolorShader = {
+
+	uniforms: {
+
+		'tDiffuse': { value: null }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform sampler2D tDiffuse;
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 tex = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );
+			vec4 newTex = vec4(tex.r, (tex.g + tex.b) * .5, (tex.g + tex.b) * .5, 1.0);
+
+			gl_FragColor = newTex;
+
+		}`
+
+};
+
+export { TechnicolorShader };

package/examples/jsm/shaders/ToonShader.js

@@ -0,0 +1,326 @@
+import {
+	Color,
+	Vector3
+} from 'three';
+
+/**
+ * Currently contains:
+ *
+ *	toon1
+ *	toon2
+ *	hatching
+ *	dotted
+ */
+
+const ToonShader1 = {
+
+	uniforms: {
+
+		'uDirLightPos': { value: new Vector3() },
+		'uDirLightColor': { value: new Color( 0xeeeeee ) },
+
+		'uAmbientLightColor': { value: new Color( 0x050505 ) },
+
+		'uBaseColor': { value: new Color( 0xffffff ) }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec3 vNormal;
+		varying vec3 vRefract;
+
+		void main() {
+
+			vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
+			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+			vec3 worldNormal = normalize ( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
+
+			vNormal = normalize( normalMatrix * normal );
+
+			vec3 I = worldPosition.xyz - cameraPosition;
+			vRefract = refract( normalize( I ), worldNormal, 1.02 );
+
+			gl_Position = projectionMatrix * mvPosition;
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform vec3 uBaseColor;
+
+		uniform vec3 uDirLightPos;
+		uniform vec3 uDirLightColor;
+
+		uniform vec3 uAmbientLightColor;
+
+		varying vec3 vNormal;
+
+		varying vec3 vRefract;
+
+		void main() {
+
+			float directionalLightWeighting = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);
+			vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
+
+			float intensity = smoothstep( - 0.5, 1.0, pow( length(lightWeighting), 20.0 ) );
+			intensity += length(lightWeighting) * 0.2;
+
+			float cameraWeighting = dot( normalize( vNormal ), vRefract );
+			intensity += pow( 1.0 - length( cameraWeighting ), 6.0 );
+			intensity = intensity * 0.2 + 0.3;
+
+			if ( intensity < 0.50 ) {
+
+				gl_FragColor = vec4( 2.0 * intensity * uBaseColor, 1.0 );
+
+			} else {
+
+				gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );
+
+			}
+
+			#include <colorspace_fragment>
+
+		}`
+
+};
+
+const ToonShader2 = {
+
+	uniforms: {
+
+		'uDirLightPos': { value: new Vector3() },
+		'uDirLightColor': { value: new Color( 0xeeeeee ) },
+
+		'uAmbientLightColor': { value: new Color( 0x050505 ) },
+
+		'uBaseColor': { value: new Color( 0xeeeeee ) },
+		'uLineColor1': { value: new Color( 0x808080 ) },
+		'uLineColor2': { value: new Color( 0x000000 ) },
+		'uLineColor3': { value: new Color( 0x000000 ) },
+		'uLineColor4': { value: new Color( 0x000000 ) }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec3 vNormal;
+
+		void main() {
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			vNormal = normalize( normalMatrix * normal );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform vec3 uBaseColor;
+		uniform vec3 uLineColor1;
+		uniform vec3 uLineColor2;
+		uniform vec3 uLineColor3;
+		uniform vec3 uLineColor4;
+
+		uniform vec3 uDirLightPos;
+		uniform vec3 uDirLightColor;
+
+		uniform vec3 uAmbientLightColor;
+
+		varying vec3 vNormal;
+
+		void main() {
+
+			float camera = max( dot( normalize( vNormal ), vec3( 0.0, 0.0, 1.0 ) ), 0.4);
+			float light = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);
+
+			gl_FragColor = vec4( uBaseColor, 1.0 );
+
+			if ( length(uAmbientLightColor + uDirLightColor * light) < 1.00 ) {
+
+				gl_FragColor *= vec4( uLineColor1, 1.0 );
+
+			}
+
+			if ( length(uAmbientLightColor + uDirLightColor * camera) < 0.50 ) {
+
+				gl_FragColor *= vec4( uLineColor2, 1.0 );
+
+			}
+
+			#include <colorspace_fragment>
+
+		}`
+
+};
+
+const ToonShaderHatching = {
+
+	uniforms: {
+
+		'uDirLightPos':	{ value: new Vector3() },
+		'uDirLightColor': { value: new Color( 0xeeeeee ) },
+
+		'uAmbientLightColor': { value: new Color( 0x050505 ) },
+
+		'uBaseColor': { value: new Color( 0xffffff ) },
+		'uLineColor1': { value: new Color( 0x000000 ) },
+		'uLineColor2': { value: new Color( 0x000000 ) },
+		'uLineColor3': { value: new Color( 0x000000 ) },
+		'uLineColor4': { value: new Color( 0x000000 ) }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec3 vNormal;
+
+		void main() {
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			vNormal = normalize( normalMatrix * normal );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform vec3 uBaseColor;
+		uniform vec3 uLineColor1;
+		uniform vec3 uLineColor2;
+		uniform vec3 uLineColor3;
+		uniform vec3 uLineColor4;
+
+		uniform vec3 uDirLightPos;
+		uniform vec3 uDirLightColor;
+
+		uniform vec3 uAmbientLightColor;
+
+		varying vec3 vNormal;
+
+		void main() {
+
+			float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
+			vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
+
+			gl_FragColor = vec4( uBaseColor, 1.0 );
+
+			if ( length(lightWeighting) < 1.00 ) {
+
+				if ( mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {
+
+					gl_FragColor = vec4( uLineColor1, 1.0 );
+
+				}
+
+			}
+
+			if ( length(lightWeighting) < 0.75 ) {
+
+				if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {
+
+					gl_FragColor = vec4( uLineColor2, 1.0 );
+
+				}
+
+			}
+
+			if ( length(lightWeighting) < 0.50 ) {
+
+				if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {
+
+					gl_FragColor = vec4( uLineColor3, 1.0 );
+
+				}
+
+			}
+
+			if ( length(lightWeighting) < 0.3465 ) {
+
+				if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {
+
+					gl_FragColor = vec4( uLineColor4, 1.0 );
+
+			}
+
+			}
+
+			#include <colorspace_fragment>
+
+		}`
+
+};
+
+const ToonShaderDotted = {
+
+	uniforms: {
+
+		'uDirLightPos':	{ value: new Vector3() },
+		'uDirLightColor': { value: new Color( 0xeeeeee ) },
+
+		'uAmbientLightColor': { value: new Color( 0x050505 ) },
+
+		'uBaseColor': { value: new Color( 0xffffff ) },
+		'uLineColor1': { value: new Color( 0x000000 ) }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec3 vNormal;
+
+		void main() {
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			vNormal = normalize( normalMatrix * normal );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform vec3 uBaseColor;
+		uniform vec3 uLineColor1;
+		uniform vec3 uLineColor2;
+		uniform vec3 uLineColor3;
+		uniform vec3 uLineColor4;
+
+		uniform vec3 uDirLightPos;
+		uniform vec3 uDirLightColor;
+
+		uniform vec3 uAmbientLightColor;
+
+		varying vec3 vNormal;
+
+		void main() {
+
+			float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
+			vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
+
+			gl_FragColor = vec4( uBaseColor, 1.0 );
+
+			if ( length(lightWeighting) < 1.00 ) {
+
+				if ( ( mod(gl_FragCoord.x, 4.001) + mod(gl_FragCoord.y, 4.0) ) > 6.00 ) {
+
+					gl_FragColor = vec4( uLineColor1, 1.0 );
+
+				}
+
+			}
+
+			if ( length(lightWeighting) < 0.50 ) {
+
+				if ( ( mod(gl_FragCoord.x + 2.0, 4.001) + mod(gl_FragCoord.y + 2.0, 4.0) ) > 6.00 ) {
+
+					gl_FragColor = vec4( uLineColor1, 1.0 );
+
+				}
+
+			}
+
+			#include <colorspace_fragment>
+
+		}`
+
+};
+
+export { ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted };

package/examples/jsm/shaders/TriangleBlurShader.js

@@ -0,0 +1,72 @@
+import {
+	Vector2
+} from 'three';
+
+/**
+ * Triangle blur shader
+ * based on glfx.js triangle blur shader
+ * https://github.com/evanw/glfx.js
+ *
+ * A basic blur filter, which convolves the image with a
+ * pyramid filter. The pyramid filter is separable and is applied as two
+ * perpendicular triangle filters.
+ */
+
+const TriangleBlurShader = {
+
+	uniforms: {
+
+		'texture': { value: null },
+		'delta': { value: new Vector2( 1, 1 ) }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		#include <common>
+
+		#define ITERATIONS 10.0
+
+		uniform sampler2D texture;
+		uniform vec2 delta;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 color = vec4( 0.0 );
+
+			float total = 0.0;
+
+		// randomize the lookup values to hide the fixed number of samples
+
+			float offset = rand( vUv );
+
+			for ( float t = -ITERATIONS; t <= ITERATIONS; t ++ ) {
+
+				float percent = ( t + offset - 0.5 ) / ITERATIONS;
+				float weight = 1.0 - abs( percent );
+
+				color += texture2D( texture, vUv + delta * percent ) * weight;
+				total += weight;
+
+			}
+
+			gl_FragColor = color / total;
+
+		}`
+
+};
+
+export { TriangleBlurShader };

package/examples/jsm/shaders/UnpackDepthRGBAShader.js

@@ -0,0 +1,45 @@
+/**
+ * Unpack RGBA depth shader
+ * - show RGBA encoded depth as monochrome color
+ */
+
+const UnpackDepthRGBAShader = {
+
+	uniforms: {
+
+		'tDiffuse': { value: null },
+		'opacity': { value: 1.0 }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform float opacity;
+
+		uniform sampler2D tDiffuse;
+
+		varying vec2 vUv;
+
+		#include <packing>
+
+		void main() {
+
+			float depth = 1.0 - unpackRGBAToDepth( texture2D( tDiffuse, vUv ) );
+			gl_FragColor = vec4( vec3( depth ), opacity );
+
+		}`
+
+};
+
+export { UnpackDepthRGBAShader };