Voxels in V8
View in desktop Chrome!
Slides thataway! →
Using this presentation:
Q, middle mouse
(mobile users: sorry lol)
free gamedev, sometime technical 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
(then place a block to trigger meshing)
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
"Is [HTML/JS] really [ready/fast enough] for gaming yet?"
My thoughts after 5 months:
Mainly depends on how broad your scope is
- Targeting one version of one browser makes for an easy life ;)
- Modern JS is a solid dev platform, if you modularize responsibly
- The more you use the DOM, the more performance will vary across browsers
- Mobile: what's that? Does it taste good?
Performance in V8
- V8 is very fast, but temperamental
- Getting great performance is still ~50% black magic
Key takeaway #1:
- Don't waste time guessing what will perform well in V8 - it can't be done
- Master the dev tools instead
Key takeaway #2:
- Deopts murder performance!
- They can occur unpredictably, and for bizarre reasons.
- When all else fails:
chrome --js-flags = "--trace-deopt"