Tap to Fire Tutorial
Overview
This short tutorial provides a few tips regarding how to prepare game weapons that players tap to fire. Guidelines are based on the grenade launcher example.
The grenade launcher rotates as you swipe left to right. Tap the canvas (near the launcher), to fire a grenade. An explosion texture atlas, with WebGL blending, provides the illusion of firing from the launcher.
Optimize
It's important to optimize WebGL models for rendering on mobile phones and other devices with limited processing power. Seven Thunder Software applied four techniques for more efficient rendering. The techniques include render to texture, one vertex buffer object, a texture atlas, and WebGL blending.
Render To Texture
First combine all textures for the model into one
with render to texture
features.
The grenade launcher was modeled and mapped with 3ds Max.
3ds Max's Render to Texture
function prepares one baked texture
with all
lighting, diffuse, and bump features combined. See the
baked texture map
for the launcher.
Most 3D rendering applications probably include a similar feature.
One Vertex Buffer Object
Second use one Vertex Buffer Object (VBO). A VBO is a block of data uploaded to the Graphics Processing Unit (VBO). The grenade launcher, explosion mesh elements, vertices, and texels are all loaded into one VBO. It's more efficient to pack data into one VBO, than to switch VBOs during rendering. It's also usually more efficient to use one VBO rather than multiple VBOs during rendering. However WebGL does allow developers to upload and use more than one VBO per application.
Texture Atlas
Third use a texture atlas. The explosion itself uses a texture atlas. Load one texture for the explosion effect. Increment texels to animate the explosion using one texture. Change texels for successive animation frames.
The texture atlas was prepared with 3ds Max, the fire effect and sphere gizmo. Animate fire effect properties over a set of frames. This example uses four frames.
Use Blending
Fourth change blend functions rather than shaders during rendering. Enable blending once during initialization.
gl.enable( gl.BLEND );
Render the explosion with the following blend function. Successive drawing operations become lighter. In other words, overlapping images brighten.
gl.blendFunc( gl.ONE, gl.ONE_MINUS_CONSTANT_COLOR );
Render the grenade launcher with the following default blend function.
gl.blendFunc( gl.ONE, gl.ZERO );
Optimize
It's important to optimize WebGL models for rendering on mobile phones and other devices with limited processing power. Seven Thunder Software applied four techniques for more efficient rendering. The techniques include render to texture, one vertex buffer object, a texture atlas, and WebGL blending.
Explosion Texture Atlas
Grenade Launcher Baked Texture Map
Summary
This short tutorial provided a few tips
regarding how to prepare tap to fire
weapons with WebGL.
Guidelines are based on the
grenade launcher
example.
The grenade launcher rotates as you swipe left to right. Tap the canvas (near the launcher), to fire a grenade. An explosion texture atlas, with WebGL blending, provides the illusion of firing from the launcher.