javascript - twgl.js:如何通过BufferInfo使用压缩的顶点数组

我在webgl项目中使用twgl.js（http://twgljs.org/），使用起来非常好，但是我想优化我的代码以使用压缩顶点数组。但是我似乎无法弄清楚它在twgl中是如何工作的，我可以看到其中的步幅和偏移量有一些选择，但是没有进一步的信息来说明它们将如何工作。我已经阅读了代码，但是由此我感觉到，它不允许我使用单个调用createBufferInfoFromArrays，而是需要大量手动操作。
是否可以使用twgl.js设置打包数组？怎么样？

最佳答案

简短的答案是“是的，这将需要更多的管道”，或者由您来打包数据。您可以轻松制作自己的BufferInfo

var packedBuffer = twgl.createBufferFromTypedArray(
    gl, typedArrayWithPackedData);

var indexBuffer = twgl.createBufferFromTypedArray(
    gl, typedArrayWithIndices, gl.ELEMENT_ARRAY_BUFFER);

var stride = 36; // position + normal + texcoord + rgba8

var handMadeBufferInfo = {
  numElements: 123, // or whatever
  indices: indexBuffer,            // remove if no indices
  elementType: gl.UNSIGNED_SHORT,  // remove if no indices
  attribs: {
    position: { buffer: packedBuffer, numComponents: 3, type: gl.FLOAT, stride: stride, offset: 0, },
    normal:   { buffer: packedBuffer, numComponents: 3, type: gl.FLOAT, stride: stride, offset: 12, },
    texcoord: { buffer: packedBuffer, numComponents: 2, type: gl.FLOAT, stride: stride, offset: 24, },
    vcolor:   { buffer: packedBuffer, numComponents: 4, type: gl.UNSIGNED_BYTE, stride: stride, offset: 32, normalize: true },
  },
};

var gl = document.getElementById("c").getContext("webgl");
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

// there's no easy way to interleave the data unless we use pure binary so
// lets do it manually.
var position = [
  -1, -1, 0,
   1, -1, 0,
  -1,  1, 0,
   1,  1, 0,
];
var texcoord = [
   0,  0,
   1,  0,
   0,  1,
   1,  1,
]
var color = [
   255, 0, 0, 255,
   0, 255, 0, 255,
   0, 0, 255, 255,
   255, 255, 255, 255,
];

var stride = 24; // position + texcoord + rgba8

var typedArrayWithPackedData = new ArrayBuffer(stride * 4);
var floatView = new Float32Array(typedArrayWithPackedData);
var uint8View = new Uint8Array(typedArrayWithPackedData);
var floatAdd = 1;
var uint8Add = stride - 4;
var floatOffset = 0;
var uint8Offset = stride - 4;
var positionOffset = 0;
var texcoordOffset = 0;
var colorOffset = 0;
for (var ii = 0; ii < 4; ++ii) {
  floatView[floatOffset++] = position[positionOffset++];
  floatView[floatOffset++] = position[positionOffset++];
  floatView[floatOffset++] = position[positionOffset++];
  floatView[floatOffset++] = texcoord[texcoordOffset++];
  floatView[floatOffset++] = texcoord[texcoordOffset++];
  floatOffset += floatAdd;
  uint8View[uint8Offset++] = color[colorOffset++];
  uint8View[uint8Offset++] = color[colorOffset++];
  uint8View[uint8Offset++] = color[colorOffset++];
  uint8View[uint8Offset++] = color[colorOffset++];
  uint8Offset += uint8Add;
}

var packedBuffer = twgl.createBufferFromTypedArray(
    gl, typedArrayWithPackedData);

var typedArrayWithIndices = new Uint16Array([0, 1, 2, 2, 1, 3]);
var indexBuffer = twgl.createBufferFromTypedArray(
    gl, typedArrayWithIndices, gl.ELEMENT_ARRAY_BUFFER);

var handMadeBufferInfo = {
  numElements: 6, // or whatever
  indices: indexBuffer,            // remove if no indices
  elementType: gl.UNSIGNED_SHORT,  // remove if no indices
  attribs: {
    position: { buffer: packedBuffer, numComponents: 3, type: gl.FLOAT, stride: stride, offset: 0, },
    texcoord: { buffer: packedBuffer, numComponents: 2, type: gl.FLOAT, stride: stride, offset: 12, },
    color:    { buffer: packedBuffer, numComponents: 4, type: gl.UNSIGNED_BYTE, stride: stride, offset: 20, normalize: true, },
  },
};

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

// make a texture with a circle in it
var canvas2d = document.createElement("canvas");
canvas2d.width = 64;
canvas2d.height = 64;
var ctx = canvas2d.getContext("2d");
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(32, 32, 30, 0, Math.PI * 2, false);
ctx.fill();


var uniforms = {
  u_texture: twgl.createTexture(gl, { src: canvas2d }),
};

gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, handMadeBufferInfo);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, handMadeBufferInfo);

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 position;
attribute vec2 texcoord;
attribute vec4 color;

varying vec2 v_texcoord;
varying vec4 v_color;

void main() {
  v_texcoord = texcoord;
  v_color = color;
  gl_Position = position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texcoord;
varying vec4 v_color;

void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord) * v_color;
}
</script>
<canvas id="c"></canvas>

注意：twgl.createBufferFromTypedArray仅在0.0.37版本中公开

目前尚不清楚如何更容易。如果您想twgl为您打包数据，目前尚不清楚要点。渲染真的快得多吗？也许twgl应该支持Vertex Array Objects吗？

如果您自己打包，则无论如何都必须将所有相同的信息给予上面，只是要将twgl转换为BufferInfo似乎并不会节省很多时间。

关于javascript - twgl.js:如何通过BufferInfo使用压缩的顶点数组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34428568/