Tap to Fire Tutorial

Tap to Fire Grenade Launcher 3D Grenade Launcher

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.

Tags