Three.js - Billboard that perfectly fits the viewport

Question

I'm trying to create a 2D overlay for my 3D scene. I've thought of three options:

1. Get a 2d context from the existing canvas element and draw on it.
   • Unfortunately, this won't work since three.js already got a webgl context from the canvas.
2. Create a second canvas element and position it over the top of the original canvas
   • I'd like to avoid this solution ; I don't want to worry about passing click events from the overlay canvas to the original canvas
3. Create a billboard (from a particle) that perfectly fits the viewport and give it a canvas texture.

How do I carry out the third option? I'll need the option to resize the canvas. I already know how to use a canvas as a texture thanks to this example.

Also, if the second option is not as hard as I'm thinking it might be, please let me know.

Answer 1

Second option is simpler if you don't need it to work in IE9 (which I think is true since you use WebGL). You can add pointer-events:none; to overlay canvas's style attribute and it will pass any events through.

Answer 2

A second render pass with an orthographic camera is likely the best option.

renderer.autoClear = false; // To allow render overlay

---

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( sceneOrtho, cameraOrtho );

See http://threejs.org/examples/webgl_sprites.html .

three.js r.69