Animated mesh outline shader

by linmic

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<script src="http://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/model.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

CSS

html, body, canvas {
    margin: 0px;
    overflow: hidden;
}

JavaScript

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

screenWidth = window.innerWidth;
screenHeight = window.innerHeight;

clock = new THREE.Clock();
elapsedTime = 0;
frameCount = 0;

init = function() {
    var clearMask, copyPass, mask, normal, outline, renderTargetParameters;
    scene = new THREE.Scene();
    maskScene = new THREE.Scene();
    outScene = new THREE.Scene();
    loadModel();

    camera = new THREE.PerspectiveCamera(40, screenWidth / screenHeight, 50, 10000);
    camera.position.set(0, 100, 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);
    renderTargetParameters = {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBAFormat,
        stencilBuffer: true
    };
    renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters);

    composer    = new THREE.EffectComposer(renderer);
    composer.renderTarget1.stencilBuffer = true;
    composer.renderTarget2.stencilBuffer = true;

    normal      = new THREE.RenderPass(scene, camera);
    outline     = new THREE.RenderPass(outScene, camera);
    outline.clear = false;
    
    mask        = new THREE.MaskPass(maskScene, camera);
    mask.inverse = true;
    clearMask   = new THREE.ClearMaskPass();
    copyPass    = new THREE.ShaderPass(THREE.CopyShader);
    copyPass.renderToScreen = true;

   ...