实例化在webgl中做什么 [英] what does instancing do in webgl
问题描述
我想知道有什么方法可以理解在webgl的一次绘制调用中顶点着色器将被调用多少次?因为我想知道实例化的实际作用，它是否为每个实例调用了每个共享顶点?因此它将调用太多时间的顶点着色器
I want to know is any way to understand how many times vertex shader will be called in a draw call in webgl? because I want to know what does instancing realy do, is it call every shared vertices for each instance? so it will call too many time vertex shader
推荐答案
实例化为每个实例的每个顶点调用您的顶点着色器.区别在于您可以选择1个或多个属性，以便每个实例仅前进一次，而不是每个顶点一次.
Instancing calls your vertex shader one per vertex per instance. The difference is you can choose 1 or more attributes to only advance once per instance instead of once per vertex.
通常，每个属性为每个顶点前进stride个字节. stride是gl.vertexAttribPointer的最后一个参数的倒数第二个.如果stride是0，则WebGL将根据size和type(gl.vertexAttribPointer的第二个和第三个参数)为您计算步幅.
Normally each attribute advances stride bytes for each vertex. stride is the second to the last argument of gl.vertexAttribPointer. If stride is 0 then WebGL compute a stride for you based on size and type (the 2nd and 3rd arguments to gl.vertexAttribPointer.
通过实例化，您可以为某些属性调用gl.vertexAttribDivisor. 0是默认的正常情况，表示每个顶点通过缓冲区将属性前进一次". 1表示每个实例将属性通过缓冲区前进一次.
With instancing you call gl.vertexAttribDivisor for certain attributes. 0 is the default normal situation and means 'advance the attribute through the buffer once per vertex. 1 means advance the attribute through the buffer once per instance.
这可能是最简单的例子.假设您有一个由2个三角形和6个顶点组成的四边形
Here's probably the simplest example. Assume you have a quad made from 2 triangles and 6 vertices
-1, -1,
1, -1,
-1, 1,
-1, 1,
1, -1,
-1, -1,
您还有3种颜色的缓冲区
You also have a buffer of 3 colors
1, 0, 0,
0, 1, 0,
0, 0, 1,
您告诉WebGL这样读取四边形位置
You tell WebGL to read the quad positions like this
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const size = 2; // 2 floats per iteration
const type = gl.FLOAT;
const normalize = false;
const stride = 0; // let WebGL compute the stride based on size and type
const offset = 0;
gl.vertexAttribPointer(posLocation, size, type, normalize, stride, offset);
对于颜色，您告诉它每个实例使用一种颜色
For the colors you tell it to use 1 color per instance
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
const size = 3; // 2 floats per iteration
const type = gl.FLOAT;
const normalize = false;
const stride = 0; // let WebGL compute the stride based on size and type
const offset = 0;
gl.vertexAttribPointer(colorLocation, size, type, normalize, stride, offset);
gl.vertexAttribDivisor(colorLocation, 1);
现在，当您像这样呼叫gl.drawArraysInstanced时
Now when you call gl.drawArraysInstanced like this
const mode = gl.TRIANGLES;
const first = 0;
const numVerts = 6; // 6 verts per quad
const numInstances = 3;
gl.drawArraysInstanced(mode, first, numVerts, numInstances);
它将调用您的顶点着色器3 * 6次.假设你有
It's going to call your vertex shader 3 * 6 times. Assuming you had
attribute vec2 position;
attribute vec3 color;
每次迭代的位置和颜色值将为
The values of positions and color for each iteration will be
iteration | position | color | gl_InstanceID | gl_VertexID
----------+----------+--------+---------------+------------
0 | -1, -1, | 1,0,0 | 0 | 0
1 | 1, -1, | 1,0,0 | 0 | 1
2 | -1, 1, | 1,0,0 | 0 | 2
3 | -1, 1, | 1,0,0 | 0 | 3
4 | 1, -1, | 1,0,0 | 0 | 4
5 | -1, -1, | 1,0,0 | 0 | 5
6 | -1, -1, | 0,1,0 | 1 | 0
7 | 1, -1, | 0,1,0 | 1 | 1
8 | -1, 1, | 0,1,0 | 1 | 2
9 | -1, 1, | 0,1,0 | 1 | 3
10 | 1, -1, | 0,1,0 | 1 | 4
11 | -1, -1, | 0,1,0 | 1 | 5
12 | -1, -1, | 0,0,1 | 2 | 0
13 | 1, -1, | 0,0,1 | 2 | 1
14 | -1, 1, | 0,0,1 | 2 | 2
15 | -1, 1, | 0,0,1 | 2 | 3
16 | 1, -1, | 0,0,1 | 2 | 4
17 | -1, -1, | 0,0,1 | 2 | 5
请注意，gl_VertexID和gl_InstanceID仅在WebGL2中可用.
Note that gl_VertexID and gl_InstanceID are only available in WebGL2.
这篇关于实例化在webgl中做什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
