javascript - 从多个 RGBA 值创建 WebGL 纹理

Question

我正在根据 this 使用一个 RGBA 值创建 WebGL 纹理答案，并且想知道如何创建一个基于多个 RGBA 值的值。

对于这个数组，

var textureData = new Uint8Array([128, 128, 0, 255]);

我尝试为另一个 RGBA 值添加附加值，但没有任何变化。作为引用，我将有 262,144 个 RGBA 值(如果这有影响的话)。

谢谢!

Answer 1

From the spec gl.texImage2D 的签名是

gl.texImage2D(
  target,          // TEXTURE_2D or TEXTURE_CUBE_MAP
  level,           // mip level 0 to n
  internalFormat,  // must match `format` below in WebGL 1.0
  width,           // width of `data` in pixels
  height,          // height of `data` in pixels
  border,          // must always be 0 in WebGL
  format,          // gl.RGBA, gl.RGB, gl.ALPHA, gl.LUMINANCE, ...
  type,            // gl.UNSIGNED_BYTE, ...
  data);           // your data which is width * height pixels

示例 3x2

// here's 3x2 RGBA/UNSIGNED_BYTE pixels
var data = new Uint8Array([
  255, 0, 0, 255,      255, 255, 0, 255,    0, 255, 0, 255,
  0, 255, 255, 255,    0, 0, 255, 255,      255, 255, 255, 255,
]);
var level = 0;
var width = 3;
var height = 2;
var format = gl.RGBA;
var type = gl.UNSIGNED_BYTE;
var internalFormat = format;
var border = 0;
var target = gl.TEXTURE_2D;

gl.texImage2D(
  target,          // TEXTURE_2D or TEXTURE_CUBE_MAP
  level,           // mip level 0 - n
  internalFormat,  // must match `format` below in WebGL 1.0
  width,           // width of `data` in pixels
  height,          // height of `data` in pixels
  border,          // must always be 0 in WebGL
  format,          // gl.RGBA, gl.RGB, gl.ALPHA, gl.LUMINANCE, ...
  type,            // gl.UNSIGNED_BYTE, ...
  data);           // your data which is width * height pixels

如果您想更新较大纹理的较小部分，还可以使用 gl.texSubImage2D。

示例:

var vs = `
void main() {
  gl_PointSize = 100.0;
  gl_Position = vec4(0, 0, 0, 1);
}
`;
var fs = `
precision mediump float;
uniform sampler2D texture;
void main() {
  gl_FragColor = texture2D(texture, gl_PointCoord);
}
`;
var gl = document.createElement("canvas").getContext("webgl");
document.body.appendChild(gl.canvas);
var program = twgl.createProgramFromSources(gl, [vs, fs]);
gl.useProgram(program);

// here's 3x2 RGBA/UNSIGNED_BYTE pixels
var data = new Uint8Array([
  255, 0, 0, 255,      255, 255, 0, 255,    0, 255, 0, 255,
  0, 255, 255, 255,    0, 0, 255, 255,      200, 200, 200, 255,
]);
var level = 0;
var width = 3;
var height = 2;
var format = gl.RGBA;
var type = gl.UNSIGNED_BYTE;
var internalFormat = format;
var border = 0;
var target = gl.TEXTURE_2D;

var texture = gl.createTexture();
gl.bindTexture(target, texture);
gl.texImage2D(
  target,          // TEXTURE_2D or TEXTURE_CUBE_MAP
  level,           // 0 to n (mip level)
  internalFormat,  // must match `format` below in WebGL 1.0
  width,           // width of `data` in pixels
  height,          // height of `data` in pixels
  border,          // must always be 0 in WebGL
  format,          // gl.RGBA, gl.RGB, gl.ALPHA, gl.LUMINANCE, ...
  type,            // gl.UNSIGNED_BYTE, ...
  data);           // your data which is width * height pixels

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.drawArrays(gl.POINTS, 0, 1);
  

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/twgl.min.js"></script>