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?