Javascript WebGl:绘制遇到错误的圆（在内部指定）
Javascript WebGl:绘制遇到错误的圆（在内部指定）,javascript,webgl,Javascript,Webgl,在尝试创建createRegularPolygon函数时，我遇到了一个问题，似乎无法对其进行渲染。它抛出一个错误，告诉我试图访问超出范围的顶点
[.Offscreen-For-WebGL-0x7f8c4a89c400]GL错误：GL_无效_操作：GLDraweElements:尝试访问属性0中超出范围的顶点
下面是我生成几何体的代码，下面是整个测试代码。下面代码的某些内容破坏了格式
export const createRegularPolygon =
(gl: WebGLRendering
在尝试创建createRegularPolygon函数时，我遇到了一个问题，似乎无法对其进行渲染。它抛出一个错误，告诉我试图访问超出范围的顶点
[.Offscreen-For-WebGL-0x7f8c4a89c400]GL错误：GL_无效_操作：GLDraweElements:尝试访问属性0中超出范围的顶点
下面是我生成几何体的代码，下面是整个测试代码。下面代码的某些内容破坏了格式
export const createRegularPolygon =
(gl: WebGLRenderingContext) =>
(position: [number, number], sides: number, radius: number): FlatGeometry | null => {
const points: number[] = [...position, 0];
const indices = [];
let i = -1;
while (++i <= sides) {
const segment = i * 2 * Math.PI / sides;
points.push(
radius * Math.cos(segment) + position[0],
radius * Math.sin(segment) + position[1],
0,
);
}
i = 0;
while (++i <= sides) indices.push(i, i + 1, 0);
const verticiesBufferData = new Float32Array(points);
const verticiesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, verticiesBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
verticiesBufferData,
gl.STATIC_DRAW,
);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
const indicesBufferData = new Float32Array(indices);
const indicesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
gl.bufferData(
gl.ELEMENT_ARRAY_BUFFER,
indicesBufferData,
gl.STATIC_DRAW,
);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
if (!verticiesBuffer || !indicesBuffer) return null;
return {
verticies: verticiesBuffer,
indices: indicesBuffer,
size: indices.length,
};
};
以下是编译后的代码：
作用{
"严格使用",；
函数reducearray，func，base{
设i=-1；
而++ireducearray，result，value，index，array=>addresult，funcvalue，index，array，[]；
常数展平=数组=>[].concat…数组；
const copy=array=>array.0；
常量添加=数组、值、索引=0=>{
const result=copyarray；
结果指数，0，数值；
返回结果；
};
常量createTriangle=gl=>points=>{
常数顶点=平面映射点，pnt=>[…pnt，0]；
const vertexBuffer=gl.createBuffer；
如果！顶点缓冲区
返回null；
gl.bindBuffergl.ARRAY_BUFFER，vertexBuffer；
gl.bufferDatagl.ARRAY\u BUFFER，新float32arrayvities，gl.STATIC\u DRAW；
gl.bindBuffergl.ARRAY\u缓冲区，空；
const indexBuffer=gl.createBuffer；
如果！indexBuffer
返回null；
gl.bindbuffer gl.ELEMENT_数组_BUFFER，indexBuffer；
gl.bufferDatagl.ELEMENT_ARRAY_BUFFER，新的UINT16数组[0,1,2]，gl.STATIC_DRAW；
gl.bindBuffergl.ELEMENT_数组_BUFFER，空；
返回{
垂直方向：顶点缓冲区，
指数：indexBuffer，
尺寸：3，
};
};
const createRectangle=gl=>width，height=width=>{
常数顶点=[
-宽度/2，高度/2，0，
宽度/2，高度/2，0，
-宽度/2，-高度/2，0，
宽度/2，-高度/2，0，
];
const vertexBuffer=gl.createBuffer；
如果！顶点缓冲区
返回null；
gl.bindBuffergl.ARRAY_BUFFER，vertexBuffer；
gl.bufferDatagl.ARRAY\u BUFFER，新float32arrayvities，gl.STATIC\u DRAW；
gl.bindBuffergl.ARRAY\u缓冲区，空；
const indexBuffer=gl.createBuffer；
如果！indexBuffer
返回null；
gl.bindbuffer gl.ELEMENT_数组_BUFFER，indexBuffer；
gl.bufferDatagl.ELEMENT_ARRAY_BUFFER，新的UINT16数组[0,1,2,1,3,2]，gl.STATIC_DRAW；
gl.bindBuffergl.ELEMENT_数组_BUFFER，空；
返回{
垂直方向：顶点缓冲区，
指数：indexBuffer，
尺码：6，
};
};
常量createRegularPolygon=gl=>位置、边、半径=>{
常量点=[…位置，0]；
常数指数=[]；
设i=-1；
而++i几何=>{
gl.useProgramshader.program；
gl.bindBuffergl.ARRAY_缓冲区、几何体、垂直体；
gl.bindBuffergl.ELEMENT\u ARRAY\u BUFFER，geometry.index；
gl.vertexattributepointershader.attribLocations.vertex，3，gl.FLOAT，false，0，0；
gl.EnableVertexAttributesArrayShader.AttriblLocations.VertexExposition；
gl.drawerElementsGL.TRIANGLES，geometry.size，gl.UNSIGNED_SHORT，0；
gl.DisableVertexAttributesArrayShader.AttriblLocations.VertexExposition；
};
const createShaderLoader=gl=>type，source=>{
常量着色器=gl.createShadertype；
gl.shaderSourceshader，来源；
gl.compileShadershader；
如果！gl.getShaderParametershader，gl.COMPILE\u状态{
gl.deleteShadershader；
返回null；
}
返回着色器；
};
const createShader=gl=>vsSource，fsSource=>{
const loadShader=createShaderLoadergl；
const vertexShader=loadShadergl.VERTEX_着色器，vsSource；
const fragmentShader=loadShadergl.FRAGMENT_着色器，fsSource；
const shaderProgram=gl.createProgram；
gl.AttachShaderShader程序，vertexShader；
gl.AttachShaderShader程序，碎片着色器；
gl.linkProgramshaderProgram；
if！shaderProgram | |！gl.getProgramParametersShaderprogram，gl.LINK|u状态{
返回null；
}
返回{
程序：着色器程序，
消耗：{
vertexPosition:gl.GetAttributeLocationShaderProgram，“避免Exposition”，
},
统一位置：{
projectionMatrix:gl.getUniformLocationshaderProgram，'uProjectionMatrix'，
modelViewMatrix:gl.getUniformLocationshaderProgram，“uModelViewMatrix”，
}
};
};
常数vs=`
属性向量4；
真空总管{
gl_位置=零位；
}
`;
常数fs=`
真空总管{
gl_FragColor=vec41.0,1.0,1.0,1.0；
}
`;
函数maingl{
如果！德国劳埃德船级社
返回false；
gl.clearColor0.0,0.0,0.0,1.0；
gl.clearDepth1.0；
gl.enablegl.DEPTH_测试；
gl.depthFuncgl.LEQUAL；
gl.cleargl.COLOR\u缓冲位；
gl.viewport0，0，gl.canvas.width，gl.canvas.height；
const polygonT=createTrianglegl[-1,1]，-1-
1], [1, -1]];
const polygonP=createRegularPolygongl[0,0]，3,0.5；
常数polygonR=createRectanglegl2，0.25；
const defaultShader=createShaderglvs，fs；
如果defaultShader | |！polygonT | | |！polygonR | | |！polygonP
返回false；
[polygonP].forEachdrawgldefaultShader；
返回true；
}
const canvas=document.querySelector`canvas`；
如果画布{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
const gl=canvas.getContext'webgl'；
如果德国劳埃德船级社
maingl；
}
};
html，
身体{
宽度：100%；
身高：100%；
}
html，
身体
帆布{
填充：0；
保证金：0；
}
这个错误只是一个输入错误
createRegularPolygon中的这条线
应该是这个吗
const indicesBufferData = new Uint16Array(indices);
我现在就要逃命了，真的花了两个小时。非常感谢。这发生在我们所有人身上：DSo对我来说是新的，但现在我了解了发生的事情，你可能不知道每次调用它们时基本上都在创建一个新的函数对象。换句话说，以someFunctionalArgs形式进行的每个调用都在进行内存分配，以创建一个新的函数对象。绝对正确，但是我只调用了一次。[polygonP]。forEachdrawgldefaultShader并在其上循环。我发现这种风格允许更多的模块化代码。
const indicesBufferData = new Uint16Array(indices);