0
High performance WebGL games
with the Turbulenz Engine
Ian Ballantyne, Turbulenz
@ianballantyne
(Printer Friendly Version)
About Turbulenz
HTML5 Game Development
● Gaming Platform
(turbulenz.com)
● Publishing Platform
(hub.turbulenz.com)
● Game ...
Example Games
2D Rendering Example
3D Rendering Example
CPU Performance Considerations
● Efficient storage
○ ArrayBuffers, TypedArrays

● Garbage collection
○ De-referencing, obj...
GPU Performance Considerations
● Batching draw calls
● Reduce state changes
○ Shader techniques
○ Technique parameters
○ T...
Turbulenz Engine APIs
● Created with performance in mind
● Structured to help avoid common issues
● Balances flexibility w...
Performance APIs to start with
General
● MathDevice

2D Rendering
● Draw2D

3D Rendering
● GraphicsDevice
● A renderer
● S...
Draw2D
●
●
●
●

Sprite-based 2D drawing API
Embedded shader to render to WebGL
Based around batching
Choice of three dispa...
Scene
● Hierarchy of nodes containing:
○ Lights, Geometry

● Turbulenz scene format (JSON):
○ Can include Physics, Effects...
Rendering System
● Renderer Types:
e.g. default, forward, deferred

● Supports a range of effects:
e.g. blinn, phong, skyb...
Next Steps
● Physics (2D/3D)
● Audio
○ SoundDevice: HTML5 Audio, Web Audio API

● Networking
○ NetworkDevice: Websockets A...
Getting the Turbulenz Engine
● Turbulenz Engine (SDK)
● hub.turbulenz.com
● Packaged tools for developing HTML5
games
● Ex...
Getting the Turbulenz Engine
Turbulenz Engine (Open Source)
github.com/turbulenz/turbulenz_engine
Setup guide in the READM...
Questions
Samples:
● biz.turbulenz.com/samples

Developers (SDK):
● hub.turbulenz.com

Open Source:
● github.com/turbulenz...
Upcoming SlideShare
Loading in...5
×

WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne

448

Published on

Presentation WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne, at the AMD Developer Summit (APU13) November 11-13, 2013.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
448
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "WT-4067, High performance WebGL games with the Turbulenz Engine, by Ian Ballantyne"

  1. 1. High performance WebGL games with the Turbulenz Engine Ian Ballantyne, Turbulenz @ianballantyne (Printer Friendly Version)
  2. 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. 3. Example Games
  4. 4. 2D Rendering Example
  5. 5. 3D Rendering Example
  6. 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. 7. GPU Performance Considerations ● Batching draw calls ● Reduce state changes ○ Shader techniques ○ Technique parameters ○ Textures ● Texture compression
  8. 8. Turbulenz Engine APIs ● Created with performance in mind ● Structured to help avoid common issues ● Balances flexibility with performance
  9. 9. Performance APIs to start with General ● MathDevice 2D Rendering ● Draw2D 3D Rendering ● GraphicsDevice ● A renderer ● Scene
  10. 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. 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. 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. 13. Next Steps ● Physics (2D/3D) ● Audio ○ SoundDevice: HTML5 Audio, Web Audio API ● Networking ○ NetworkDevice: Websockets API ● Online Services ○ Userdata, MultiplayerSesson, Leaderboards, Store
  14. 14. Getting the Turbulenz Engine ● Turbulenz Engine (SDK) ● hub.turbulenz.com ● Packaged tools for developing HTML5 games ● Examples, API docs, guides
  15. 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. 16. Questions Samples: ● biz.turbulenz.com/samples Developers (SDK): ● hub.turbulenz.com Open Source: ● github.com/turbulenz/turbulenz_engine Docs: ● docs.turbulenz.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×