bytev-charts/lib/plugin/three.js/examples/js/shaders/ToonShader.js

基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import "core-js/modules/es.array.join.js";
console.warn("THREE.ToonShader: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.");
/**
 * 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")
};