Can't readPixels in GL after drawing an image

Here is my GL handler:

_handleContextCreate = gl => {
    var program = gl.createProgram();
  
    // Create the vertex shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, `
  attribute vec2 vertexPosition;

  varying vec2 textureCoord; 

  void main() {
    gl_Position = vec4(vertexPosition, 0.0, 1.0);

    // gl_Position is [-1,-1] to [1,1], translate to [0,0] to [1,1] for texture
    textureCoord = vec2(vertexPosition.x / 2.0 + 0.5, vertexPosition.y / 2.0 + 0.5);
  }`);
    gl.compileShader(vertexShader);
    gl.attachShader(program, vertexShader);

    // Create fragment shader
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, `precision mediump float;

  uniform sampler2D sampler;

  varying vec2 textureCoord;
 
  void main() {
    gl_FragColor = texture2D(sampler, textureCoord);
  }`);
    gl.compileShader(fragmentShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);

    // Get the attribute and uniform locations from the program
    var vertexPositionLocation = gl.getAttribLocation(program, 'vertexPosition');
    var samplerLocation = gl.getUniformLocation(program, 'sampler');

    // Create a buffer with 4 points to form a square
    var squareBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
    var vertices = new Float32Array([
       -1, -1,   // bottom left
        1, -1,   // bottom right
       -1,  1,   // top left
        1,  1]); // top right 
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Bind the triangles to the vertex shader's 'vertexPosition' attribute and draw it
    gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPositionLocation);

    // Make a texture to store img and track it in gl's TEXTURE0 unit
    var imgTexture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, imgTexture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._textureAsset);
    gl.uniform1i(samplerLocation, 0);  // bind fragment shader's 'sampler' to TEXTURE0

    // Setup the viewport for the framebuffer
    gl.viewport(0, 0, 1000, 1000);

    // Draw img to the framebuffer
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    gl.endFrameEXP();

    var data = new Uint8Array(10 * 10 * 4);
    gl.readPixels(0, 0, 10, 10, gl.RGBA, gl.UNSIGNED_BYTE, data);
    console.log(data)
};

The returned array is empty, only an array of zeroes.

Am I missing something?

@bacon I need your help man

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.

@cozmo – what plaform (iOS / Android, and version?) is this on?