Did it!
I’m very proud of myself
Code for anyone who comes across this issue themselves
const _clientWaitAsync = function (engine, sync, flags, interval_ms) {
if (flags === void 0) { flags = 0; }
if (interval_ms === void 0) { interval_ms = 10; }
var gl = engine._gl;
return new Promise(function (resolve, reject) {
var check = function () {
var res = gl.clientWaitSync(sync, flags, 0);
if (res == gl.WAIT_FAILED) {
reject();
return;
}
if (res == gl.TIMEOUT_EXPIRED) {
setTimeout(check, interval_ms);
return;
}
resolve();
};
check();
});
};
const _readTexturePixels = function (engine, texture, width, height, faceIndex, level, buffer) {
if (faceIndex === void 0) { faceIndex = -1; }
if (level === void 0) { level = 0; }
if (buffer === void 0) { buffer = null; }
var gl = engine._gl;
if (!gl) {
throw new Error("Engine does not have gl rendering context.");
}
if (!engine._dummyFramebuffer) {
var dummy = gl.createFramebuffer();
if (!dummy) {
throw new Error("Unable to create dummy framebuffer");
}
engine._dummyFramebuffer = dummy;
}
gl.bindFramebuffer(gl.FRAMEBUFFER, engine._dummyFramebuffer);
if (faceIndex > -1) {
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture._webGLTexture, level);
}
else {
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture._webGLTexture, level);
}
var readType = (texture.type !== undefined) ? engine._getWebGLTextureType(texture.type) : gl.UNSIGNED_BYTE;
switch (readType) {
case gl.UNSIGNED_BYTE:
if (!buffer) {
buffer = new Uint8Array(4 * width * height);
}
readType = gl.UNSIGNED_BYTE;
break;
default:
if (!buffer) {
buffer = new Float32Array(4 * width * height);
}
readType = gl.FLOAT;
break;
}
var buf = gl.createBuffer();
gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buf);
gl.bufferData(gl.PIXEL_PACK_BUFFER, buffer.byteLength, gl.STREAM_READ);
gl.readPixels(0, 0, width, height, gl.RGBA, readType, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, engine._currentFramebuffer);
var sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
if (!sync) {
return null;
}
gl.flush();
return _clientWaitAsync(engine, sync, 0, 10).then(function () {
gl.deleteSync(sync);
gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buf);
gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, buffer);
gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
gl.deleteBuffer(buf);
return buffer;
});
};
const readPixels = function (texture, faceIndex, level, buffer) {
if (faceIndex === void 0) { faceIndex = 0; }
if (level === void 0) { level = 0; }
if (buffer === void 0) { buffer = null; }
if (!texture._texture) {
return null;
}
var size = texture.getSize();
var width = size.width;
var height = size.height;
var engine = texture._getEngine();
if (!engine) {
return null;
}
if (level != 0) {
width = width / Math.pow(2, level);
height = height / Math.pow(2, level);
width = Math.round(width);
height = Math.round(height);
}
try {
if (texture._texture.isCube) {
return _readTexturePixels(engine, texture._texture, width, height, faceIndex, level, buffer);
}
return _readTexturePixels(engine, texture._texture, width, height, -1, level, buffer);
}
catch (e) {
console.log(e)
return null;
}
};