Too big buffers are ignored

[dy]

Hi! Faced some issue of packing values over 300.
A shader just fills it’s x coordinate gl_FragColor = packFloat(gl_FragCoord.x):

var triangle     = require('a-big-triangle')
var glslify      = require('glslify')
var toFloat  = require("glsl-read-float")
var Shader = require('gl-shader')

var canvas     = document.body.appendChild(document.createElement('canvas'))
var gl         = canvas.getContext('webgl')

canvas.height = 1024;
canvas.width = 1024;
var w = gl.drawingBufferWidth;
var h = gl.drawingBufferHeight;

var shader = Shader(gl, "\
    attribute vec2 position;\
    void main() {\
      gl_Position = vec4(position, 0, 1);\
    }",
    glslify("\
    #pragma glslify: packFloat = require(glsl-read-float)\n\
    void main() {\
      gl_FragColor = packFloat(floor(gl_FragCoord.x));\
    }", {inline: true})
);

//Draw shader
shader.bind()
triangle(gl)

//Read back the float
var buffer = new Uint8Array(4*w*h)
gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, buffer)
var unpacked = new Float32Array(w*h);
for (var i = 0, j = 0; j < w; j++, i+=4) {
  unpacked[j] = readFloat(buffer[i+0],buffer[i+1],buffer[i+2],buffer[i+3]);
}
 console.log(unpacked)

All the values of unpacked array with index > 300 are 0.

[mikolalysenko]

I think the issue here is you are using the wrong precision in your shader. Try using highp and see if the problem persists.