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

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

对于此数组，

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

我尝试为其他RGBA值添加其他值，但没有任何改变。供参考，如果有区别，我将有262,144个RGBA值。

谢谢！

最佳答案

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>

关于javascript - 从多个RGBA值创建WebGL纹理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38722163/