Glsl 在WebGL中-实例化几何体时，是否可以传递每个实例的逐顶点属性信息？

我试图通过原始WebGL和实例化几何体进行重建；虽然，在测试之后，看起来我可能只需要像示例中那样绘制多个网格，但我想我会首先在这里要求再次检查

现在的问题本质上是-是否可以为渲染的几何体的每个实例传递逐顶点数据

希望这是有道理的，但如果没有-

• 我正在渲染的几何体有4个顶点
• 对于每个几何体实例-我需要为每个几何体实例的每个顶点指定uv坐标
• 设置步幅或偏移似乎不起作用

基本上，现在发生的事情是根据当前的数据

[s1,t1,s2,t2,s3,t3,s4,t4,s1,t1,s2,t2,s3,t3,s4,t4] // enough uvs for 2 instances, each s and t value makes up 1 uv coord for 1 vertex

而不是像这样在块中读取和分配数据

      // instance 1            // instance 2
[[s1,t1,s2,t2,s3,t3,s4,t4], [s1,t1,s2,t2,s3,t3,s4,t4]]

// Each s and t forms 1 uv coord for 1 vertex 

数据似乎是这样读取的

  [s1,t1,s2,t2,s3,t3,s4,t4,s1,t1,s2,t2,s3,t3,s4,t4]
  // Each s and t pair is assigned to every vertex of each instance

---

有没有可能让第二个街区的一切正常运转？如果不是，那很好，但我想我应该问一下。

这取决于你的意思

是否可以为渲染的几何体的每个实例传递逐顶点数据

如果您的意思是通过属性，那么答案是否定的。您可以获得每个顶点的数据或每个实例的数据，但不能获得每个实例的每个顶点的数据

但您还可以获得两个额外的输入，

gl_VertexID

和

gl_InstanceID

（在WebGL2中），或者您可以添加自己的输入，用于计算UV或用于查找纹理中的数据，以有效地获得所需的结果

例如，假设您有20x10个立方体。你可以这样做

attribute vec4 position;    // 36 cube positions
attribute vec2 uv;          // 36 cube UVs
attribute float instanceId; // 1 per instance

uniform float cubesAcross;  // set to 20
uniform float cubesDown;    // set to 10

varying v_uv;

void main() {
  float cubeX = mod(instanceId, cubesAcross);
  float cubeY = floor(instanceId / cubesAcross);

  v_vu = (vec2(cubeX, cubeY) + uv) / vec2(cubesAcross, cubesDown);

  gl_Position = ...whatever you were doing for position before...
}

例如：

“严格使用”；
函数main（）{
常数m4=twgl.m4；
const gl=document.querySelector（“canvas”）.getContext（“webgl”）；
const ext=gl.getExtension（'ANGLE_instanced_array'）；
如果（！ext）{
返回警报（“需要角度实例化数组”）；
}
twgl.addExtensionsToContext（gl）；
常数vs=`
属性向量4位置；
属性向量2 texcoord；
属性mat4矩阵；
属性float instanceId；
均匀浮动立方体交叉；//设置为20
均匀浮动立方体向下；//设置为10
可变矢量2 v_texcoord；
void main（）{
gl_位置=矩阵*位置；
float cubeX=mod（instanceId，cubesAcross）；
浮动立方体=地板（instanceId/cubesAcross）；
v_texcoord=（vec2（cubeX，cubeY）+texcoord）/vec2（cubesAcross，cubesDown）；
}
`;
常数fs=`
精密中泵浮子；
可变矢量2 v_texcoord；
void main（）{
gl_FragColor=vec4（v_texcoord，0,1）；
}
`;
//编译着色器、链接、查找位置
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
常数立方交叉=20；
常数立方下=10；
常量numCubes=立方交叉*立方向下；
//每个实例的矩阵
常量矩阵扩展数据=新的浮点数组（16*numcube）；
常数矩阵=[]；
const instanceIds=新的Float32Array（numCubes）；
for（设i=0；i