Standard Full Screen Quad Setup not Working in Three.js
<p>I'm trying to establish a full screen quad using a pass thru vertex shader in THREE.js.  The quad itself is a plane geometry with dimension (2, 2) located at the origin.  It is assigned the ShaderMaterial.  The camera is at <code>z = 1</code> aiming at the quad.</p>

<p>The shaders are quite simple:</p>

<p>Vertex Shader:</p>

<pre><code>void main() {
   gl_Position = vec4( position, 1.0 );
}
</code></pre>

<p>Fragment Shader:</p>

<pre><code>void main() {
   gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
</code></pre>

<p>But nothing shows up on screen.  This setup is a standard way of render-to-texture, why is it not working in THREE.js?</p>

<p>I've tried <code>plane.frustumCulled = false</code> and changing the clip planes of the camera to no avail.</p>

<p>Any help is appreciated.</p>

<hr>

<p>Upon further investigation, the reason for not seeing the rendering result is more involved and pointing to some odd behavior in three.js.  </p>

<p>I am using a PlaneGeometry with a rotation matrix applied, which is then wrapped by an Object3D with a counter rotation.</p>

<pre><code>var geometry = new THREE.PlaneGeometry(2, 2);
var m4 = new THREE.Matrix4().makeRotationX(Math.PI * 0.5);
geometry.applyMatrix(m4);

var mesh = new THREE.Mesh(geometry, material);
var obj = new THREE.Object3D();
obj.add(mesh);
obj.rotation.x = -Math.PI * 0.5;
scene.add(obj);
</code></pre>

<p>This setup seems to throw three.js off and no rendering is shown.</p>

<hr>

<p>Ok, the rotation got thrown away because it is a part of model view matrix that I ignored in the vertex shader. I've to refact what I'm currently doing.</p>