three.js ~ gl_FragCoord troubleshot ANGLE

2016-14-03

by Ludovic Bailly

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
	uniform vec4 viewport;
  
  varying vec2 vUv;
  varying float w, h;

  void main() {
  	// Getting uv coord
    vUv = uv;
    
    // Getting width and height of the viewport for fragment
    w = viewport.z;
    h = viewport.w;
    
    gl_PointSize = 550.0;
    gl_Position = vec4(position, 1.0);
  }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
  varying vec2 vUv;
  varying float w, h;

  void main() {
    gl_FragColor = vec4(vUv, 0.0, 1.0);
    vec2 xp = vec2(
    	gl_FragCoord.x * 2.0 / w - 1.0,
      gl_FragCoord.y * 2.0 / h - 1.0
    );
    gl_FragColor = vec4(ceil(xp), 0.0, 1.0);
  }
</script>

JavaScript

//var WIDTH = window.innerWidth - 20;
//var HEIGHT = window.innerHeight - 20;

var WIDTH = HEIGHT = 550;

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 1, 1000);
var clock = new THREE.Clock();

var uniforms = {
  'viewport': { type: 'v4', value: new THREE.Vector4() }
};

var shaderMat = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: document.getElementById('vertex-shader').textContent,
  fragmentShader: document.getElementById('fragment-shader').textContent,
  depthWrite: false,
  depthTest: false
});

/*var quad = new THREE.Mesh(
  new THREE.PlaneGeometry(2, 2),
  shaderMat
);*/

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', THREE.Float32Attribute([0.0, 0.0, 0.0], 3));
var quad = new THREE.Points(
	geometry,
  shaderMat
);
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);
  
  var viewport = new THREE.Vector4(
    0.0,
    0.0,
    renderer.domElement.offsetWidth,
    renderer.domElement.offsetHeight
  );
  
  quad.material.uniforms.viewport.value = viewport;
  renderer.render(scene, camera);
}