Turbulenz Engine HTML5
Samples and Tech demos
Samples and Tech demos
If you would like to see what developers have created with Turbulenz then take a look at a selection of the games here. These games show what is possible with the Turbulenz Engine and online services.
The Turbulenz SDK includes a wide range of samples designed to show developers how to use the engine and services. The samples on this page are a subset of the samples available in the SDK. These samples are all runnable on a modern HTML5 and WebGL enabled browser. The samples are implemented so that developers easily understand how to use the APIs. They also allow developers to cut and paste the code directly into their own applications as a starting point for adding new features.
Take a look at the samples, play with the options and sliders, and if you prefer reading code to documentation take a look at the sample code to see how the engine works.
This sample shows how to create all the Turbulenz devices and how to discover the OS version and the hardware capabilities.
Launch the sample or view the source code.
This sample is an introduction to the Turbulenz API. It shows the Turbulenz Engine entry and exit points and how to set up a simple render loop that clears the background. You can enable or disable the animation of the background clear color.
This sample demonstrates some of the capabilities of the Canvas 2D API. It shows how to render lines, rectangles, circles, arcs, polygons, textures and linear and radial gradients using the Canvas 2D API. It also shows a frames per second counter to get a measure of the API performance.
Launch the sample or view the source code.
This sample demonstrates the capabilities of the Draw2D API. You can drag the slider around to increase or decrease the amount of sprites rendered using the Draw2D API. You can also select between different rendering options (draw mode, texture mode, sort mode and blend mode) and see the impact on performance reflected on the frames per second counter at the bottom of the left pane.
Launch the sample or view the source code.
This sample shows how to use advanced texture effects with the Draw2D API. You can select, customize and combine the following effects to be applied to the rendered texture: Distortion, Color Matrix, Bloom and Gaussian blur.
Launch the sample or view the source code.
This sample demonstrates how to use the low level API of the Turbulenz graphics device. It shows how to load shaders, change techniques, and how to create and dispatch dynamic index and vertex buffers to render simple 2D animations.
This sample shows how to set up and then animate a Turbulenz Camera object. You can switch between tracking, orbiting and chasing motions.
Launch the sample or view the source code.
This sample shows how to load materials, how to create them procedurally, and how to apply them to renderables in the scene. You can select and apply different materials using different rendering effects to the rotation model.
Launch the sample or view the source code.
This sample shows a scene with dynamic shadows cast by point or spot lights rendered using the Turbulenz forward renderer. You can enable multiple colored lights to see the impact on performance. Click on the rendering window to move and rotate the camera around.
Launch the sample or view the source code.
This sample loads a model with four morph targets and blends between them. This kind of geometry manipulation can make the model appear to stretch, squash or twist. You can drag the sliders around to modify how much to apply each morph target to the original geometry.
Launch the sample or view the source code.
This sample shows how to use render targets to apply post processing effects to a dynamically rendered image. You can select between simple copy, inverted colors or light bloom post effects.
Launch the sample or view the source code.
This sample demonstrates how to animate a simple particle system from a moving emitter using the CPU. You can select different kinds of particles to render and you can also enable the rendering of the dynamically calculated bounding box of the particle system.
Launch the sample or view the source code.
This sample demonstrates the capabilities and usage of the GPU ParticleSystem.
This sample shows how to load multiple animations and build an animation controller hierarchy. An animation transition controller is used to blend between two animations. You can enable drawing of debug information to see the animation bounding box, the skeleton, and the mesh wireframe. You can also click on the rendering windows to move and rotate the camera around.
Launch the sample or view the source code.
This sample demonstrates how the Turbulenz engine can render a high number of animated skinned characters each one with their own separate animation. You can use the slider to increase or decrease the number of character to animate and render at the same time.
This sample shows how to create and use the Turbulenz 2D physics device. The sample creates several 2D static objects with surface velocity, two animated kinematic objects to push and lift objects around, and a hundred rigid bodies with different material properties. Left click to pick up and move the rigid bodies and right click to add new ones.
Launch the sample or view the source code.
This sample shows how to create each of the 2D physics constraints (point, weld, distance, line, angle, motor, pulley and custom). Each object in the scene can be manipulated with the mouse to see how the constraints work.
Launch the sample or view the source code.
This sample shows how to use 2D physics contact callbacks (preSolve, begin and progress) to implement one-way platforms and destruction based on collision strength. Left click to pick up and move the rigid bodies and right click to add new ones.
This sample shows how to create and use the Turbulenz physics device. The sample creates a floor plane and multiple cube shaped rigid bodies attached to nodes in the rendering scene. Click on the rendering window to move and rotate the camera around, click again to pick up and move the rigid bodies using the mouse forces object.
Launch the sample or view the source code.
This sample is a benchmark for rigid body physics simulation with randomly generated boxes, spheres, cones, cylinders, capsules and convex hulls. The rigid bodies fall into a procedurally generated triangle mesh bowl that can be animated. The sample also shows the time spent on the different physics simulation phases. Disabling the debug rendering will show its impact on the framerate, the physics simulation will continue but without any graphics update.
Launch the sample or view the source code.
This sample shows how to create rigid body physics nodes with each of the collision mesh types (boxes, spheres, cones, cylinders, capsules and convex hulls) and a static triangle mesh.
Rigid body cubes with an initial velocity can be fired into the scene from first person perspective by pressing space. Click on the rendering window to move and rotate the camera around.
This sample shows how to load and play sounds from sources moving in a 3D environment. You can enable and disable the movement of the different 3D sources to hear the spatial difference. Sounds can also be played with reverb, echo and pitch filtering effects when supported.
This sample shows how to play a video into a texture.
