Last week Microsoft released a preview of Windows 8.1 including a version of Internet Explorer 11 supporting WebGL. This is great news from Microsoft and immediately downloaded and installed the preview version in order to test the game engine running on IE11. Once the installation was complete the first thing we ran was the device initialization sample, and we got a couple of errors on the Console:
Not a great start, but lets look at the stats reported by the WebGL device:
The interesting bit is what is missing from the bottom, after “Extensions:”. Disappointingly IE11 does not support any WebGL extensions yet. This is unfortunate because some of them, for example the ones that provide support for compressed textures, are fundamental to reducing memory usage and improving performance.
Anyway, we pressed on and tried one of the less graphically demanding examples:
You may notice something missing, those cubes are supposed to have a nice crate texture on each face! There are a few reasons they don’t:
1. One of the errors reported by the console is “vertexAttribPointer: Enum SHORT is not currently supported”, you can see it at the bottom of the first image.
This particular example is storing the UV coordinates used for the texture as two 16 bit integers, the values are just 0 and 1 so using integers is a perfectly valid way of saving memory, the alternative is to use two 32 bit floating point values which would double the storage requirements for each UV component. This is not a big deal for a simple cube, but can become a more serious issue for big models. Reducing memory requirements is very important for games, even more so if your game is running on a browser on a mobile platform, so being able to use smaller vertex formats is a requirement for us.
2. Another error reported by the console is “bindAttribLocation: Method not currently supported”, you can see it in the middle of the first image.
Turbulenz relies heavily on using bindAttribLocation to assign vertex components from vertex buffers to their relevant input attribute on the vertex shader. We could use getAttribLocation to ask the vertex shader where it wants its inputs, but this would require late binding of vertex buffers and the update of attribute locations if the shader changes. So instead the Turbulenz engine uses bindAttribLocation to tell the shader where to get its inputs from, which allows us to bind the vertex buffer immediately and to only have to bind it once. This is important because the Turbulenz engine creates large vertex buffers that are shared between several static geometries, independent of whatever rendering technique they use, allowing us to avoid the memory overhead of creating multiple buffers and also reducing the number of state changes. This is part of what makes Turbulenz such a high-performance rendering engine.
Continuing with our experiments we tried the sample app, which is just a rotating duck, and got nothing on the screen. Why? Well, there were more errors reported on the console:
The first error reported is “bufferSubData: Method not currently supported”. The lack of support for this method is significant. As explained earlier, the Turbulenz game engine shares big vertex buffers between several static geometries in order to avoid memory overhead and state changes. In order to do that, vertex information needs to be submitted independently for each model using the method bufferSubData. One alternative would be to keep sharing but to upload all the vertex information at once, but this requires us to hold all the geometry in memory longer than we would like and is also not practical if the game is streaming in and out static geometry. The other alternative requires creating an individual vertex buffer per geometry, which is not acceptable because it will increase buffer overhead and require more state changes.
The other problem we hit with this sample was:
It seems the WebGL implementation on IE11 does not understand GLSL shaders with structure declarations - a perfectly valid language feature that is supported in other browsers. The only reason the first example we tried rendered anything to the screen was because we don’t always use structure declarations in our shaders, for simple programs it is just quicker to declare the varying values independently. Admittedly we were considering removing structure declarations from our shaders because they make the shader code bigger (a concern for us as we try to seriously reduce the amount of data a game needs to download in order to render anything on the screen) so we may rewrite our shaders to work with this version of IE11.
There were more things failing on other examples: triangle fan primitives are not supported, luminance only texture formats are not supported, full stencil support is missing, etc. And, we reproduced the same issues on different machines with different video cards from different manufactures.
Are we going to change our code to workaround the missing WebGL features on IE11? Not whilst it is in development and only a preview.
Some of the workarounds will require substantial changes to the engine, and they may impact performance significantly. This version of IE is clearly not final yet, and we’re keen to help Microsoft deliver a fully compliant implementation of WebGL that would make Internet Explorer 11 competitive with Google’s Chrome and Mozilla’s Firefox. Exciting times for WebGL and HTML5.
The question we get asked more than any other is “does the Turbulenz Engine work on mobile?" Specifically how to use the open source Turbulenz Engine on Android and iOS.
The current answer ultimately reflects the limitations of the mobile operating systems and their associated browsers.
The Turbulenz Engine is designed and implemented with a modular architecture. Hence it is the game that defines which modules from the engine are required and used.
Some of the APIs the engine modules require are:
- Web Audio API
- Web Sockets
- Full Screen API
- Typed Arrays
- Pointer Lock
- High frequency timer
- Binary assets (XMLHttpRequest with “responseType” as “arraybuffer”)
There are two ways that Turbulenz games can run on mobile platforms:
1. Game runs in the browser:
For any browsers that don’t support WebGL, for example Safari on iOS, you can’t use the 3D and high performance 2D rendering APIs. Instead you should use the 2D canvas element and rendering APIs. However you can still use all the other features in the Turbulenz Engine, including the physics engine, animation framework and web services.
The only limiting factor is that Safari for iOS supports canvas 2D rendering but not WebGL. Hopefully future releases of iOS will include a complete WebGL implementation.
2. Game runs as an App:
We are developing a native client which provides both the 2D and 3D hardware accelerated infrastructure required to run games created with the Turbulenz Engine on mobile devices. This can be used in place of the browser to open and run game URLs. The games can be hosted anywhere online as long has they have been correctly built with the Turbulenz tools. Games using the Turbulenz native client will have access to all Turbulenz APIs.
This version of your HTML5 game can be distributed as a native app and can be published to the platform owners app store, including the Apple App Store, Google Play, and Amazon App Store. If the game uses the Turbulenz Store APIs the native app will automatically connect payment requests to the native payment service.
The native Turbulenz client may be thought of as a stop-gap until more mobile browsers improve their support for HTML5 and related APIs.
Forget to watch the Turbulenz getting started live stream? Remembered too late and joined halfway through? Had to take the dog for a walk?
No worries! The recording of the first (of hopefully many) Turbulenz Livestream events is now available for catch-up. You can find the video on:
The session included:
- Getting setup with the turbulenz_engine open source repository.
- A brief introduction to using the Turbulenz APIs.
- A step-by-step walk-through of building a game, combining 2D physics with 3D rendering.
- A demonstration of the example game on hub.turbulenz.com, playable from desktop and mobile.
Q&A with Ian & David from the Turbulenz development team.
The example game “Debris Dodger" created during the session has been made available on Github so you can try it for yourself. Just update to the latest open source version and follow the steps in the README.
Debris Dodge Github repo with all the code and assets to play with.
A few additional links to things we discussed:
- Denki Word Quest running as a native android app
- Debris Dodger running on mobile from hub.turbulenz.com
Any follow-up questions and feedback should be directed to the Turbulenz Engine Users Group.
We’re excited to announce that we have released the Turbulenz HTML5 game engine as open source under the standard MIT license. The open source project is available on GitHub at https://github.com/turbulenz/turbulenz_engine.
You may have seen Turbulenz mentioned somewhere and wondered what it was. Turbulenz provides a game engine that delivers all the building blocks developers need to rapidly create high quality and hardware accelerated 2D and 3D games playable across mobiles, tablets and the web.
Polycraft by Wonderstruck
We initially proved this to ourselves by creating the service and engine capable of streaming and rendering the majority of Quake 4. This continues today to be a great test of the engine as it has evolved. You can see it demonstrated by our CTO David Galeano.
Today, the Turbulenz Engine powers the highest quality 2D and 3D HTML5 games online. If you want to see some examples we recommend looking at:
- The 2D arcade game Save the Day by Denki - watch the trailer - play the game now
- The 3D arcade strategy game Polycraft by Wonderstruck - play the development version now
- The real-time 4 way multiplayer shoot ’em up Score Rush by Xona - watch the trailer - play the game now
Save the Day from BAFTA-winning Denki
We have seen a monotonically increasing interest in the engine and SDK since it was first made publicly available.
If you want to take a look, the best place to start is the README which you can find on the Github project page and included in the source. This details how to set up a development environment and includes a short getting started guide on how to use the Turbulenz Engine APIs. From here we recommend going through the Getting Started guide and reviewing all the documentation online.
The engine is also available bundled in an easy to install SDK for Windows, Mac OS X and GNU/Linux. This might be an easier option if you’re looking for a packaged-up and fully QA’d snapshot of the engine. All future SDK releases will contain the open source engine with the associated MIT license. (Earlier versions of the SDK were released with a partially open license which has now been deprecated.) The bundled SDK is available from the Turbulenz developer service.
What Features Does the Open Source Turbulenz Engine Provide?
The Turbulenz Engine contains an extensive range of features and services for creating games. The engine was designed to be a complete Internet generation game engine. By this, we mean a game engine that was conceived, designed and implemented specifically for building games that are played via the Internet using web technologies, rather than as a native application on a console or PC. This is a single suite of technology that spans the client game application and remote game services.
The libraries contain solutions for all sensibly reusable game services, including: 2D and 3D graphics, 2D and 3D physics, 2D and 3D effects, sound, networking, user input, scene graphs, hierarchical animation, movie playback, resource management, server requests, a range of renderers, leaderboards, badges, payments, save game userdata, user profiles, game profiles, multiplayer, metrics, maths and numerous utilities.
The graphics engine is completely shader driven and hardware accelerated using WebGL. It has been implemented to allow games to efficiently dispatch their scenes. The engine comes with multiple renderers which can be selected depending on the features and performance of a user’s device, this includes, a deferred renderer, a forward renderer and a default renderer. There is also a highly efficient 2D renderer for efficiently dispatching huge numbers of sprites and effects.
The 2D and 3D physics engines are particularly powerful in comparison to the procedurally generated ports of currently available.
Why Are We Open Sourcing the Engine?
We’ve had a lot of interest in the Turbulenz Engine via our SDK packages and many of the people who try it out have praised the features and performance. However, two issues that have often come up are any sort of restrictive licensing and the ease of getting things started.
By releasing the Turbulenz Engine as open source under a standard liberal MIT license we hope to ease the adoption costs and ensure that people don’t feel in any way restricted by using the Engine.
What Are the Design Goals of the Turbulenz Engine?
The main design goals of the Turbulenz Engine are performance, modularity and customizability. Users of the engine should be able to build any kind of game without limitations, in an efficient manner and with an end product that performs optimally when loading and during play.
To achieve this target the Turbulenz team followed these rules when writing code:
- Users should be able to pick what they want and replace what they don’t.
- When possible new functionality should be orthogonal to existing one.
- Strict coding standards to keep code efficient.
- Keep memory allocations to minimum, reuse existing objects or arrays whenever possible, use scratch pads, combine multiple separate objects into a single one.
- Use most efficient storage for each data, Typed Arrays when possible.
- Reduce function calls when possible: write functions that handle arrays of objects instead of loops that make a function call per element, games rarely do a single thing to a single object.
- Be aware of performance differences between browsers.
- Profile often.
- No API should block waiting for a response from the server, avoid polling whenever possible, use callbacks or Promises, to notify of data availability.
- The target should be to make the game a simple dumb player of data, all functionality defined by simple data files.
Simple well documented file formats
- Define simple, easy to create asset formats that can trivially be connected to any tool chain.
- Design interfaces that can be implemented with different level of detail or quality settings in order to scale from mobile to desktops.
Power without control is nothing
- Make sure users can do exactly what they want, with a helper layer put on top if required, document performance implications at every level.
- The engine should keep going even if any type of asset fails to load. The application is able to provide sensible defaults for all asset types making it easier to stay productive and diagnose issues.
- Reduce amount of data to be downloaded, compress data efficiently.
- Use the browser cache efficiently, use unique file names based on content and tell the browser to cache forever.
- Strict coding standards to keep code readable, easy to maintain and debug.
- Write unit tests, samples and documentation for every new code path.
- This is a game engine, for games.
What Have We Made Available?
We’ve made three Git repositories available on GitHub:
Turbulenz Engine - https://github.com/turbulenz/turbulenz_engine
- Documentation of the libraries, APIs and tools
- Code samples demonstrating the engine APIs
- Application samples showing how a basic but complete game can be built
- Protolib high level prototyping libraries
Turbulenz Tools - https://github.com/turbulenz/turbulenz_tools
- Python tools for processing code and assets.
- Also available from PyPi as turbulenz_tools.
- A locally hosted Python development web server implementing the Turbulenz services APIs
- Tools for interacting with the Turbulenz Hub
- Also available from PyPi as turbulenz_local.
Want to Contribute?
We know there is a large and growing community interested in HTML5 game development and we hope that people will find this project an empowering contribution to game and Internet technology domains. Now that the project is fully available as open source and easily accessible via GitHub all contributions are gladly welcomed. Please send the project a pull request or post a git diff patch on the Turbulenz Engine google group.
Please Help Us Spread the Word
Please help spread the word to your friends and followers by sharing this announcement online. We want to make sure that anyone thinking about making a game with HTML5 is aware of Turbulenz as a free and open source solution that comes packed with high performance features.
Sign up for the free WebCast on 21st of May at 9am PST / 5pm BST. This will include an introduction to the technology, show you how to get started, and leave time for Q&A.
Any questions or ideas about the Turbulenz Engine, HTML5 games or anything else, please get in touch.
Investigation and presentation by Rémi Arnaud from GDC 2013 about getting COLLADA assets out of art packages and into the browser. The title of Rémi’s GDC 2013 presentation was “Experimenting using COLLADA to being content from Unity to WebGL using Turbulenz and Fl4re exporter”.
He spent some time exploring how Turbulenz provides the tools and engine to easily make this happen for 3D art assets including animations and physics. His pipeline took assets via Unity and exported them into Turbulenz to render in the browser.
Definitely worth taking a look at if you want to build a pipeline for getting 3D content into the browser.
So if you’re working with Unity and want to get your game running in a browser without the need of a plug potentially Turbulenz is the HTML5 and WebGL solution for you?
David Galeano, the Turbulenz CTO, presented the Turbulenz Engine at WebGL Camp Europe in Switzerland. There seemed to be pretty good praise for our First Person Shooter Demo using assets from Id Software’s Quake 4.
The slides from David presentation are available online.
A new version of the Turbulenz SDK is now available!
The Turbulenz Team has been busy in the lab cooking up some new features and we’re excited about what the Turbulenz SDK 0.15.0 brings for our developers! This release introduces new Turbulenz Services: ‘Leaderboards’, ‘Badges’ and ‘User Profiles’ to developers. With added support for Firefox 4/5 and Internet Explorer 9, speed improvements and WebGL support, there’s a lot crammed in there, so read on to find out more.