JSFiddle - React, Tailwind, and code Playground
JavaScript
function log(t) {
d.innerText += '\n' + t;
}
function expect(expected, was, desc) {
expected = expected.toString();
was = was.toString();
if (desc !== undefined) {
desc = `[${desc}] `;
} else {
desc = '';
}
const ok = expected === was;
const not_str = ok ? '' : ' NOT';
const text = `${desc}Expected ${expected}, was${not_str} ${was}.`
log(text);
}
const res = (function(){
const c = document.createElement('canvas');
const g = c.getContext('webgl2');
if (!g)
return 'No webgl2.';
const SIZE = 10;
const COLORS = [
new Uint8Array([255, 0, 0, 255]),
new Uint8Array([0, 255, 0, 255]),
new Uint8Array([0, 0, 255, 255]),
];
const F_COLORS = COLORS.map(x => x.map(y => y / 255.0));
const src_tex = g.createTexture();
g.bindTexture(g.TEXTURE_2D_ARRAY, src_tex);
g.texStorage3D(g.TEXTURE_2D_ARRAY, 1, g.RGBA8, SIZE, SIZE, COLORS.length);
const dst_tex = g.createTexture();
g.bindTexture(g.TEXTURE_2D_ARRAY, dst_tex);
g.texStorage3D(g.TEXTURE_2D_ARRAY, 1, g.RGBA8, SIZE, SIZE, COLORS.length);
const src_fbs = [];
const dst_fbs = [];
for (let i in COLORS) {
dst_fbs[i] = g.createFramebuffer();
g.bindFramebuffer(g.DRAW_FRAMEBUFFER, dst_fbs[i]);
g.framebufferTextureLayer(g.DRAW_FRAMEBUFFER, g.COLOR_ATTACHMENT0, dst_tex, 0, i);
src_fbs[i] = g.createFramebuffer();
g.bindFramebuffer(g.DRAW_FRAMEBUFFER, src_fbs[i]);
g.framebufferTextureLayer(g.DRAW_FRAMEBUFFER, g.COLOR_ATTACHMENT0, src_tex, 0, i);
const c = F_COLORS[i];
g.clearColor(c[0], c[1], c[2], c[3]);
g.clear(g.COLOR_BUFFER_BIT);
}
function clear_dst() {
g.clearColor(0, 0, 0, 0);
for (let i in COLORS) {
g.bindFramebuffer(g.DRAW_FRAMEBUFFER, dst_fbs[i]);
g.clear(g.COLOR_BUFFER_BIT);
}
}
function check_fbs(fbs, desc) {
for (let i in COLORS) {
g.bindFramebuffer(g.READ_FRAMEBUFFER, fbs[i]);
const p = new Uint8Array(4);
g.readPixels(0, 0, 1, 1, g.RGBA,...