Animated mesh outline shader
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);
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);
...