JSFiddle - React, Tailwind, and code Playground

by XGundam05

HTML

<div>
    <strong>NOTES:</strong><br/>To generate single-pass Ambient occlusion, all that is necessary is
    to generate the single surrounding layer of voxels for the given chunk.
    This doesn't take into account actual lighting calculations, which would require
    the full data from the surrounding chunks.
</div>

CSS

div{
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    font-size: 11pt;
}

JavaScript

function VoxelChunk(noise, x, y, z, width, height, depth){
    this.noise = noise;
    
    this.xOffset = x;
    this.yOffset = y;
    this.zOffset = z;
    
    this.width = width;
    this.height = height;
    this.depth = depth;
    
    this.voxels = new Array(width * height * depth);
}

VoxelChunk.prototype.CreateChunk = function(){
    var wDiv = 1 / 128;
    var hDiv = 1 / 128;
    var dDiv = 1 / 128;
    
    // Use the offsets to generate the correct terrain for the chunk
    for(var z = this.zOffset; z < this.depth + this.zOffset; z++){
        for(var y = this.yOffset; y < this.height + this.yOffset; y++){
            for(var x = this.xOffset; x < this.width + this.xOffset; x++){
                var density = 64 * this.noise.Noise(4 * x * wDiv, 4 * z * dDiv, y * hDiv) +
                              32 * this.noise.Noise(8 * x * wDiv, 8 * z * dDiv, y * hDiv) +
                              16 * this.noise.Noise(16 * x * wDiv, 16 * z * dDiv, y * hDiv) +
                              8 * this.noise.Noise(32 * x * wDiv, 32 * z * dDiv, y * hDiv) +
                              4 * this.noise.Noise(64 * x * wDiv, 64 * z * dDiv, y * hDiv) +
                              2 * this.noise.Noise(128 * x * wDiv, 128 * z * dDiv, y * hDiv);
                density += y * hDiv * 6;
                density += -1 * (y - 32);
                
                if(density >= 0)
                    this.voxels[(x - this.xOffset) +
                                ((y - this.yOffset) * this.width) +
                                ((z - this.zOffset) * this.width * this.height)] = 0x01;
                else
                    this.voxels[(x - this.xOffset) +
                                ((y - this.yOffset) * this.width) +
                                ((z - this.zOffset) * this.width * this.height)] = 0x00;
            }
        }
    }
};

VoxelChunk.prototype.CreateGeometry = function(){
    var geometry = new Geometry();
    
    // Don't use offsets, we can use the...