High performance WebGL games with the Turbulenz Engine

Ian Ballantyne, Turbulenz@ianballantyne

(Printer Friendly Version)

About TurbulenzHTML5 Game Development● Gaming Platform

(turbulenz.com)● Publishing Platform

(hub.turbulenz.com)● Game Engine

(github.com/turbulenz/turbulenz_engine)● Game Studio

(wonderstruckgames.com)

Example Games

2D Rendering Example

3D Rendering Example

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

GPU Performance Considerations

● Batching draw calls● Reduce state changes

○ Shader techniques○ Technique parameters○ Textures

● Texture compression

Turbulenz Engine APIs

● Created with performance in mind● Structured to help avoid common issues● Balances flexibility with performance

Performance APIs to start with

General● MathDevice

2D Rendering● Draw2D

3D Rendering● GraphicsDevice● A renderer● Scene

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

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)

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

Next Steps

● Physics (2D/3D)● Audio

○ SoundDevice: HTML5 Audio, Web Audio API

● Networking○ NetworkDevice: Websockets API

● Online Services○ Userdata, MultiplayerSesson, Leaderboards, Store

Getting the Turbulenz Engine

● Turbulenz Engine (SDK)● hub.turbulenz.com● Packaged tools for developing HTML5

games● Examples, API docs, guides

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

QuestionsSamples:● biz.turbulenz.com/samples

Developers (SDK):● hub.turbulenz.com

Open Source:● github.com/turbulenz/turbulenz_engine

Docs:● docs.turbulenz.com