diff --git a/docs/manual/en/introduction/Import-via-modules.html b/docs/manual/en/introduction/Import-via-modules.html index fe49b8e833cdd..d8299725307ea 100644 --- a/docs/manual/en/introduction/Import-via-modules.html +++ b/docs/manual/en/introduction/Import-via-modules.html @@ -301,6 +301,7 @@

Importable Examples

  • TechnicolorShader
  • TerrainShader
  • ToneMapShader
    • +
  • ToonShader
  • TranslucentShader
  • TriangleBlurShader
  • UnpackDepthRGBAShader
    • diff --git a/examples/js/ShaderToon.js b/examples/js/ShaderToon.js deleted file mode 100644 index 4566ce9a91bbf..0000000000000 --- a/examples/js/ShaderToon.js +++ /dev/null @@ -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" ) - - } - -}; diff --git a/examples/js/shaders/ToonShader.js b/examples/js/shaders/ToonShader.js new file mode 100644 index 0000000000000..e0fa321c1ec06 --- /dev/null +++ b/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" ) + +}; diff --git a/examples/jsm/shaders/ToonShader.d.ts b/examples/jsm/shaders/ToonShader.d.ts new file mode 100644 index 0000000000000..ae9119bff3a0a --- /dev/null +++ b/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; +} diff --git a/examples/jsm/shaders/ToonShader.js b/examples/jsm/shaders/ToonShader.js new file mode 100644 index 0000000000000..88169d762773c --- /dev/null +++ b/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 }; diff --git a/examples/webgl_marchingcubes.html b/examples/webgl_marchingcubes.html index f06c98bb40612..9096d1b5099a3 100644 --- a/examples/webgl_marchingcubes.html +++ b/examples/webgl_marchingcubes.html @@ -21,7 +21,7 @@ - + @@ -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 ); diff --git a/utils/modularize.js b/utils/modularize.js index 5ff94791e79aa..aea6feab24daf 100644 --- a/utils/modularize.js +++ b/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: [] },