javascript - Standard Full Screen Quad Setup not Working in Three.js -

i'm trying establish full screen quad using pass thru vertex shader in three.js. quad plane geometry dimension (2, 2) located @ origin. assigned shadermaterial. camera @ z = 1 aiming @ quad.

the shaders quite simple:

vertex shader:

void main() {    gl_position = vec4( position, 1.0 ); } 

fragment shader:

void main() {    gl_fragcolor = vec4(0.0, 1.0, 0.0, 1.0); } 

but nothing shows on screen. setup standard way of render-to-texture, why not working in three.js?

i've tried plane.frustumculled = false , changing clip planes of camera no avail.

any appreciated.

---

upon further investigation, reason not seeing rendering result more involved , pointing odd behavior in three.js.

i using planegeometry rotation matrix applied, wrapped object3d counter rotation.

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); 

this setup seems throw three.js off , no rendering shown.

---

ok, rotation got thrown away because part of model view matrix ignored in vertex shader. i've refact i'm doing.

i'm not sure exact problem you're having, here example of working fullscreen quad using same technique.

var canvas = document.getelementbyid('canvas');  var scene = new three.scene();  var renderer = new three.webglrenderer({canvas: canvas, antialias: true});  var camera = new three.perspectivecamera(45, canvas.clientwidth / canvas.clientwidth, 1, 1000);  var clock = new three.clock();    var quad = new three.mesh(    new three.planegeometry(2, 2),    new three.shadermaterial({      vertexshader: document.getelementbyid('vertex-shader').textcontent,      fragmentshader: document.getelementbyid('fragment-shader').textcontent,      depthwrite: false,      depthtest: false    })  );  scene.add(quad);    var box = new three.mesh(    new three.boxgeometry(50, 50, 50),    new three.meshbasicmaterial({color: '#000', wireframe: true})  );  scene.add(box);    camera.position.z = 200;    render();    function render() {    requestanimationframe(render);        if (canvas.width !== canvas.clientwidth || canvas.height !== canvas.clientheight) {      renderer.setsize(canvas.clientwidth, canvas.clientheight, false);      camera.aspect = canvas.clientwidth /  canvas.clientheight;      camera.updateprojectionmatrix();    }        var dt = clock.getdelta();    box.rotation.x += dt * 2 * math.pi / 5;    box.rotation.y += dt * 2 * math.pi / 7;    box.rotation.z += dt * 2 * math.pi / 11;        renderer.render(scene, camera);  }

html, body, #canvas {    margin: 0;    padding: 0;    width: 100%;    height: 100%;    display: block;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>  <canvas id="canvas"></canvas>  <script id="vertex-shader" type="x-shader/x-vertex">    varying vec2 vuv;      void main() {      vuv = uv;      gl_position = vec4(position, 1.0);    }  </script>  <script id="fragment-shader" type="x-shader/x-fragment">    varying vec2 vuv;      void main() {      gl_fragcolor = vec4(vuv, 0.0, 1.0);    }  </script>