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
Top Related