On the Care and Feeding of HTML Voxels
(best in Chrome! Slides thataway → )
Using this presentation:
Q, middle mouse
(mobile users: sorry lol)
free gamedev, sometime Adobe evangelist
Voxels - definition
Ever seen Minecraft?
Voxels - proper definition
Colloquially, if pixels represent
the rasterization of 2D data,
voxels are the 3D equivalent.
(Hence "voxel": volumetric pixel)
Conceptually, voxels are a sampling over some 3D space,
just as pixels in a bitmap are samples of
some 2D data (vector graphics, photos, etc).
(Note: click this block for the
amazing webGL demo
I stole that image from)
Note: nothing (per se) to do with gaming!
(CT scan data)
Voxels and Gaming
(Click: list of games with voxels)
Provides game with easily grasped structure -
Equivalent to grids in 2D games
Conceptually easy to work with
- Technical tradeoffs (e.g. CPU vs memory)
largely similar to vectors/bitmaps
- Some hard things become easy
(raycasting, collision tests..)
- (Of course some easy things become hard..)
Mutable worlds for free! (ish)
(click: anywhere but here, yo)
World-affecting game rules
c.f. "Emergent gameplay"
"3" to place a Conway Block
"4" to stop/start simulation
Note: not just for rendering!
Voxels are often useful behind the scenes
regardless of how a game looks
(e.g. for physics simulation).
Conceptually: 3D games should use voxels wherever
a 2D game would use a grid.
In general a conversion step ("meshing")
is necessary to convert voxels into
stuff that GPUs understand
(vertex lists, normals, etc).
Here are three approaches:
(click: mrdoob's voxel demo)
Create one cubic mesh per voxel
Problems: poly counts, draw calls
Merge voxels into one large mesh,
omitting faces between adjacent voxels.
Result: fewer draw calls, still a lot of polys
Scan across voxel slices, merging faces of
adjacent voxels (of the same value).
Credit: all-around genius
(click: algo explanation + live demo)
Necessary tradeoff for large worlds:
faster meshing, more draw calls.
Minecraft chunks: 16x16x256 (divided vertically)
This demo: arbitrary (32x32x32 at the moment)
Comparatively simple for voxels,
and greatly improves visuals
(Click: toggle AO in this demo)
Note: Voxels needn't be blocks!
(click: it's beautiful)
CT scan data
(google "marching squares")
Driven deterministically by
noise (Perlin, simplex) and hashing.
In this demo:
2D noise: height map
3D noise: clouds
Hashing: tree/flower placement
(click: my homemade n-dimensional hash!)
Other world algorithms
Many voxel algos extend naturally from
2D cases (often heavily researched).
- Collision tests: simple grid check
- Raycasting: equivalent to line rasterization (e.g. Bresenham)
- Physics: had to roll my own, but easier than 3D
noa (this engine)
And how I built it
node | npm | browserify | beefy
Why roll a new engine?
I started trying to use
Tons of great code
Renders on bare metal
- Reuse code from voxel.js where feasible
- Otherwise written from scratch
(physics, rendering, controls, AO..)
- Babylon.js for rendering (click)
State of the project
- Works(?), performant(?)
- No docs, all APIs in flux
- Features: see testbed app (click)
- Collaboration welcome, drop me a mail/issue/etc
Thoughts after 5 months of this:
- Gamedev on HTML/webGL is fun if you can choose your browser
- JS a fun dev platform if you use npm well and modularize responsibly
- Chrome/v8 is really fast, yo
- Mobile: what's that? Is it tasty?