Threejs Masking Shader

Threejs Mask shader

by realhunts

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
<script src="http://eskel.cz/js/three/ShaderPass.js"></script>
<script src="http://eskel.cz/js/three/RenderPass.js"></script>
<script src="http://eskel.cz/js/three/MaskPass.js"></script>
<script src="http://eskel.cz/js/three/EffectComposer.js"></script>
<script src="http://eskel.cz/js/three/CopyShader.js"></script>
<script src="http://eskel.cz/js/three/AdditiveBlendShader.js"></script>
<body>	<span id='fps'></span>

</body>

CSS

html, body, canvas {
    margin: 0px;
    overflow: hidden;
}
#fps {
    position: absolute;
    top: 0px;
    left: 0px;
    color: #fff;
    z-index: 50;
}

JavaScript

var animate, camera, clock, composer, elapsedTime, frameCount, init, light, maskScene, mesh1, mesh2, mesh3, normal, onWindowResize, outScene, outline, render, renderTarget, renderer, scene, screenHeight, screenWidth, setModel, shader, updateFps;

scene = null;

normal = null;

outline = null;

outScene = null;

maskScene = null;

light = null;

renderer = null;

composer = null;

camera = null;

mesh1 = null;

mesh2 = null;

mesh3 = null;

renderTarget = null;

screenWidth = window.innerWidth;

screenHeight = window.innerHeight;

clock = new THREE.Clock;

elapsedTime = 0;

frameCount = 0;

shader = {
  'outline': {
    vertex_shader: ["uniform float offset;", "void main() {", "vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );", "gl_Position = projectionMatrix * pos;", "}"].join("\n"),
    fragment_shader: ["void main(){", "gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.1 );", "}"].join("\n")
  }
};

init = function() {
  scene = new THREE.Scene;
  maskScene = new THREE.Scene;
  outScene = new THREE.Scene;
  setModel();
  camera = new THREE.PerspectiveCamera(40, screenWidth / screenHeight, 50, 10000);
  camera.position.set(0, 0, 400);
  light = new THREE.DirectionalLight(0xffffff);
  light.position.set(1, 1, 1);
  scene.add(light);
  renderer = new THREE.WebGLRenderer({
    width: screenWidth,
    height: screenHeight,
    antialias: true
  });
  renderer.setSize(screenWidth, screenHeight);
  renderer.setClearColor(0x666666);
  renderer.autoClear = false;
  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  document.body.appendChild(renderer.domElement);
  return window.addEventListener('resize', onWindowResize, false);
};

setModel = function() {
  var geometry, matColor, matShader, outShader, uniforms;
  geometry = new THREE.TorusKnotGeometry(50, 10, 128, 16);
  matColor = new THREE.MeshPhongMaterial(0xffffff);
  mesh1 = new THREE.Mesh(geometry, matColor);
  scene.add(mesh1);
  uniforms = {
    offset: {
      type: "f",
      value: 1
   ...