About Me

Jonas Wagner

local.ch / Zurich / Switzerland

29a.ch / @29a_ch

box2d2.js

Voxel

A voxel (volumetric pixel or Volumetric Picture Element) is a volume element, representing a value on a regular grid in three dimensional space.

Minecraft

Examples

Comanche 1992

MINER WARS 2081

Castle Story

Why Voxels?

Because they're cool!

Because they're easy!

Doing 3D is hard.

Playing with bricks is easy!

Voxatron

Rendering Voxels

Voxel Painter

world.add(new Cube(...));
world.add(new Cube(...));
world.add(new Cube(...));
world.add(new Cube(...));
                    

The Problem

• Batch count limit
• Battlefield 3 - 2'500 Batches
• Bigger overhead on WebGL.
• Need to stay bellow 1000.

http://htwins.net/scale2/

Chunks

• Blocks of voxels
• Stored in a Typed Array
• 32x32x32 works well for rendering
• Can be meshed in ~5-10 ms

Meshing

// the naive way
for voxel in chunk
    if voxel != empty
        for side of voxel
            triangles.add(side)

// the smarter way
for voxel in chunk
    if voxel != empty
        for side of voxel
            // check sides!
            if voxel on that side is empty:
                vertices.add(side)

More Meshing

• Smooth Surfaces
  • Marching Cubes
  • Transvoxel
• Lots of stuff on 0fps.wordpress.com

Web Workers

• Move meshing into a worker
• postMessage is slower than meshing
• without transferable objects

Generating Worlds

in less than seven days.

Perlin Noise

Please stand back I'm going to attempt,

Live Coding

simplex-noise.js

https://github.com/jwagner/simplex-noise.js

Generating a world

var random = new Alea(seed),
    simplex = new SimplexNoise(random);
voxel.init_world(world, function(x, y, z) {
    var density = simplex.noise3D(x/32, y/32, z/32)-y/15;
    if(density > -0.75){
        return 3;
    }
    if(density > -0.92){
        return 2;
    }
    if(density > -1.0){
        return 1;
    }
    return 0;
});
                    

THE Book

Physics

Player Shape

• Sphere

Player Shape

• Sphere
• Box
• border-radius!
• Box + border-radius = Capsule

Capsule

In code

function clipSegmentSegment(a0, a1, b0, b1){
    // before
    if(b1 < a0) {
        return a0-b1;
    }
    if(b0 > a1){
        return a1-b0;
    }
    return 0.0;
}
function clipSegmentPoint(a0, a1, b0){
    if(b0 < a0) return a0-b0;
    if(b0 > a1) return a1-b0;
    return 0.0;
}
                   

In code

var xd = clipSegmentPoint(aabb.x0, aabb.x1, this.x),
    yd = clipSegmentSegment(aabb.y0, aabb.y1, this.y0, this.y1),
    zd = clipSegmentPoint(aabb.z0, aabb.z1, this.z),
    d2 = xd*xd + yd*yd + zd*zd;

if(d2 >= this.radius * this.radius){
    return null;
}

var d = Math.sqrt(d2),
    penetration = this.radius-d,
    resolution = vec3.create([-xd/d*penetration,
        -yd/d*penetration,
        -zd/d*penetration]),
                   

for comparison