I have been struggling with depth while creating a 3D engine in pure JavaScript using the HTML Canvas. Before I begin, I have to say that I am fairly new when it comes to coding 3D, so if I should change the way I coded something in particular to fix the problem, please let me […]

Categories

## Depth Inaccuracies

- Post author By Full Stack
- Post date May 26, 2020
- No Comments on Depth Inaccuracies

- Tags "blue"); the console would show: [ 0: Array(12) 0: {point1: undefined, "gray"); createCube(-200, "green"); createCube(0, [{ color: 'blue' }, { color: 'green' }], {point1: 0, {point1: currentGameSpaceEdgesCount + 0, {point1: currentGameSpaceEdgesCount + 1, {point1: currentGameSpaceEdgesCount + 3, {point1: currentGameSpaceEdgesCount + 4, {point1: currentGameSpaceEdgesCount + 6, {startPoint: currentGameSpaceEdgesCount + 0, {startPoint: currentGameSpaceEdgesCount + 1, {startPoint: currentGameSpaceEdgesCount + 2, {startPoint: currentGameSpaceEdgesCount + 3, {startPoint: currentGameSpaceEdgesCount + 4, {startPoint: currentGameSpaceEdgesCount + 5, {startPoint: currentGameSpaceEdgesCount + 6, {startPoint: currentGameSpaceEdgesCount + 7, {x: -width + x, }; function getEdges() { for (var count = cubeCount * 12; count < gameSpace.edges.length; count++) { var edge = gameSpace.edges[count], //etc... ] //The cube matrix. ); However, //This is one cube. [], //This would be another cube created in the createCube function. ] The new matrices are formed by simply changing the createCube function's, 0, 100, 200, a, and then sorting it by the following: toRenderTriangles.sort(function(a, as I have looked at multiple sources that show how to use them. However, as I've heard that numerous times, as most of the time the objects looked correctly sorted based on their Z positions. However, at certain camera angles and heights, b) { return a.positionZ - b.positionZ; }); where toRenderTriangles is the matrix containing all the triangles that should be rendered to t, but I've been messing with this for a while and can't seem to get the other points for the other triangles. Sorry for all the confusion., color: '#FF0000', color: thisColor, Color.GRAY, D keys: Movement Move with right mouse down: Rotate camera If I need to elaborate on anything I will do so. Thanks! Update: What I am cur, depth, edges, endPoint: currentGameSpaceEdgesCount + 0}, endPoint: currentGameSpaceEdgesCount + 1}, endPoint: currentGameSpaceEdgesCount + 2}, endPoint: currentGameSpaceEdgesCount + 3}, endPoint: currentGameSpaceEdgesCount + 4}, endPoint: currentGameSpaceEdgesCount + 5}, endPoint: currentGameSpaceEdgesCount + 6}, endPoint: currentGameSpaceEdgesCount + 7}, endPoint: currentGameSpaceEdgesCount + 7} ); getEdges(); //Create triangles: gameSpace.triangles.push([ {point1: currentGameSpac, etc., height, however I am at a loss of how to implement it with the way I went about everything. Here is the link to my project: https://jsfiddle.net/Aus, I have been struggling with depth while creating a 3D engine in pure JavaScript using the HTML Canvas. Before I begin, I have to say that I am fairly new when it comes to coding 3D, I know that there is a solution to this other than what I have attempted. I have a fairly basic understanding of the depth/z-buffer, I plan to then sort the cubes with my sorting function rather than the triangles individually (if this is the wrong way to approach the sorti, I'm not sure how to implement it into my code (which will be linked near the bottom of this post). I know that it should be easy to incorpora, if I were to add more than one cube, it would show up just fine. The faces all appear in the right order, parent: "cube0"}, parent: "cube1"} 1: {point1: undefined, parent: "cube1"} 1: Array(12) 0: {point1: undefined, parent: "cube1"} 10: {point1: undefined, parent: "cube1"} 11: {point1: undefined, parent: "cube1"} 2: {point1: undefined, parent: "cube1"} 3: {point1: undefined, parent: "cube1"} 4: {point1: undefined, parent: "cube1"} 5: {point1: undefined, parent: "cube1"} 6: {point1: undefined, parent: "cube1"} 7: {point1: undefined, parent: "cube1"} 8: {point1: undefined, parent: "cube1"} 9: {point1: undefined, parent: "cube1"} I'm pretty sure I am just missing something that might be obvious, parent: "cube2"} 1: {point1: undefined, parent: "cube2"} 10: {point1: undefined, parent: "cube2"} 11: {point1: undefined, parent: "cube2"} 2: {point1: undefined, parent: "cube2"} 2: Array(12) 0: {point1: {…}, parent: "cube2"} 3: {point1: undefined, parent: "cube2"} 4: {point1: undefined, parent: "cube2"} 5: {point1: undefined, parent: "cube2"} 6: {point1: undefined, parent: "cube2"} 7: {point1: undefined, parent: "cube2"} 8: {point1: undefined, parent: "cube2"} 9: {point1: undefined, parent: "cube3"} ] //Note that each point with {...} should be returning an x, parent: "cube3"} 1: {point1: {…}, parent: "cube3"} 10: {point1: {…}, parent: "cube3"} 11: {point1: {…}, parent: "cube3"} 2: {point1: {…}, parent: "cube3"} 3: {point1: {…}, parent: "cube3"} 4: {point1: {…}, parent: "cube3"} 5: {point1: {…}, parent: "cube3"} 6: {point1: {…}, parent: "cube3"} 7: {point1: {…}, parent: "cube3"} 8: {point1: {…}, parent: "cube3"} 9: {point1: {…}, parent: newCubeId}, parent: newCubeId} ); var currentGameSpaceEdgesCount = gameSpace.vertices.length / (2 * cubeCount); //Create edges: gameSpace.edges, parent: newCubeId} ]); getTriangles(); } createCube(200, please let me know what I should be doing instead). With that being said, please let me know. You also may be wondering why I am not using any libraries to help me out. The answer is simply because I want a better u, point2, point2: 1, point2: 3, point2: currentGameSpaceEdgesCount + 0, point2: currentGameSpaceEdgesCount + 1, point2: currentGameSpaceEdgesCount + 2, point2: currentGameSpaceEdgesCount + 3, point2: currentGameSpaceEdgesCount + 5, point2: currentGameSpaceEdgesCount + 7, point2: undefined, point3: {…}, point3: 0, point3: 2, point3: currentGameSpaceEdgesCount + 0, point3: currentGameSpaceEdgesCount + 1, point3: currentGameSpaceEdgesCount + 2, point3: currentGameSpaceEdgesCount + 3, point3: currentGameSpaceEdgesCount + 4, point3: currentGameSpaceEdgesCount + 6, point3: undefined, removing the error of the backside of the cube being visible when it shouldn't be. However, s, so if I should change the way I coded something in particular to fix the problem, the only triangles that get a value for the points are under the last cube matrix, the same problem still emerges: With more than two cubes: It seems to occur the most through the top and bottom triangles of the cubes. No, this is where the problems occur. Depending on what seems to be certain camera angles, this only somewhat solved the problem, thisColor) { cubeCount = cubeCount + 1; var newCubeId = "cube" + cubeCount; //Create vertices: gameSpace.vertices.push( {x: wid, triangles, what I am currently doing to sort the triangles into new cube matrices is the following: //Is contained within gameSpace: triangles: [ [, when I go to start the getTriangles function, which defines the triangle points, which should always result in the triangles being drawn at the correct depth. However, while the other triangles remain undefined. Here is the source of the problem being described: //Contains all objects stored in the gameSpac, width, y, y = 100, y: height + y, you can still see the face of one cube which is supposed to be behind the cube in front of it. What I have tried to do to solve this problem, z, z value along with the parent (cube) name. //Example: {x: 100, z: -100, z: depth + z