JSM: Added module and TS file for ToonShader.

docs/manual/en/introduction/Import-via-modules.html

@@ -301,6 +301,7 @@
 						<li>TechnicolorShader</li>
 						<li>TerrainShader</li>
 						<li>ToneMapShader</li>
+						<li>ToonShader</li>
 						<li>TranslucentShader</li>
 						<li>TriangleBlurShader</li>
 						<li>UnpackDepthRGBAShader</li>

examples/js/ShaderToon.js

@@ -1,331 +0,0 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- * @author alteredq / http://alteredqualia.com/
- *
- * ShaderToon currently contains:
- *
- *	toon1
- *	toon2
- *	hatching
- *	dotted
- */
-
-THREE.ShaderToon = {
-
-	'toon1' : {
-
-		uniforms: {
-
-			"uDirLightPos": { value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor": { value: new THREE.Color( 0xffffff ) }
-
-		},
-
-		vertexShader: [
-
-			"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;",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"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 );",
-
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	'toon2' : {
-
-		uniforms: {
-
-			"uDirLightPos": { value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor": { value: new THREE.Color( 0xeeeeee ) },
-			"uLineColor1": { value: new THREE.Color( 0x808080 ) },
-			"uLineColor2": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor3": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor4": { value: new THREE.Color( 0x000000 ) }
-
-		},
-
-		vertexShader: [
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-				"vNormal = normalize( normalMatrix * normal );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"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 );",
-
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	'hatching' : {
-
-		uniforms: {
-
-			"uDirLightPos":	{ value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor":  { value: new THREE.Color( 0xffffff ) },
-			"uLineColor1": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor2": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor3": { value: new THREE.Color( 0x000000 ) },
-			"uLineColor4": { value: new THREE.Color( 0x000000 ) }
-
-		},
-
-		vertexShader: [
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-				"vNormal = normalize( normalMatrix * normal );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"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 );",
-
-					"}",
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	},
-
-	'dotted' : {
-
-		uniforms: {
-
-			"uDirLightPos":	{ value: new THREE.Vector3() },
-			"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
-
-			"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
-
-			"uBaseColor":  { value: new THREE.Color( 0xffffff ) },
-			"uLineColor1": { value: new THREE.Color( 0x000000 ) }
-
-		},
-
-		vertexShader: [
-
-			"varying vec3 vNormal;",
-
-			"void main() {",
-
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-				"vNormal = normalize( normalMatrix * normal );",
-
-			"}"
-
-		].join( "\n" ),
-
-		fragmentShader: [
-
-			"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 );",
-
-					"}",
-
-				"}",
-
-			"}"
-
-		].join( "\n" )
-
-	}
-
-};

examples/js/shaders/ToonShader.js

@@ -0,0 +1,330 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author alteredq / http://alteredqualia.com/
+ *
+ * Currently contains:
+ *
+ *	toon1
+ *	toon2
+ *	hatching
+ *	dotted
+ */
+
+THREE.ToonShader1 = {
+
+	uniforms: {
+
+		"uDirLightPos": { value: new THREE.Vector3() },
+		"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
+
+		"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
+
+		"uBaseColor": { value: new THREE.Color( 0xffffff ) }
+
+	},
+
+	vertexShader: [
+
+		"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;",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+THREE.ToonShader2 = {
+
+	uniforms: {
+
+		"uDirLightPos": { value: new THREE.Vector3() },
+		"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
+
+		"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
+
+		"uBaseColor": { value: new THREE.Color( 0xeeeeee ) },
+		"uLineColor1": { value: new THREE.Color( 0x808080 ) },
+		"uLineColor2": { value: new THREE.Color( 0x000000 ) },
+		"uLineColor3": { value: new THREE.Color( 0x000000 ) },
+		"uLineColor4": { value: new THREE.Color( 0x000000 ) }
+
+	},
+
+	vertexShader: [
+
+		"varying vec3 vNormal;",
+
+		"void main() {",
+
+		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		"	vNormal = normalize( normalMatrix * normal );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"	}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+THREE.ToonShaderHatching = {
+
+	uniforms: {
+
+		"uDirLightPos":	{ value: new THREE.Vector3() },
+		"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
+
+		"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
+
+		"uBaseColor": { value: new THREE.Color( 0xffffff ) },
+		"uLineColor1": { value: new THREE.Color( 0x000000 ) },
+		"uLineColor2": { value: new THREE.Color( 0x000000 ) },
+		"uLineColor3": { value: new THREE.Color( 0x000000 ) },
+		"uLineColor4": { value: new THREE.Color( 0x000000 ) }
+
+	},
+
+	vertexShader: [
+
+		"varying vec3 vNormal;",
+
+		"void main() {",
+
+		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		"	vNormal = normalize( normalMatrix * normal );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"	}",
+
+		"	}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+THREE.ToonShaderDotted = {
+
+	uniforms: {
+
+		"uDirLightPos":	{ value: new THREE.Vector3() },
+		"uDirLightColor": { value: new THREE.Color( 0xeeeeee ) },
+
+		"uAmbientLightColor": { value: new THREE.Color( 0x050505 ) },
+
+		"uBaseColor": { value: new THREE.Color( 0xffffff ) },
+		"uLineColor1": { value: new THREE.Color( 0x000000 ) }
+
+	},
+
+	vertexShader: [
+
+		"varying vec3 vNormal;",
+
+		"void main() {",
+
+		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		"	vNormal = normalize( normalMatrix * normal );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"		}",
+
+		"	}",
+
+		"}"
+
+	].join( "\n" )
+
+};

examples/jsm/shaders/ToonShader.d.ts

@@ -0,0 +1,56 @@
+import {
+  Uniform
+} from '../../../src/Three';
+
+export interface ToonShader1 {
+  uniforms: {
+    uDirLightPos: Uniform;
+    uDirLightColor: Uniform;
+    uAmbientLightColor: Uniform;
+    uBaseColor: Uniform;
+  };
+  vertexShader: string;
+  fragmentShader: string;
+}
+
+export interface ToonShader2 {
+  uniforms: {
+    uDirLightPos: Uniform;
+    uDirLightColor: Uniform;
+    uAmbientLightColor: Uniform;
+    uBaseColor: Uniform;
+    uLineColor1: Uniform;
+    uLineColor2: Uniform;
+    uLineColor3: Uniform;
+    uLineColor4: Uniform;
+  };
+  vertexShader: string;
+  fragmentShader: string;
+}
+
+export interface ToonShaderHatching {
+  uniforms: {
+    uDirLightPos: Uniform;
+    uDirLightColor: Uniform;
+    uAmbientLightColor: Uniform;
+    uBaseColor: Uniform;
+		uLineColor1: Uniform;
+    uLineColor2: Uniform;
+    uLineColor3: Uniform;
+    uLineColor4: Uniform;
+  };
+  vertexShader: string;
+  fragmentShader: string;
+}
+
+export interface ToonShaderDotted {
+  uniforms: {
+    uDirLightPos: Uniform;
+    uDirLightColor: Uniform;
+    uAmbientLightColor: Uniform;
+    uBaseColor: Uniform;
+    uLineColor1: Uniform;
+  };
+  vertexShader: string;
+  fragmentShader: string;
+}

examples/jsm/shaders/ToonShader.js

@@ -0,0 +1,337 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author alteredq / http://alteredqualia.com/
+ *
+ * Currently contains:
+ *
+ *	toon1
+ *	toon2
+ *	hatching
+ *	dotted
+ */
+
+import {
+	Color,
+	Vector3
+} from "../../../build/three.module.js";
+
+var ToonShader1 = {
+
+	uniforms: {
+
+		"uDirLightPos": { value: new Vector3() },
+		"uDirLightColor": { value: new Color( 0xeeeeee ) },
+
+		"uAmbientLightColor": { value: new Color( 0x050505 ) },
+
+		"uBaseColor": { value: new Color( 0xffffff ) }
+
+	},
+
+	vertexShader: [
+
+		"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;",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+var 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: [
+
+		"varying vec3 vNormal;",
+
+		"void main() {",
+
+		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		"	vNormal = normalize( normalMatrix * normal );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"	}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+var 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: [
+
+		"varying vec3 vNormal;",
+
+		"void main() {",
+
+		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		"	vNormal = normalize( normalMatrix * normal );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"	}",
+
+		"	}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+var 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: [
+
+		"varying vec3 vNormal;",
+
+		"void main() {",
+
+		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		"	vNormal = normalize( normalMatrix * normal );",
+
+		"}"
+
+	].join( "\n" ),
+
+	fragmentShader: [
+
+		"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 );",
+
+		"		}",
+
+		"	}",
+
+		"}"
+
+	].join( "\n" )
+
+};
+
+export { ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted };

examples/webgl_marchingcubes.html

@@ -21,7 +21,7 @@
 	<script src="js/controls/OrbitControls.js"></script>
 
 	<script src="js/MarchingCubes.js"></script>
-	<script src="js/ShaderToon.js"></script>
+	<script src="js/shaders/ToonShader.js"></script>
 
 	<script src="js/WebGL.js"></script>
 	<script src="js/libs/stats.min.js"></script>
@@ -161,10 +161,10 @@
 
 			// toons
 
-			var toonMaterial1 = createShaderMaterial( "toon1", light, ambientLight );
-			var toonMaterial2 = createShaderMaterial( "toon2", light, ambientLight );
-			var hatchingMaterial = createShaderMaterial( "hatching", light, ambientLight );
-			var dottedMaterial = createShaderMaterial( "dotted", light, ambientLight );
+			var toonMaterial1 = createShaderMaterial( THREE.ToonShader1, light, ambientLight );
+			var toonMaterial2 = createShaderMaterial( THREE.ToonShader2, light, ambientLight );
+			var hatchingMaterial = createShaderMaterial( THREE.ToonShaderHatching, light, ambientLight );
+			var dottedMaterial = createShaderMaterial( THREE.ToonShaderDotted, light, ambientLight );
 
 			var texture = new THREE.TextureLoader().load( "textures/UV_Grid_Sm.jpg" );
 			texture.wrapS = THREE.RepeatWrapping;
@@ -243,9 +243,7 @@
 
 		}
 
-		function createShaderMaterial( id, light, ambientLight ) {
-
-			var shader = THREE.ShaderToon[ id ];
+		function createShaderMaterial( shader, light, ambientLight ) {
 
 			var u = THREE.UniformsUtils.clone( shader.uniforms );
 

utils/modularize.js

@@ -187,6 +187,7 @@ var files = [
 	{ path: 'shaders/TechnicolorShader.js', dependencies: [], ignoreList: [] },
 	{ path: 'shaders/TerrainShader.js', dependencies: [], ignoreList: [] },
 	{ path: 'shaders/ToneMapShader.js', dependencies: [], ignoreList: [] },
+	{ path: 'shaders/ToonShader.js', dependencies: [], ignoreList: [] },
 	{ path: 'shaders/TranslucentShader.js', dependencies: [], ignoreList: [] },
 	{ path: 'shaders/TriangleBlurShader.js', dependencies: [], ignoreList: [] },
 	{ path: 'shaders/UnpackDepthRGBAShader.js', dependencies: [], ignoreList: [] },