3D圆柱体中的顶点不正确
现在，我正在尝试在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
]);
1 个答案:
答案 0 :(得分：0)
此行
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个顶点的第二个一半，问题仍然存在，所以我注释了第二个还剩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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？