Incorrect vertices in 3d cylinder
Right now, I'm trying to draw a 3d cylinder shape in webgl, where the top is thinner than the bottom. The cylinder is also uncapped. The cylinder is drawn using triangles for the sides, with a dodecagon (12 sides) as the circle. However, one of my sides seems to have its triangle pointing the wrong way.
I left it as a hyperlink to imgur because I have multiple pictures of the situation.
These are my hardcoded vertices and indices. There are a bunch unused, because those were for the top and bottom cap, which I found out later that I didn't need, and I decided it would be easier to comment them out than to delete them.
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
]);
Solution
This line
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,
has a -1.0 where it should have a 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,
I found it by bisecting, first commenting out the 2nd half of the 8 vertices, the issue was still there, so I commented out the 2nd half of the remaining 4, the issue was still there, so I commented out the 2nd half of the remaning 2, and the issue was still there so then I looked at the first 2 triangles and saw the issue.
It's pretty clear in your formatting that there's a pattern not being followed
One of these things is not like the other
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>- Clear clipboard to prohibit unauthorised copying, insert message?
- Supplying a reason for AbortController?
- Can you render a html file into a container?
- Using performance.mark() with Chrome dev tools performance tab
- How to save javascript array as redis list
- Find out whether Chrome console is open
- How to wait for requests and validate responses using playwright?
- Show Bootstrap Alert on Button Click via Javascript / jQuery
- How to post a file from a form with Axios
- Why doesn't Javascript handle divide by zero error in a try catch
- how can I add menu button in telegram bot
- Debounce in ReactJS
- Javascript question mark operator, multiple question marks
- Could not find a declaration file for module '@hookform/resolvers/zod'
- Stripe CLI trigger subscription failed event for a specifc customer
- Steps to send a https request to a rest service in Node js
- react jest confirming snapshot change
- Getting a list of all countries to using npm countries-list
- How do you limit the number of options selected in an HTML <select> element?
- Different sorting
- add an event listener on an element I've created in javascript
- Web Component not rendering when loaded from UNPKG CDN?
- Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../"
- Javascript Date - set just the date, ignoring time?
- Form validate() method is not working with Vue 3 and Vuetify 3
- Running V8 Javascript Engine Standalone
- PHP - Extract frame during Video upload
- Can a PWA app be published to app store and play store
- How to check if a caught exception was thrown because of triggering an AbortController?
- Apollo Client: retrieving the results from a query with errors