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.

Dual quaternions are especially advantageous for skinning, 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 are combined automatically into “texture atlases”.

This optimization heavily reduces draw calls by merging thousands of draw calls into a single one as long as they share the same shader.

Compressed Textures and Texture Streaming 

By using compressed texture formats on the GPU, Wonderland Engine uses GPU memory more efficiently. The same amount of GPU memory can hold more textures and texture resolution in the scene can be higher.

On top of that, our Texture Streaming feature swaps pieces of textures in and out of memory based on what is visible to the camera. This enables use of high resolution textures even on memory constrained environments.

WebAssembly 

WebAssembly gives Wonderland Engine more control over memory usage and increased performance over JavaScript. Computation-heavy features, e.g., computing scene graph transformations or memory-intensive features like batching can be implemented way more efficiently.

WebAssembly SIMD 

SIMD instructions in WebAssembly allow processing multiple pieces of data in a single instruction. This speeds up vector math dramatically.

WebAssembly SIMD is supported on all major browsers since March 2023.

Data oriented design 

Wonderland Engine’s scene graph and component system, as well as other parts of the code base, follow Data Oriented Design (DOD). 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 (“transcoded”) 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 footprint of dependencies low, as the runtime is one of the first things to be downloaded.

Our WebAssembly runtime is currently ~580 kB gzipped and is continuously reduced further.