将向量数组传递给着色器

Question

Trying to pass an array of vec3s to the shader, Firefox gives me this warning:

WebGL warning: uniform setter: (uniform u_colors[0]) 'values' length (4) must be a positive integer multiple of size of <enum 0x8b51>.

Also, it only renders black, not the given color.

 const colrs = [ [239, 71, 111], [255, 209, 102], [6, 214, 160], [17, 138, 178] ], dmnsn = [1200, 300], glCtx = (() => twgl.getContext(document.createElement("canvas")))( twgl.setDefaults({ attribPrefix: "a_" }) ); var bfInf = twgl.primitives.createXYQuadBufferInfo(glCtx), pgInf = twgl.createProgramInfo(glCtx, ["vs", "fs"]); function rendr(fbi, pi, u) { twgl.bindFramebufferInfo(glCtx, fbi); twgl.drawObjectList(glCtx, [ { programInfo: pi, bufferInfo: bfInf, uniforms: u } ]); } function prepr() { glCtx.canvas.width = dmnsn[0]; glCtx.canvas.height = dmnsn[1]; document.body.append(glCtx.canvas); rendr(null, pgInf, { u_colors: colrs }); } prepr();

 <script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script> <script id="vs" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec2 a_texcoord; varying vec2 v_texcoord; void main() { v_texcoord = a_texcoord; gl_Position = a_position; } </script> <script id="fs" type="x-shader/x-fragment"> precision highp float; uniform vec3 u_colors[4]; void main() { gl_FragColor= vec4(u_colors[0], 1.0); } </script>

Answer 1

WebGL does not want an array of arrays.

const someArrayWith4ArraysOf3Values = [
  [11, 22, 33],
  [44, 55, 66],
  [77, 88, 99],
  [10, 11, 12],
];
gl.uniform3fv(some4ElementVec3Uniform, someArrayWith4ArraysOf3Values); // bad

It wants a flat array.

const someArrayWith12Values = [
  11, 22, 33,
  44, 55, 66,
  77, 88, 99,
  10, 11, 12,
];
gl.uniform3fv(some4ElementVec3Uniform, someArrayWith12Values); // good

Also, colors in shaders are float values that go from 0 to 1 so you probably want to set your colors to values from 0 to 1 or divide by 255 in your shader

 const colrs = [ [1, 0.7, 0.5], [255, 209, 102], [6, 214, 160], [17, 138, 178] ].flat(), dmnsn = [1200, 300], glCtx = (() => twgl.getContext(document.createElement("canvas")))( twgl.setDefaults({ attribPrefix: "a_" }) ); var bfInf = twgl.primitives.createXYQuadBufferInfo(glCtx), pgInf = twgl.createProgramInfo(glCtx, ["vs", "fs"]); function rendr(fbi, pi, u) { twgl.bindFramebufferInfo(glCtx, fbi); twgl.drawObjectList(glCtx, [ { programInfo: pi, bufferInfo: bfInf, uniforms: u } ]); } function prepr() { glCtx.canvas.width = dmnsn[0]; glCtx.canvas.height = dmnsn[1]; document.body.append(glCtx.canvas); rendr(null, pgInf, { u_colors: colrs }); } prepr();

 <script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script> <script id="vs" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec2 a_texcoord; varying vec2 v_texcoord; void main() { v_texcoord = a_texcoord; gl_Position = a_position; } </script> <script id="fs" type="x-shader/x-fragment"> precision highp float; uniform vec3 u_colors[4]; void main() { gl_FragColor=vec4(u_colors[0], 1.0); } </script>