Webgl 在twgl.js中使用实例扩展

我是twgl.js的新手。我想知道如何使用扩展，尤其是实例

---

它是否为我们提供了一种简单的方法，还是我必须在其中使用纯webgl？

实例是在v3.6.0中添加的

要在twgl调用中使用实例，请在

FullArraySpec

s上设置一个

除数

，如果您自己创建了WebGL上下文调用

twgl.addExtensionsOnContext

建议您使用顶点数组对象，因为twgl不会自动重置先前设置了除数的属性的除数

例如：

const vs=`
均匀mat4 u_视图投影；
属性向量4实例颜色；
属性mat4 instanceWorld；
属性向量4位置；
属性向量3正常；
可变vec4 v_位置；
可变vec3 v_正常；
可变的vec4 v_颜色；
void main（）{
gl_位置=u_视图投影*实例世界*位置；
v_颜色=实例颜色；
v_normal=（instanceWorld*vec4（normal，0））.xyz；
}
`;
常数fs=`
精密中泵浮子；
可变vec3 v_正常；
可变的vec4 v_颜色；
均匀vec3 u_lightDir；
void main（）{
vec3 a_normal=正常化（v_normal）；
浮动灯光=点（u_lightDir，a_normal）*.5+.5；
gl_FragColor=vec4（v_color.rgb*灯光，v_color.a）；
}
`;
“严格使用”；
函数main（）{
常数m4=twgl.m4；
常数v3=twgl.v3；
const gl=document.querySelector（“canvas”）.getContext（“webgl”）；
twgl.addExtensionsToContext（gl）；
如果（！gl.drawArraysInstanced | |！gl.createVertexArray）{
警报（“需要安装drawArraysInstanced和createVertexArray”）；//eslint禁用行
返回；
}
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
函数随机数（最小值、最大值）{
如果（最大值===未定义）{
最大值=最小值；
最小值=0；
}
返回min+Math.random（）*（max-min）；
}
常数numInstances=100000；
const instanceWorlds=new Float32Array（numInstances*16）；
常量InstanceColor=[]；
常数r=100；
for（设i=0；i
body{margin:0；}
画布{宽度：100vw；高度：100vh；显示：块；}
实例是在v3.6.0中添加的

要在twgl调用中使用实例，请在
FullArraySpec
s上设置一个
除数
，如果您自己创建了WebGL上下文调用
twgl.addExtensionsOnContext

建议您使用顶点数组对象，因为twgl不会自动重置先前设置了除数的属性的除数

例如：


const vs=`
均匀mat4 u_视图投影；
属性向量4实例颜色；
属性mat4 instanceWorld；
属性向量4位置；
属性向量3正常；
可变vec4 v_位置；
可变vec3 v_正常；
可变的vec4 v_颜色；
void main（）{
gl_位置=u_视图投影*实例世界*位置；
v_颜色=实例颜色；
v_normal=（instanceWorld*vec4（normal，0））.xyz；
}
`;
常数fs=`
精密中泵浮子；
可变vec3 v_正常；
可变的vec4 v_颜色；
均匀vec3 u_lightDir；
void main（）{
vec3 a_normal=正常化（v_normal）；
浮动灯光=点（u_lightDir，a_normal）*.5+.5；
gl_FragColor=vec4（v_color.rgb*灯光，v_color.a）；
}
`;
“严格使用”；
函数main（）{
常数m4=twgl.m4；
常数v3=twgl.v3；
const gl=document.querySelector（“canvas”）.getContext（“webgl”）；
twgl.addExtensionsToContext（gl）；
如果（！gl.drawArraysInstanced | |！gl.createVertexArray）{
警报（“需要安装drawArraysInstanced和createVertexArray”）；//eslint禁用行
返回；
}
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
函数随机数（最小值、最大值）{
如果（最大值===未定义）{
最大值=最小值；
最小值=0；
}
返回min+Math.random（）*（max-min）；
}
常数numInstances=100000；
const instanceWorlds=new Float32Array（numInstances*16）；
常量InstanceColor=[]；
常数r=100；
对于（设i=0；i