Nebula3 Web Demos

These are Nebula3 engine demos using emscripten and PNaCl.

NOTE: Demos don’t seem to work in Firefox 28 because the framebuffer completeness fails. This seems to be fixed in current Firefox Nightly.

The emscripten demos are compiled to asm.js and should run on any browser with proper WebGL support, with Firefox and Chrome being the best options.

The PNaCl demos will only run in a somewhat uptodate Google Chrome version.

All assets used by courtesy of Drakensang Online, the game I’m working on during day time.

Here’s some annotated highlevel source code if you want to understand what’s going on in those demos: Source Code.


Renders a lot of dragons (add more dragons with the cursor up key). Tests Javascript and WebGL draw call performance. Animations and joint skeletons are evaluated in Javascript indidually for each dragon. One dragon needs 2 uniform updates and 1 draw-call per geometry pass, the character model has 54 joints and 3.1k triangles. At 961 dragons, this means: 52k joints animated and evaluated, ~6 million triangles rendered, and 1922 draw calls.

cursor up: more dragons
cursor down: less dragons
space: reset camera

Drakensang Online Map Viewer

This is the map rendering code from the Drakensang Online client with correct realtime lighting and a few animated characters thrown in, plus collision test. Move the player ghoul around by clicking or holding the left mouse button. The demo tests mainly WebGL performance, there are about 3k WebGL calls per frame.

Move around with left-mouse-button.

Drakensang Online Character Model Viewer

Display a selection of Drakensang Online character models and animations.

cursor up: next character
cursor down: previous character
cursor left: next animation
cursor right: next skin

Instancing Test

This tests the fake instance-rendering I implemented for platforms without hardware instancing support. This uses “unrolled” vertex- and index-buffers, and a vertex shader matrix palette with instance transforms. Currently renders up to 64 instances in a single draw-call (limited by number of vertex uniforms, which is 254 in ANGLE). Position and orientation of each cube instance is computed in JS (a conversion from polar to cartesian space, and a matrix-lookat).

cursor up: more cubes
cursor down: less cubes
space: DISCO!

Text Rendering Test

This demonstrates Nebula3’s distance field text renderer.