Presentation WT-4066, The Making of Turbulenz’ Polycraft WebGL Benchmark, by Ian Ballantyne at the AMD Developer Summit (APU13) November 11-13, 2013.

1. The Making of Turbulenz’
WebGL Benchmark
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. Building a WebGL benchmark

5. WebGL capable devices

6. WebGL capable browsers

7. HTML5 Game Engines utilizing WebGL

8. Benchmark Demo

9. Project Goals
●
●
●
●
●
Run a real-world WebGL game
Maximize GPU utilization
Repeatable content for comparison
Simple, quick to run
Useful for information for:
○
○
○
Hardware developers
Browser developers
Game developers
● Open Source benchmark code

10. Must be interesting!

11. Why use the Polycraft game?

12. Polycraft Benchmark
●
●
●
●
●
Cutting-edge 3D, HTML5 game
Playable in the browser today
Targeting a range of hardware
Interest in performance
Actively in development

13. Polycraft game

14. From game to benchmark

15. Efficient GPU benchmarking
●
●
●
●
Run as fast as it can
Minimise CPU cost
Remove unnecessary subsystems
Control the rendering

16. Early Benchmark Tests

17. Game Modifications
●
●
●
●
Expand scripting system
Move work from CPU to GPU
Add new GPU effects
Make the game deterministic

18. Updated Scripting
● Improved scriptable camera
○ Dynamic waypoints
○ Required a skybox
○ Different perspective on the game
● Player waypoints
● Trigger waves of enemies

19. New GPU effects
● Additional shadow casting light
● Post processing effects
● New GPU particle system

21. New particle effects
Old Torch
New Torch

22. Repeatable game logic
●
●
●
●
Seeded random number generator
Disabled approximations
Used a fixed timestep
Synchronized update with rendering

23. Benchmark recording/playback interface
Record
Playback
Polycraft game
Benchmark app
Turbulenz Graphics Device
Turbulenz Graphics Device
WebGL API
WebGL API

24. Benchmark recording/playback interface
Meshes
Textures
Shaders
Polycraft game
Benchmark app
Turbulenz Graphics Device
Turbulenz Graphics Device
WebGL API
WebGL API

25. Benchmark recording/playback interface
Meshes
Textures
Shaders
Scripting
data
Polycraft game
Polycraft game
Turbulenz Graphics Device
Turbulenz Graphics Device
WebGL API
WebGL API

26. Benchmark recording/playback interface
Meshes
Textures
Shaders
Frame
data
Polycraft game
Benchmark app
Turbulenz Graphics Device
WebGL API
WebGL API

27. Benchmark recording/playback interface
Meshes
Textures
Shaders
Polycraft game
Capture Device
Turbulenz Graphics Device
WebGL API
Frame
data
Benchmark app
Playback Device
Turbulenz Graphics Device
WebGL API

28. Benchmark recording/playback interface
Frame
data
Polycraft game
Capture Device
Turbulenz Graphics Device
WebGL API
Textures
Shaders
Benchmark app
Playback Device
Turbulenz Graphics Device
WebGL API

29. Benchmark recording/playback interface
Frame
data
Polycraft game
Capture Device
Turbulenz Graphics Device
WebGL API
Textures
Shaders
Benchmark app
Playback Device
Turbulenz Graphics Device
WebGL API

30. Benchmark recording/playback interface
Frame
data
Polycraft game
Capture Device
Turbulenz Graphics Device
WebGL API
Textures
Shaders
Benchmark app
Playback Device
Turbulenz Graphics Device
WebGL API

31. Recording/playback
●
●
●
●
Process the recording offline
Reuse the system with other content
Playback with minimal overhead
Optimize recorded data
○ Use a binary format
○ Process in 60 frame chunks
○ Reference only required assets

32. Multiple streams

33. Generating results

34. Possible information to record
● Per-frame data
○ Frame execution timing (ms)
○ Low level metrics
○ High level metrics
● Configuration
○ Hardware: Platform, graphics card, driver
○ Runtime: Browser, screen resolution, anti-aliasing
○ Stream: Post effects enabled, render target resolution

35. Graphing

36. Graphing Results
●
●
●
●
●
Visual feedback
Allow comparisons
Analyze the output in detail
Export the raw data if required
Discover the information you require

39. Complications
●
●
●
●
Timing
Browser control
Feature support
Vsync

40. Vsync
ms between frames
Early Prototype Benchmark Testing
Vsync Off
Vsync On
frame number
Macbook Pro, MacOSX 10.6, Chrome 27

41. Solutions
●
●
●
●
Online/Offline
Different streams, different hardware
Look for alternative timing solutions
Frame execution time >16.6ms

42. What’s next?
● More detailed timing
● More stream variants:
○ High, medium, low
○ Stress test

43. Early Stress Test Demo

44. Before we continue building...

46. Feedback
● Early access to project in development
● Offline benchmark hosted on Github
● Experiment with:
○ Offline benchmark runner
○ Graphing tools
○ Different streams
● Submit:
○ Bugs/feature requests
bit.ly/polycraft_benchmark_preview

47. Utilizing the benchmark
●
●
●
●
Test on your target platforms
Change the configuration
Record your own content
Look at the Turbulenz Engine
implementation
(it’s open source)
bit.ly/polycraft_benchmark_preview

48. Questions
Register interest:
bit.ly/polycraft_benchmark_preview