Tap to Fire Tutorial

Overview Optimize Render To Texture Explosion Texture Atlas One VBO WebGL Blending Summary

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 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 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. Draw with the animation from 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
);
  

Summary

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

See other WebGL lighting examples for the e-book WebGL Lighting. See more free WebGL light techniques.

Explosion Texture Atlas

Explosion Texture Atlas

Grenade Launcher Texture Map

Texture Map for Grenade Launcher
3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.