The document discusses the Turbulenz game engine for developing high performance WebGL games. It provides an overview of the Turbulenz gaming platform and publishing platform as well as the game engine itself. It then covers considerations for CPU and GPU performance optimization when using the engine. Specific APIs and components of the engine are described including the 2D and 3D rendering APIs and scene graph functionality.

1. High performance WebGL games
with the Turbulenz Engine
Ian Ballantyne, Turbulenz
@ianballantyne
(Printer Friendly Version)

2. About Turbulenz
HTML5 Game Development
● Gaming Platform
(turbulenz.com)
● Publishing Platform
(hub.turbulenz.com)
● Game Engine
(github.com/turbulenz/turbulenz_engine)
● Game Studio
(wonderstruckgames.com)

3. Example Games

4. 2D Rendering Example

5. 3D Rendering Example

6. CPU Performance Considerations
● Efficient storage
○ ArrayBuffers, TypedArrays
● Garbage collection
○ De-referencing, object reuse
● Execution speed
○ Locally cache properties, explicit inlining
● Use the browser dev tools
○ Profiling, Heap snapshots, Timelines

7. GPU Performance Considerations
● Batching draw calls
● Reduce state changes
○ Shader techniques
○ Technique parameters
○ Textures
● Texture compression

8. Turbulenz Engine APIs
● Created with performance in mind
● Structured to help avoid common issues
● Balances flexibility with performance

9. Performance APIs to start with
General
● MathDevice
2D Rendering
● Draw2D
3D Rendering
● GraphicsDevice
● A renderer
● Scene

10. Draw2D
●
●
●
●
Sprite-based 2D drawing API
Embedded shader to render to WebGL
Based around batching
Choice of three dispatch methods:
○ draw - Draw from object representation
○ drawSprite - Draw pre-constructed sprite
○ drawRaw - Draw buffered data
● Flexible API <-> Efficient Rendering

11. Scene
● Hierarchy of nodes containing:
○ Lights, Geometry
● Turbulenz scene format (JSON):
○ Can include Physics, Effects, Materials, Animations
● Convert from Collada (dae2json)
● Optimized for visibility
○ Optimized queries for dynamic/static objects
○ Different spatial maps (AABB tree, Grid)

12. Rendering System
● Renderer Types:
e.g. default, forward, deferred
● Supports a range of effects:
e.g. blinn, phong, skybox, glass, normalmap
● Renders in passes:
e.g. opaque, decal, transparent
● Modify/create your own

13. Next Steps
● Physics (2D/3D)
● Audio
○ SoundDevice: HTML5 Audio, Web Audio API
● Networking
○ NetworkDevice: Websockets API
● Online Services
○ Userdata, MultiplayerSesson, Leaderboards, Store

14. Getting the Turbulenz Engine
● Turbulenz Engine (SDK)
● hub.turbulenz.com
● Packaged tools for developing HTML5
games
● Examples, API docs, guides

15. Getting the Turbulenz Engine
Turbulenz Engine (Open Source)
github.com/turbulenz/turbulenz_engine
Setup guide in the README.rst
An Introduction to the Turbulenz Engine
(http://youtu.be/O5wgSe77k2I)
● docs.turbulenz.com
●
●
●
●

16. Questions
Samples:
● biz.turbulenz.com/samples
Developers (SDK):
● hub.turbulenz.com
Open Source:
● github.com/turbulenz/turbulenz_engine
Docs:
● docs.turbulenz.com