thing.js

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;

    composer.addPass(normal);
    composer.addPass(mask);
    composer.addPass(outline);
    composer.addPass(clearMask);
    composer.addPass(copyPass);

    window.addEventListener('resize', onWindowResize, false);
};

loadModel = function() {
    var loader = new THREE.JSONLoader();
    result = loader.parse(model);
    setModel(result.geometry);
}

setModel = function(geometry) {
    //geometry = new THREE.TorusKnotGeometry(50, 10, 50, 20);
    var matColor, matFlat, matShader, outShader, uni, offset, outlineShader;
    matColor = new THREE.MeshPhongMaterial(0xffffff);
    matColor.skinning = true;
    mesh1 = new THREE.SkinnedMesh(geometry, matColor);
		scene.add(mesh1);
    matFlat = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        skinning: true
    });
    mesh2 = new THREE.SkinnedMesh(geometry, matFlat);
    maskScene.add(mesh2);

    offset = {
        "offset": {
            type: "f",
            value: 2.0
        }
    };

    uni = _.merge(THREE.ShaderLib["basic"].uniforms, offset);

    outlineShader = new THREE.ShaderMaterial(
        {
            uniforms: uni,
            vertexShader: [
                "uniform float offset;",
                "uniform sampler2D boneTexture;",
                "uniform int boneTextureWidth;",
                "uniform int boneTextureHeight;",
                "mat4 getBoneMatrix( const in float i ) {",
                    "float j = i * 4.0;",
                    "float x = mod( j, float( boneTextureWidth ) );",
                    "float y = floor( j / float( boneTextureWidth ) );",
                    "float dx = 1.0 / float( boneTextureWidth );",
                    "float dy = 1.0 / float( boneTextureHeight );",
                    "y = dy * ( y + 0.5 );", "vec4 v1 = texture2D( boneTexture, vec2( dx * ( x + 0.5 ), y ) );",
                    "vec4 v2 = texture2D( boneTexture, vec2( dx * ( x + 1.5 ), y ) );",
                    "vec4 v3 = texture2D( boneTexture, vec2( dx * ( x + 2.5 ), y ) );",
                    "vec4 v4 = texture2D( boneTexture, vec2( dx * ( x + 3.5 ), y ) );",
                    "mat4 bone = mat4( v1, v2, v3, v4 );",
                    "return bone;",
                "}",
                "void main() {",
                    "mat4 boneMatX = getBoneMatrix( skinIndex.x );",
                    "mat4 boneMatY = getBoneMatrix( skinIndex.y );",
                    "mat4 boneMatZ = getBoneMatrix( skinIndex.z );",
                    "mat4 boneMatW = getBoneMatrix( skinIndex.w );",
                    "vec4 skinVertex = vec4( position + normal * offset, 1.0 );",
                    "vec4 skinned  = boneMatX * skinVertex * skinWeight.x;",
                    "skinned      += boneMatY * skinVertex * skinWeight.y;",
                    "skinned      += boneMatZ * skinVertex * skinWeight.z;",
                    "skinned      += boneMatW * skinVertex * skinWeight.w;",
                    "vec4 mvPosition;",
                    "mvPosition = modelViewMatrix * skinned;",
                    //"mvPosition = modelViewMatrix * (skinned + vec4( position + normal * offset, 1.0 ));",
                    "gl_Position = projectionMatrix * mvPosition;",
                "}"].join("\n"),
            fragmentShader: ["void main(){", "gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );", "}"].join("\n"),
            skinning: true
        }
    );

    mesh3 = new THREE.SkinnedMesh(geometry, outlineShader);
    outScene.add(mesh3);
 		if(geometry.animations){
        mesh1.mixer = new THREE.AnimationMixer(mesh1);
        mesh2.mixer = new THREE.AnimationMixer(mesh2);
        mesh3.mixer = new THREE.AnimationMixer(mesh3);
        for(i = 0; i < geometry.animations.length; i++){
            animation = geometry.animations[i];
            action1 = new THREE.AnimationAction(animation);
            action2 = new THREE.AnimationAction(animation);
            action3 = new THREE.AnimationAction(animation);
            if(animation.name == 'WalkCycle'){
                mesh1.mixer.play(action1);
                mesh2.mixer.play(action2);
                mesh3.mixer.play(action3);
            };
        };
		};
};

onWindowResize = function() {
    screenWidth = window.innerWidth;
    screenHeight = window.innerHeight;
    renderer.setSize(screenWidth, screenHeight);
};

animate = function() {
    var delta;
    delta = clock.getDelta();
    render(delta);
    return requestAnimationFrame(animate);
};

render = function(delta) {
    if (mesh1) {
        mesh1.rotation.y += 0.01;
        mesh1.rotation.y += 0.01;
        mesh3.rotation.y += 0.01;
        mesh2.quaternion.copy(mesh1.quaternion);
    }
    mesh1.mixer.update(delta);
    mesh2.mixer.update(delta);
    mesh3.mixer.update(delta);
    //renderer.render(outScene, camera);
    composer.render(delta);
};



init();
animate();