Tap to Fire Tutorial

Overview

This short tutorial provides 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.

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' 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.

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.