ToonShader

GLSL

by Millieyan

HTML

<div id="info">
  GLSL ToonShader
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/geometries/TeapotBufferGeometry.js"></script>
<script id="myVertexShader" type="x-shader/x-vertex">
	uniform vec3 lightpos;
	varying float ndotl;
  varying vec3 lightdir;
  varying vec3 eyenorm;
  varying vec2 vUv;
  
  void main() {
		gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
		vUv = uv;
    
	  //vec4 worldpos = modelMatrix * vec4 (position, 1.0);
    //ndotl = dot (normalize(lightpos.xyz - worldpos.xyz), normal);
    vec4 eyepos = modelViewMatrix * vec4 (position, 1.0);
    vec4 lighteye = viewMatrix * vec4 (lightpos, 1.0);
    lightdir = lighteye.xyz - eyepos.xyz;
    eyenorm = normalMatrix * normal;
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
	varying float ndotl;
  varying vec3 lightdir;
  varying vec3 eyenorm;
  uniform sampler2D mytex;
  varying vec2 vUv;
  
	void main() {
		float nn = dot (normalize(lightdir), normalize(eyenorm));
    if (nn > 0.8) {
			nn= 1.0;
		} else if (nn > 0.6) {
			nn = 0.6;
		} else {
			nn = 0.2;
		}
		
    vec4 texColor = texture2D (mytex, vUv);
    gl_FragColor = nn*texColor;
   // gl_FragColor = vec4 (nn,nn,nn, 0.3);
	}
</script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var jsonModel;
var angle = 0;
var pointLight;

init();
animate();

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.z = 200;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red','white');
  scene.add(gridXZ);

  pointLight = new THREE.PointLight(0xffffff);
  //pointLight.position.set(0, 300, 200);
  scene.add(pointLight);
  var ambientLight = new THREE.AmbientLight(0x111111);
  scene.add(ambientLight);

  lightmodel = new THREE.Mesh(new THREE.SphereGeometry(3, 16, 16), new THREE.MeshBasicMaterial({
    color: 0xffff00
  }));
  scene.add(lightmodel);
  //////////////////////////////////////////////////////////////////////
  
  let loader =  new THREE.TextureLoader();
  loader.crossOrigin = '';
  let tex = loader.load ('https://i.imgur.com/DrvlmNW.jpg?1');
  
  teapotMaterial = new THREE.ShaderMaterial({
    uniforms: {
      lightpos: {
        type: 'v3',
        value: new THREE.Vector3(0, 30, 20)
      },
      mytex: {
        type: 't',
        value: tex
      },
      shading: {type:'i', value: 0},
      coordinate: {type:'i', value: 0},
    },
    vertexShader: document.getElementById('myVertexShader').textContent,
    fragmentShader: document.getElementById('myFragmentShader').textContent,
    transparent:true // important!
  });

  var geometry = new THREE.TeapotBufferGeometry();
 	var teapotMesh = new THREE.Mesh(geometry, teapotMaterial);
  teapotMesh.scale.set (.21,.21,.21);
  teapotMesh.position.set (50,0,0);
  teapotMesh2 = teapotMesh.clone();
  teapotMesh2.position.set...