line end issues

by sjpt

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

JavaScript

// Demonstration of care needed with line ends;  NOT symmetric top and bottom.
// I suspect (???) that the issue is not with three,
// but that the graphics driver should have
// <= rather than < test for the end of the line.
// or maybe even the gl spec specifies it should not be symmetric?
var renderer;
renderer = new THREE.WebGLRenderer();   // we don't bother to connect up the canvas
renderer.autoClear = false;						// the last element 'a' field will be set if cleared
mat = new THREE.RawShaderMaterial({
  vertexShader: `
    attribute vec3 position;
    uniform float pixOffset;
   	void main() {
    ////----> be careful to align on pixel centres...
    	gl_Position = vec4(0, pixOffset + position.y * 2. - 1., 0, 1);
   }`,
  fragmentShader: `void main() {gl_FragColor = vec4(1./255.,2./255.,3./255.,1.);}`,
  side: THREE.DoubleSide
});
mat.depthTest = mat.depthWrite = false;
h=2	// height of the buffer.  Whatever h, the last buffer element will not be written
mat.uniforms.pixOffset = {value: 0.5/h}

geom = new THREE.Geometry();
geom.vertices[0] = new THREE.Vector3(0, 0, 0);  // these lines should just fit
geom.vertices[1] = new THREE.Vector3(0, 1, 0);  // but this loses the very end
geom.addAttribute('v', )
obj = new THREE.Line(geom, mat);
obj.frustumCulled = false;

camera = new THREE.OrthographicCamera(); // dummy, not used in shader but three expects it

targ = new THREE.WebGLRenderTarget(1, h);


gl = renderer.context
renderer.setRenderTarget(targ)

renderer.render(obj, camera)
buffbad = new Uint8Array(h*4);
gl.readPixels(0,0,1,h, gl.RGBA, gl.UNSIGNED_BYTE, buffbad);

geom.vertices[1].y = 1.001;  // add that tiny bit that gets it right
geom.verticesNeedUpdate = true
renderer.render(obj, camera)
buffok = new Uint8Array(h*4);
gl.readPixels(0,0,1,h, gl.RGBA, gl.UNSIGNED_BYTE, buffok);
document.body.innerHTML = buffbad.join(', ') + '<br>' + buffok.join(', ')