wt-4067, high performance webgl games with the turbulenz engine, by ian ballantyne
DESCRIPTION
Presentation WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne, at the AMD Developer Summit (APU13) November 11-13, 2013.TRANSCRIPT
![Page 1: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/1.jpg)
High performance WebGL games with the Turbulenz Engine
Ian Ballantyne, Turbulenz@ianballantyne
(Printer Friendly Version)
![Page 2: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/2.jpg)
About TurbulenzHTML5 Game Development● Gaming Platform
(turbulenz.com)● Publishing Platform
(hub.turbulenz.com)● Game Engine
(github.com/turbulenz/turbulenz_engine)● Game Studio
(wonderstruckgames.com)
![Page 3: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/3.jpg)
Example Games
![Page 4: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/4.jpg)
2D Rendering Example
![Page 5: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/5.jpg)
3D Rendering Example
![Page 6: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/6.jpg)
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
![Page 7: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/7.jpg)
GPU Performance Considerations
● Batching draw calls● Reduce state changes
○ Shader techniques○ Technique parameters○ Textures
● Texture compression
![Page 8: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/8.jpg)
Turbulenz Engine APIs
● Created with performance in mind● Structured to help avoid common issues● Balances flexibility with performance
![Page 9: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/9.jpg)
Performance APIs to start with
General● MathDevice
2D Rendering● Draw2D
3D Rendering● GraphicsDevice● A renderer● Scene
![Page 10: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/10.jpg)
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
![Page 11: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/11.jpg)
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)
![Page 12: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/12.jpg)
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
![Page 13: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/13.jpg)
Next Steps
● Physics (2D/3D)● Audio
○ SoundDevice: HTML5 Audio, Web Audio API
● Networking○ NetworkDevice: Websockets API
● Online Services○ Userdata, MultiplayerSesson, Leaderboards, Store
![Page 14: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/14.jpg)
Getting the Turbulenz Engine
● Turbulenz Engine (SDK)● hub.turbulenz.com● Packaged tools for developing HTML5
games● Examples, API docs, guides
![Page 15: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/15.jpg)
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
![Page 16: WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne](https://reader033.vdocuments.site/reader033/viewer/2022052600/55804785d8b42ae32c8b4c12/html5/thumbnails/16.jpg)
QuestionsSamples:● biz.turbulenz.com/samples
Developers (SDK):● hub.turbulenz.com
Open Source:● github.com/turbulenz/turbulenz_engine
Docs:● docs.turbulenz.com