ubo of row-major mat2x3 array (no twgl)

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

/*bug-in-github-api-content-can-not-be-empty*/

index.js

import * as twgl from 'https://twgljs.org/dist/4.x/twgl-full.module.js';

const vs = `#version 300 es
void main() {
  gl_Position = vec4(0, 0, 0, 1);
  gl_PointSize = 1.0;
}
`;

const fs = `#version 300 es
precision highp float;
out vec4 outColor;

layout(std140, row_major) uniform Ubo
{
    mat2x3 m2[3];
} ubo;

uniform int arrayNdx;
uniform int majorNdx;

void main()
{
    outColor = vec4(ubo.m2[arrayNdx][majorNdx], 1) / 255.0;
}`;

const canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
const gl = canvas.getContext('webgl2');
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const shaders = gl.getAttachedShaders(programInfo.program);
/*
const ext = gl.getExtension('WEBGL_debug_shaders');
if (ext) shaders.forEach(s => {
  console.log(`----------\n${ext.getTranslatedShaderSource(s)}`);
});
*/
const program = programInfo.program;
gl.useProgram(program);

const numUniformBlocks = gl.getProgramParameter(program, gl.ACTIVE_UNIFORM_BLOCKS);
for (let ii = 0; ii < numUniformBlocks; ++ii) {
  const name = gl.getActiveUniformBlockName(program, ii);
  const blockSpec = {
    index: gl.getUniformBlockIndex(program, name),
    usedByVertexShader: gl.getActiveUniformBlockParameter(program, ii, gl.UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER),
    usedByFragmentShader: gl.getActiveUniformBlockParameter(program, ii, gl.UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER),
    size: gl.getActiveUniformBlockParameter(program, ii, gl.UNIFORM_BLOCK_DATA_SIZE),
    uniformIndices: gl.getActiveUniformBlockParameter(program, ii, gl.UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES),
  };
  blockSpec.used = blockSpec.usedByVertexShader || blockSpec.usedByFragmentShader;
  console.log(ii, JSON.stringify(blockSpec, null, 2));
}


const buf = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, buf);
const data = new Float32Array([
     1,  2, 201, 202,  // 0
     3,  4, 203, 204,
     5,  6, 205, 206,
     7,  8, 207, 208,  // 1
     9, 10, 209, 210,
    11, 12, 211, 212,
    13, 14, 213, 214,  // 2
    15, 16, 215, 216,
    17, 19, 217, 218,
]);
console.log("data size:", data.byteLength);
gl.bufferData(gl.UNIFORM_BUFFER, data, gl.STATIC_DRAW);
const ndx = gl.getUniformBlockIndex(programInfo.program, "Ubo");
gl.uniformBlockBinding(programInfo.program, ndx, 0);
gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, buf);

for (let arrayNdx = 0; arrayNdx < 3; ++arrayNdx) {
  for (let majorNdx = 0; majorNdx < 2; ++majorNdx) {
    twgl.setUniforms(programInfo, {
      arrayNdx,
      majorNdx,
    });
    gl.drawArrays(gl.POINTS, 0, 1);
    const p = new Uint8Array(4);
    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, p);
    console.log(`m2[${arrayNdx}][${majorNdx}] = ${p}`);
  }
}

console.log(gl.getError());

jsGist.json

{"name":"ubo of row-major mat2x3 array (no twgl)","settings":{},"filenames":["index.html","index.css","index.js"]}