The Making of Turbulenz’

Ian Ballantyne, Turbulenz@ianballantyne

WebGL Benchmark

(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

Building a WebGL benchmark

WebGL capable devices

WebGL capable browsers

HTML5 Game Engines utilizing WebGL

Benchmark Demo

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

Must be interesting!

Why use the Polycraft game?

Polycraft Benchmark

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

Polycraft game

From game to benchmark

Efficient GPU benchmarking

● Run as fast as it can● Minimise CPU cost● Remove unnecessary subsystems● Control the rendering

Early Benchmark Tests

Game Modifications

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

Updated Scripting

● Improved scriptable camera○ Dynamic waypoints○ Required a skybox○ Different perspective on the game

● Player waypoints● Trigger waves of enemies

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

New particle effects

Old Torch New Torch

Repeatable game logic

● Seeded random number generator● Disabled approximations● Used a fixed timestep● Synchronized update with rendering

Benchmark recording/playback interface

WebGL API

Turbulenz Graphics Device

Polycraft game

WebGL API

Benchmark app

Turbulenz Graphics Device

Record Playback

Benchmark recording/playback interface

Meshes Textures Shaders

WebGL API

Turbulenz Graphics Device

Polycraft game

WebGL API

Turbulenz Graphics Device

Benchmark app

Benchmark recording/playback interface

Meshes Textures Shaders Scripting data

WebGL API

Polycraft game

Turbulenz Graphics Device

WebGL API

Turbulenz Graphics Device

Polycraft game

Benchmark recording/playback interface

Meshes Textures Shaders Frame data

WebGL APIWebGL API

Turbulenz Graphics Device

Polycraft gameBenchmark app

Benchmark recording/playback interface

WebGL API

Turbulenz Graphics Device

Polycraft game

Meshes

Capture Device

Textures Shaders Frame data

WebGL API

Benchmark app

Playback Device

Turbulenz Graphics Device

Benchmark recording/playback interface

WebGL API

Turbulenz Graphics Device

Polycraft game

Capture Device

Frame data

WebGL API

Playback Device

Turbulenz Graphics Device

Textures Shaders

Benchmark app

Benchmark recording/playback interface

WebGL API

Turbulenz Graphics Device

Polycraft game

Capture Device

Frame data

WebGL API

Playback Device

Turbulenz Graphics Device

Textures Shaders

Benchmark app

Benchmark recording/playback interface

WebGL API

Turbulenz Graphics Device

Polycraft game

Capture Device

Frame data

WebGL API

Playback Device

Turbulenz Graphics Device

Textures Shaders

Benchmark app

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

Multiple streams

Generating results

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

Graphing

Graphing Results

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

Complications

● Timing● Browser control● Feature support● Vsync

Vsync

Macbook Pro, MacOSX 10.6, Chrome 27

Vsync On Vsync Off

Early Prototype Benchmark Testing

ms

betw

een

fram

es

frame number

Solutions

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

What’s next?

● More detailed timing● More stream variants:

○ High, medium, low○ Stress test

Early Stress Test Demo

Before we continue building...

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

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

Questions

Register interest: bit.ly/polycraft_benchmark_preview