1
\$\begingroup\$

I am working on a voxel engine and have just started learning webgl. I have generated a list of Vertices and Indices by using Array.concat() on a template array and adding a value based on my position in loop.

var verticesTemplate = [
    // Front face
    -0.5, -0.5,  0.5,
     0.5, -0.5,  0.5,
     0.5,  0.5,  0.5,
    -0.5,  0.5,  0.5,

    // Top face
    -0.5,  0.5, -0.5,
    -0.5,  0.5,  0.5,
     0.5,  0.5,  0.5,
     0.5,  0.5, -0.5,

    // Right face
    0.5, -0.5, -0.5,
    0.5,  0.5, -0.5,
    0.5,  0.5,  0.5,
    0.5, -0.5,  0.5,

    // Bottom face
    -0.5, -0.5, -0.5,
     0.5, -0.5, -0.5,
     0.5, -0.5,  0.5,
    -0.5, -0.5,  0.5,

    // Left face
    -0.5, -0.5, -0.5,
    -0.5, -0.5,  0.5,
    -0.5,  0.5,  0.5,
    -0.5,  0.5, -0.5,

    // Back face
    -0.5, -0.5, -0.5,
    -0.5,  0.5, -0.5,
     0.5,  0.5, -0.5,
     0.5, -0.5, -0.5,
];
var indicesTemplate = [
    0, 1, 2,      0, 2, 3,    // Front face
    4, 5, 6,      4, 6, 7,    // Back face
    8, 9, 10,     8, 10, 11,  // Top face
    12, 13, 14,   12, 14, 15, // Bottom face
    16, 17, 18,   16, 18, 19, // Right face
    20, 21, 22,   20, 22, 23  // Left face
];
var WorldVertices = [];
var WorldIndices = [];
var IndexLoopIndex = 0;

function generateMeshData() {
    for(var x = 0; x < 4; x++) {
        var blockVertices = [].concat(verticesTemplate);
        addToX(verticesTemplate, blockVertices, x);
        for(var y = 0; y < 4; y++) {
            addToY(verticesTemplate, blockVertices, y);
            for(var z = 0; z < 4; z++) {
                var block = blocks[x][y][z];
                if(block.isActive === true) {
                    // adds a value of 1(The blockSize) to all z coordinates in verticesTemplate and adds to end of WorldVertices
                    addToZ(verticesTemplate, blockVertices, z);
                    WorldVertices = WorldVertices.concat(blockVertices);

                    var indices = [].concat(indicesTemplate);
                    addToXYZ(indicesTemplate, indices, 24*IndexLoopIndex);
                    WorldIndices = WorldIndices.concat(indices);
                    IndexLoopIndex++;
                }
            }
        }
    }
}

enter image description here

enter image description here

The problem is that the triangles are skewed after the mesh is rendered using gl.drawElements. And I can't figure out why. So how can I keep triangles from being drawn that connect cubes?

\$\endgroup\$
1
\$\begingroup\$

I figured it out. In the end I just wrote 3 functions: CreateCube, addVertex and addTriangle. Here they are.

function addVertex(vertexArray) {
    WorldVertices = WorldVertices.concat(vertexArray);

    // returns a vertexId that is used to map triangles to vertices array
    return (WorldVertices.length/3)-1;
}

function addTriangle(vertexIdArray) {
    WorldIndices = WorldIndices.concat(vertexIdArray);
}

function CreateCube(x, y, z, block) {
    // 8 points on a cube are extracted using coordinates from for-loop
    var p0 = vec3.fromValues(x-1, y-1, z+1);
    var p1 = vec3.fromValues(x+1, y-1, z+1);
    var p2 = vec3.fromValues(x+1, y+1, z+1);
    var p3 = vec3.fromValues(x-1, y+1, z+1);
    var p4 = vec3.fromValues(x+1, y-1, z-1);
    var p5 = vec3.fromValues(x-1, y-1, z-1);
    var p6 = vec3.fromValues(x-1, y+1, z-1);
    var p7 = vec3.fromValues(x+1, y+1, z-1);

    // vertexIds
    var v0, v1, v3, v4, v5, v6, v7;

    v0 = addVertex(Array.from(p0));
    v1 = addVertex(Array.from(p1));
    v2 = addVertex(Array.from(p2));
    v3 = addVertex(Array.from(p3));

    addTriangle([v0, v1, v2]);
    addTriangle([v0, v2, v3]);

    v4 = addVertex(Array.from(p4));
    v5 = addVertex(Array.from(p5));
    v6 = addVertex(Array.from(p6));
    v7 = addVertex(Array.from(p7));

    addTriangle([ v4, v5, v6]);
    addTriangle([ v4, v6, v7]);

    // Right

    v1 = addVertex(Array.from(p1));
    v4 = addVertex(Array.from(p4));
    v7 = addVertex(Array.from(p7));
    v2 = addVertex(Array.from(p2));

    addTriangle([ v1, v4, v7]);
    addTriangle([ v1, v7, v2]);

    // left

    v5 = addVertex(Array.from(p5));
    v0 = addVertex(Array.from(p0));
    v3 = addVertex(Array.from(p3));
    v6 = addVertex(Array.from(p6));

    addTriangle([ v5, v0, v3]);
    addTriangle([ v5, v3, v6]);

    // Top

    v3 = addVertex(Array.from(p3));
    v2 = addVertex(Array.from(p2));
    v7 = addVertex(Array.from(p7));
    v6 = addVertex(Array.from(p6));

    addTriangle([ v3, v2, v7]);
    addTriangle([ v3, v7, v6]);

    // Bottom

    v5 = addVertex(Array.from(p5));
    v4 = addVertex(Array.from(p4));
    v1 = addVertex(Array.from(p1));
    v0 = addVertex(Array.from(p0));

    addTriangle([v5, v4, v1]);
    addTriangle([v5, v1, v0]);
}

for(var x = -8; x < 4; x++) {
    for(var y = -8; y < 4; y++) {
        for(var z = -8; z < 4; z++) {
            var block = blocks[x][y][z];
            if(block.isActive === false)
                continue;

            // 2 is the blockSize  
            CreateCube(x*2, y*2, z*2, block);
        }
    }
}

enter image description here

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.