Question

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

Answer 1

简短的回答是“是的，它需要更多的管道”，或者更确切地说，由你来打包数据。您可以轻松制作自己的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？

如果你自己打包它，你必须在上面提供所有相同的信息才能将它变成BufferInfo，这似乎不会为你节省很多时间。

twgl.js：如何通过BufferInfo使用压缩顶点数组

1 个答案: