Wonderland Engine's Optimizations

To allow more complex applications and scenes in your WebXR app, Wonderland Engine implements various optimizations. Find a non-exhaustive list below:

Rendering performance 

Optimizations that target faster frame rendering.

Dual Quaternion Scene Graph 

While conventional scene graphs are implemented using matrices, Wonderland Engine’s scene graph uses dual quaternions.

Dual quaternions require only half the amount of memory of a 4x4 matrix and require less operations to concatenate.

As dual quaternions only represent rotation and translation, we augment them with a separate scaling vector.

For skinning, dual quaternions are especially advantageous, as they preserve volume better than other methods. With the scene graph, this integrates nicely.

Runtime Batching 

Wonderland Engine joins meshes together at runtime to allow multiple meshes to be drawn with a single draw call. As each mesh usually uses different materials, we have special shaders that are able to use a list of materials to draw parts of the batch in different ways.

Textures need to be batched as well. This process is called “texture atlassing”.

This optimization heavily reduces draw calls, as thousands of draw calls can be merged into a single one as long as they all share the same shader.

Compressed Textures 

Using compressed GPU formats, the GPU storage can be used more efficiently. This way the same amount of GPU memory can hold more textures and texture resolution in the scene can be higher.

WebAssembly 

As a WebAssembly 3D engine, Wonderland Engine has more control over memory usage and increased performance over JavaScript. Computation-heavy features like computing scene graph transformations or memory-intensive features like batching can hereby implemented way more efficiently.

WebAssembly SIMD 

SIMD instructions in WebAssembly allow processing multiple pieces of data in a single instruction. This can especially speed up vector math.

While WebAssembly SIMD is not yet generally supported in Browsers (most require setting a flag to enable support), Wonderland Engine is ready for it.

Data Oriented Design 

Wonderland Engine’s scene graph and component system, as well as other parts of the code base, are designed through Data Oriented Design. DOD is a way to write code such that data is processed more efficiently by the CPU by improving cache usage and helping predictive code execution.

Loading time 

Optimizations that target faster loading.

Binary scene format 

As parsing text (e.g. from gltf or obj files) into binary for WebGL is already done in the editor, the data is passed to the runtime in a binary format directly.

This binary data is laid out in a way such that minimal effort is required by the runtime to use it for rendering.

It also allows us to do Quantization on e.g. the mesh data: some mesh properties can be stored with less bits per vertex, if their value range is known.

Basis Universal image compression 

Compressed Texture format support is different per device. With Basis Universal, we can compress images to a single format that can then be converted (“transcribed”) into device specific compressed GPU texture formats.

Animation compression 

We use Quantization and remove redundant keyframes to reduce size of animations.

Runtime size 

We pay special attention to keep our WebAssembly binary size small and keep the amount of dependencies low, as the runtime is one of the first things to be downloaded.

Our WebAssembly runtime is currently around 1.3 MB and will even be reduced further eventually.