three.js ~ Stencil Outline Example

2016-02-03

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera, scene, light, renderer, geometry, material, mesh1, mesh2, mesh3, gl;

var controls;
var outlineMaterial;

createOutlineMaterial();
init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 1000;
  camera.position.y = 200;

  scene.add(camera);

  // controls
  controls = new THREE.OrbitControls(camera);

  material = new THREE.MeshNormalMaterial();

  var geometry1 = createBufferGeometry(true);
  mesh1 = new THREE.Mesh(geometry1, material);
  mesh1.scale.set(200, 200, 200);
  scene.add(mesh1);

  var geometry2 = createBufferGeometry(true);
  mesh2 = new THREE.Mesh(geometry2, material);
  mesh2.scale.set(200, 200, 200);
  mesh2.position.set(150, 150, -150);
  scene.add(mesh2);

  var geometry3 = createBufferGeometry(false);
  mesh3 = new THREE.Mesh(geometry3, material);
  mesh3.scale.set(200, 200, 200);
  mesh3.position.set(50, 300, -500);
  scene.add(mesh3);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    preserveDrawingBuffer: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.autoClear = false;

  gl = renderer.getContext();

  document.body.appendChild(renderer.domElement);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  // Clear renderer
  renderer.clear();

  renderStencilOutline();
}

function renderStencilOutline() {
  // Enable tests
  //gl.enable(gl.STENCIL_TEST);
  //gl.enable(gl.DEPTH_TEST);

  // Set stencil buffer value to one for current pixel when test is true
  //gl.stencilOp(gl.KEEP, gl.INCR, gl.REPLACE);

  // Stencil test always true when drawing some pixels
  //gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
  //gl.stencilMask(0xFF);	// Write on stencil buffer    

  // Render the scene
  renderer.render(scene, camera);

  //gl.stencilFunc(gl.LEQUAL, 1, 0xFF);
  //gl.stencilMask(0x00); // Read-only stencil buffer

 ...