3d 圆柱体中的顶点不正确
Incorrect vertices in 3d cylinder
现在，我正在尝试在 webgl 中绘制一个 3d 圆柱体形状，顶部比底部薄。圆柱体也未加盖。圆柱体是用三角形作为边绘制的，以十二边形（12 条边）作为圆。但是，我的一侧似乎三角形指向错误的方向。
我把它留作 imgur 的超链接，因为我有多张情况图片。
这些是我硬编码的顶点和索引。有一堆没用的，因为那些是用于顶盖和底盖的，后来我发现我不需要，我决定把它们注释掉比删除它们更容易。
var vertices = new Float32Array([ // Vertex coordinates indicies
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.5, 1.0, 0.0, // u0- u1- u2- u3 up 0, 1, 2, 3,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.25, 1.0,-0.433, // u4- u5- u6- u7 up 4, 5, 6, 7,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.25, 1.0, 0.433, // u8- u9- u10-u11 up 8, 9,10,11,
0.0, 1.0, 0.5, // u12 up middle 12,
0.0, 1.0, 0.5, -0.25, -1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
-0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.866, -1.0, 0.5, -0.5, -1.0, 0.866, // u1- u2- d2- d1 17,18,19,20,
-0.433, 1.0, 0.25, -0.5, 1.0, 0.0, -1.0, -1.0, 0.0, -0.866, -1.0, 0.5, // u2- u3- d3- d2 21,22,23,24,
-0.5, 1.0, 0.0, -0.433, 1.0, -0.25, -0.866, -1.0, -0.5, -1.0, -1.0, 0.0, // u3- u4- d4- d3 25,26,27,28,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, -0.5, -1.0,-0.866, -0.866, -1.0, -0.5, // u4- u5- d5- d4 29,30,31,32,
-0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.0, -1.0, -1.0, -0.5, -1.0,-0.866, // u5- u6- d6- d5 33,34,35,36,
0.0, 1.0, -0.5, 0.25, 1.0,-0.433, 0.5, -1.0,-0.866, 0.0, -1.0, -1.0, // u6- u7- d7- d6 37,38,39,40,
0.25, 1.0,-0.433, 0.433, 1.0, -0.25, 0.866, -1.0, -0.5, 0.5, -1.0,-0.866, // u7- u8- d8- d7 41,42,43,44,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 1.0, -1.0, 0.0, 0.866, -1.0, -0.5, // u8- u9- d9- d8 45,46,47,48,
0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.866, -1.0, 0.5, 1.0, -1.0, 0.0, // u9- u10-d10-d9 49,50,51,52,
0.433, 1.0, 0.25, 0.25, 1.0, 0.433, 0.5, -1.0, 0.866, 0.866, -1.0, 0.5, // u10-u11-d11-d10 53,54,55,56,
0.25, 1.0, 0.433, 0.0, 1.0, 0.5, 0.0, -1.0, 1.0, 0.5, -1.0, 0.866, // u11-u0- d0- d11 57,58,59,60,
0.0, -1.0, 1.0, -0.5, -1.0, 0.866, -0.866, -1.0, 0.5, -1.0, -1.0, 0.0, // d0- d1- d2- d3 down 61,62,63,64,
-0.866, -1.0, -0.5, -0.5, -1.0,-0.866, 0.0, -1.0, -1.0, 0.5, -1.0,-0.866, // d4- d5- d6- d7 down 65,66,67,68,
0.866, -1.0, -0.5, 1.0, -1.0, 0.0, 0.866, -1.0, 0.5, 0.5, -1.0, 0.866, // d8- d9- d10-d11 down 69,70,71,72,
0.0, 1.0, 0.5, // d12 down middle 73,
]);
var indices = new Uint8Array([ // Indices of the vertices
//0, 1,12, 1, 2,12, 2, 3,12, 3, 4,12, 4, 5,12, 5, 6,12, 6, 7,12, 7, 8,12, 8, 9,12, 9,10,12, 10,11,12, 11, 0,12, //top cap
13,14,15, 13,15,16,
17,18,19, 17,19,20,
21,22,23, 21,23,24,
25,26,27, 25,27,28,
29,30,31, 29,31,32,
33,34,35, 33,35,36,
37,38,39, 37,39,40,
41,42,43, 41,43,44,
45,46,47, 45,47,48,
49,50,51, 49,51,52,
53,54,55, 53,55,56,
57,58,59, 57,59,60,
//61,62,73, 62,63,73, 63,64,73, 64,65,73, 65,66,73, 66,67,73, 67,68,73, 68,69,73, 69,70,73, 70,71,73, 71,72,73, 72,61,73, //bottom cap
]);
这一行
var vertices = new Float32Array([ // Vertex coordinates indicies
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.5, 1.0, 0.0, // u0- u1- u2- u3 up 0, 1, 2, 3,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.25, 1.0,-0.433, // u4- u5- u6- u7 up 4, 5, 6, 7,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.25, 1.0, 0.433, // u8- u9- u10-u11 up 8, 9,10,11,
0.0, 1.0, 0.5, // u12 up middle 12,
--> 0.0, 1.0, 0.5, -0.25, -1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
有一个 -1.0 应该有一个 1.0
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
我是二分找到的，先把8个顶点的后半部分注释掉，问题依旧，所以我把剩下4个顶点的后半部分注释掉，问题依旧，所以我注释掉了remaning 2 的第二部分，问题仍然存在，所以我查看了前 2 个三角形，发现了问题。
很明显，您的格式中存在未遵循的模式
其中一件与另一件不同
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
twgl.addExtensionsToContext(gl);
const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying vec3 v_position;
void main() {
gl_Position = matrix * position;
v_position = position.xyz;
}
`;
const fs = `
#extension GL_OES_standard_derivatives : enable
precision highp float;
varying vec3 v_position;
void main() {
vec3 X = dFdx(v_position);
vec3 Y = dFdy(v_position);
vec3 normal = normalize(cross(X,Y));
gl_FragColor = vec4(normal * 0.5 + 0.5, 1);
}
`;
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
var vertices = new Float32Array([ // Vertex coordinates indicies
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.5, 1.0, 0.0, // u0- u1- u2- u3 up 0, 1, 2, 3,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.25, 1.0,-0.433, // u4- u5- u6- u7 up 4, 5, 6, 7,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.25, 1.0, 0.433, // u8- u9- u10-u11 up 8, 9,10,11,
0.0, 1.0, 0.5, // u12 up middle 12,
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
-0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.866, -1.0, 0.5, -0.5, -1.0, 0.866, // u1- u2- d2- d1 17,18,19,20,
-0.433, 1.0, 0.25, -0.5, 1.0, 0.0, -1.0, -1.0, 0.0, -0.866, -1.0, 0.5, // u2- u3- d3- d2 21,22,23,24,
-0.5, 1.0, 0.0, -0.433, 1.0, -0.25, -0.866, -1.0, -0.5, -1.0, -1.0, 0.0, // u3- u4- d4- d3 25,26,27,28,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, -0.5, -1.0,-0.866, -0.866, -1.0, -0.5, // u4- u5- d5- d4 29,30,31,32,
-0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.0, -1.0, -1.0, -0.5, -1.0,-0.866, // u5- u6- d6- d5 33,34,35,36,
0.0, 1.0, -0.5, 0.25, 1.0,-0.433, 0.5, -1.0,-0.866, 0.0, -1.0, -1.0, // u6- u7- d7- d6 37,38,39,40,
0.25, 1.0,-0.433, 0.433, 1.0, -0.25, 0.866, -1.0, -0.5, 0.5, -1.0,-0.866, // u7- u8- d8- d7 41,42,43,44,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 1.0, -1.0, 0.0, 0.866, -1.0, -0.5, // u8- u9- d9- d8 45,46,47,48,
0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.866, -1.0, 0.5, 1.0, -1.0, 0.0, // u9- u10-d10-d9 49,50,51,52,
0.433, 1.0, 0.25, 0.25, 1.0, 0.433, 0.5, -1.0, 0.866, 0.866, -1.0, 0.5, // u10-u11-d11-d10 53,54,55,56,
0.25, 1.0, 0.433, 0.0, 1.0, 0.5, 0.0, -1.0, 1.0, 0.5, -1.0, 0.866, // u11-u0- d0- d11 57,58,59,60,
0.0, -1.0, 1.0, -0.5, -1.0, 0.866, -0.866, -1.0, 0.5, -1.0, -1.0, 0.0, // d0- d1- d2- d3 down 61,62,63,64,
-0.866, -1.0, -0.5, -0.5, -1.0,-0.866, 0.0, -1.0, -1.0, 0.5, -1.0,-0.866, // d4- d5- d6- d7 down 65,66,67,68,
0.866, -1.0, -0.5, 1.0, -1.0, 0.0, 0.866, -1.0, 0.5, 0.5, -1.0, 0.866, // d8- d9- d10-d11 down 69,70,71,72,
0.0, 1.0, 0.5, // d12 down middle 73,
]);
var indices = new Uint8Array([ // Indices of the vertices
//0, 1,12, 1, 2,12, 2, 3,12, 3, 4,12, 4, 5,12, 5, 6,12, 6, 7,12, 7, 8,12, 8, 9,12, 9,10,12, 10,11,12, 11, 0,12, //top cap
13,14,15, 13,15,16,
17,18,19, 17,19,20,
21,22,23, 21,23,24,
25,26,27, 25,27,28,
29,30,31, 29,31,32,
33,34,35, 33,35,36,
37,38,39, 37,39,40,
41,42,43, 41,43,44,
45,46,47, 45,47,48,
49,50,51, 49,51,52,
53,54,55, 53,55,56,
57,58,59, 57,59,60,
//61,62,73, 62,63,73, 63,64,73, 64,65,73, 65,66,73, 66,67,73, 67,68,73, 68,69,73, 69,70,73, 70,71,73, 71,72,73, 72,61,73, //bottom cap
]);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: vertices,
indices,
});
function render(time) {
time *= 0.001;
gl.enable(gl.DEPTH_TEST);
gl.useProgram(programInfo.program);
let mat = m4.perspective(
60 * Math.PI / 180,
gl.canvas.clientWidth / gl.canvas.clientHeight,
0.1,
10);
mat = m4.translate(mat, [0, 0, -3]);
mat = m4.rotateX(mat, time);
mat = m4.rotateZ(mat, time);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, {
matrix: mat,
});
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>
现在，我正在尝试在 webgl 中绘制一个 3d 圆柱体形状，顶部比底部薄。圆柱体也未加盖。圆柱体是用三角形作为边绘制的，以十二边形（12 条边）作为圆。但是，我的一侧似乎三角形指向错误的方向。
我把它留作 imgur 的超链接，因为我有多张情况图片。
这些是我硬编码的顶点和索引。有一堆没用的，因为那些是用于顶盖和底盖的，后来我发现我不需要，我决定把它们注释掉比删除它们更容易。
var vertices = new Float32Array([ // Vertex coordinates indicies
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.5, 1.0, 0.0, // u0- u1- u2- u3 up 0, 1, 2, 3,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.25, 1.0,-0.433, // u4- u5- u6- u7 up 4, 5, 6, 7,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.25, 1.0, 0.433, // u8- u9- u10-u11 up 8, 9,10,11,
0.0, 1.0, 0.5, // u12 up middle 12,
0.0, 1.0, 0.5, -0.25, -1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
-0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.866, -1.0, 0.5, -0.5, -1.0, 0.866, // u1- u2- d2- d1 17,18,19,20,
-0.433, 1.0, 0.25, -0.5, 1.0, 0.0, -1.0, -1.0, 0.0, -0.866, -1.0, 0.5, // u2- u3- d3- d2 21,22,23,24,
-0.5, 1.0, 0.0, -0.433, 1.0, -0.25, -0.866, -1.0, -0.5, -1.0, -1.0, 0.0, // u3- u4- d4- d3 25,26,27,28,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, -0.5, -1.0,-0.866, -0.866, -1.0, -0.5, // u4- u5- d5- d4 29,30,31,32,
-0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.0, -1.0, -1.0, -0.5, -1.0,-0.866, // u5- u6- d6- d5 33,34,35,36,
0.0, 1.0, -0.5, 0.25, 1.0,-0.433, 0.5, -1.0,-0.866, 0.0, -1.0, -1.0, // u6- u7- d7- d6 37,38,39,40,
0.25, 1.0,-0.433, 0.433, 1.0, -0.25, 0.866, -1.0, -0.5, 0.5, -1.0,-0.866, // u7- u8- d8- d7 41,42,43,44,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 1.0, -1.0, 0.0, 0.866, -1.0, -0.5, // u8- u9- d9- d8 45,46,47,48,
0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.866, -1.0, 0.5, 1.0, -1.0, 0.0, // u9- u10-d10-d9 49,50,51,52,
0.433, 1.0, 0.25, 0.25, 1.0, 0.433, 0.5, -1.0, 0.866, 0.866, -1.0, 0.5, // u10-u11-d11-d10 53,54,55,56,
0.25, 1.0, 0.433, 0.0, 1.0, 0.5, 0.0, -1.0, 1.0, 0.5, -1.0, 0.866, // u11-u0- d0- d11 57,58,59,60,
0.0, -1.0, 1.0, -0.5, -1.0, 0.866, -0.866, -1.0, 0.5, -1.0, -1.0, 0.0, // d0- d1- d2- d3 down 61,62,63,64,
-0.866, -1.0, -0.5, -0.5, -1.0,-0.866, 0.0, -1.0, -1.0, 0.5, -1.0,-0.866, // d4- d5- d6- d7 down 65,66,67,68,
0.866, -1.0, -0.5, 1.0, -1.0, 0.0, 0.866, -1.0, 0.5, 0.5, -1.0, 0.866, // d8- d9- d10-d11 down 69,70,71,72,
0.0, 1.0, 0.5, // d12 down middle 73,
]);
var indices = new Uint8Array([ // Indices of the vertices
//0, 1,12, 1, 2,12, 2, 3,12, 3, 4,12, 4, 5,12, 5, 6,12, 6, 7,12, 7, 8,12, 8, 9,12, 9,10,12, 10,11,12, 11, 0,12, //top cap
13,14,15, 13,15,16,
17,18,19, 17,19,20,
21,22,23, 21,23,24,
25,26,27, 25,27,28,
29,30,31, 29,31,32,
33,34,35, 33,35,36,
37,38,39, 37,39,40,
41,42,43, 41,43,44,
45,46,47, 45,47,48,
49,50,51, 49,51,52,
53,54,55, 53,55,56,
57,58,59, 57,59,60,
//61,62,73, 62,63,73, 63,64,73, 64,65,73, 65,66,73, 66,67,73, 67,68,73, 68,69,73, 69,70,73, 70,71,73, 71,72,73, 72,61,73, //bottom cap
]);
这一行
var vertices = new Float32Array([ // Vertex coordinates indicies
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.5, 1.0, 0.0, // u0- u1- u2- u3 up 0, 1, 2, 3,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.25, 1.0,-0.433, // u4- u5- u6- u7 up 4, 5, 6, 7,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.25, 1.0, 0.433, // u8- u9- u10-u11 up 8, 9,10,11,
0.0, 1.0, 0.5, // u12 up middle 12,
--> 0.0, 1.0, 0.5, -0.25, -1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
有一个 -1.0 应该有一个 1.0
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
我是二分找到的，先把8个顶点的后半部分注释掉，问题依旧，所以我把剩下4个顶点的后半部分注释掉，问题依旧，所以我注释掉了remaning 2 的第二部分，问题仍然存在，所以我查看了前 2 个三角形，发现了问题。
很明显，您的格式中存在未遵循的模式
其中一件与另一件不同
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
twgl.addExtensionsToContext(gl);
const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying vec3 v_position;
void main() {
gl_Position = matrix * position;
v_position = position.xyz;
}
`;
const fs = `
#extension GL_OES_standard_derivatives : enable
precision highp float;
varying vec3 v_position;
void main() {
vec3 X = dFdx(v_position);
vec3 Y = dFdy(v_position);
vec3 normal = normalize(cross(X,Y));
gl_FragColor = vec4(normal * 0.5 + 0.5, 1);
}
`;
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
var vertices = new Float32Array([ // Vertex coordinates indicies
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.5, 1.0, 0.0, // u0- u1- u2- u3 up 0, 1, 2, 3,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.25, 1.0,-0.433, // u4- u5- u6- u7 up 4, 5, 6, 7,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.25, 1.0, 0.433, // u8- u9- u10-u11 up 8, 9,10,11,
0.0, 1.0, 0.5, // u12 up middle 12,
0.0, 1.0, 0.5, -0.25, 1.0, 0.433, -0.5, -1.0, 0.866, 0.0, -1.0, 1.0, // u0- u1- d1- d0 13,14,15,16,
-0.25, 1.0, 0.433, -0.433, 1.0, 0.25, -0.866, -1.0, 0.5, -0.5, -1.0, 0.866, // u1- u2- d2- d1 17,18,19,20,
-0.433, 1.0, 0.25, -0.5, 1.0, 0.0, -1.0, -1.0, 0.0, -0.866, -1.0, 0.5, // u2- u3- d3- d2 21,22,23,24,
-0.5, 1.0, 0.0, -0.433, 1.0, -0.25, -0.866, -1.0, -0.5, -1.0, -1.0, 0.0, // u3- u4- d4- d3 25,26,27,28,
-0.433, 1.0, -0.25, -0.25, 1.0,-0.433, -0.5, -1.0,-0.866, -0.866, -1.0, -0.5, // u4- u5- d5- d4 29,30,31,32,
-0.25, 1.0,-0.433, 0.0, 1.0, -0.5, 0.0, -1.0, -1.0, -0.5, -1.0,-0.866, // u5- u6- d6- d5 33,34,35,36,
0.0, 1.0, -0.5, 0.25, 1.0,-0.433, 0.5, -1.0,-0.866, 0.0, -1.0, -1.0, // u6- u7- d7- d6 37,38,39,40,
0.25, 1.0,-0.433, 0.433, 1.0, -0.25, 0.866, -1.0, -0.5, 0.5, -1.0,-0.866, // u7- u8- d8- d7 41,42,43,44,
0.433, 1.0, -0.25, 0.5, 1.0, 0.0, 1.0, -1.0, 0.0, 0.866, -1.0, -0.5, // u8- u9- d9- d8 45,46,47,48,
0.5, 1.0, 0.0, 0.433, 1.0, 0.25, 0.866, -1.0, 0.5, 1.0, -1.0, 0.0, // u9- u10-d10-d9 49,50,51,52,
0.433, 1.0, 0.25, 0.25, 1.0, 0.433, 0.5, -1.0, 0.866, 0.866, -1.0, 0.5, // u10-u11-d11-d10 53,54,55,56,
0.25, 1.0, 0.433, 0.0, 1.0, 0.5, 0.0, -1.0, 1.0, 0.5, -1.0, 0.866, // u11-u0- d0- d11 57,58,59,60,
0.0, -1.0, 1.0, -0.5, -1.0, 0.866, -0.866, -1.0, 0.5, -1.0, -1.0, 0.0, // d0- d1- d2- d3 down 61,62,63,64,
-0.866, -1.0, -0.5, -0.5, -1.0,-0.866, 0.0, -1.0, -1.0, 0.5, -1.0,-0.866, // d4- d5- d6- d7 down 65,66,67,68,
0.866, -1.0, -0.5, 1.0, -1.0, 0.0, 0.866, -1.0, 0.5, 0.5, -1.0, 0.866, // d8- d9- d10-d11 down 69,70,71,72,
0.0, 1.0, 0.5, // d12 down middle 73,
]);
var indices = new Uint8Array([ // Indices of the vertices
//0, 1,12, 1, 2,12, 2, 3,12, 3, 4,12, 4, 5,12, 5, 6,12, 6, 7,12, 7, 8,12, 8, 9,12, 9,10,12, 10,11,12, 11, 0,12, //top cap
13,14,15, 13,15,16,
17,18,19, 17,19,20,
21,22,23, 21,23,24,
25,26,27, 25,27,28,
29,30,31, 29,31,32,
33,34,35, 33,35,36,
37,38,39, 37,39,40,
41,42,43, 41,43,44,
45,46,47, 45,47,48,
49,50,51, 49,51,52,
53,54,55, 53,55,56,
57,58,59, 57,59,60,
//61,62,73, 62,63,73, 63,64,73, 64,65,73, 65,66,73, 66,67,73, 67,68,73, 68,69,73, 69,70,73, 70,71,73, 71,72,73, 72,61,73, //bottom cap
]);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: vertices,
indices,
});
function render(time) {
time *= 0.001;
gl.enable(gl.DEPTH_TEST);
gl.useProgram(programInfo.program);
let mat = m4.perspective(
60 * Math.PI / 180,
gl.canvas.clientWidth / gl.canvas.clientHeight,
0.1,
10);
mat = m4.translate(mat, [0, 0, -3]);
mat = m4.rotateX(mat, time);
mat = m4.rotateZ(mat, time);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, {
matrix: mat,
});
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>