twgl.js: 如何通过 BufferInfo 使用打包的顶点数组

Question

我在 webgl 项目中使用 twgl.js (http://twgljs.org/)，它很好用，但我想优化我的代码以使用打包的顶点数组。但是我似乎无法弄清楚它在 twgl 中是如何工作的，我可以看到其中有一些步幅和偏移量选项，但没有进一步的信息它们将如何表现。我已经阅读了代码，但从中我感觉到它不允许我使用对 createBufferInfoFromArrays 的单个调用，而是需要更多的手动管道。是否可以使用 twgl.js 设置打包数组？怎么样？

Answer 1

简短的回答是 "Yes, it will require a lot more plumbing" 或者更确切地说，由您来打包数据。您可以轻松制作自己的 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 应该支持顶点数组对象？

如果你自己打包它，你必须给它提供上面所有相同的信息，只是为了让 twgl 将它转换成 BufferInfo，这似乎不会为你节省很多时间。

twgl.js: 如何通过 BufferInfo 使用打包的顶点数组

twgl.js: How to use a packed vertex array via BufferInfo

javascript

twgl.js