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

Explosion Texture Atlas

Grenade Launcher Baked Texture Map

Texture Map for Grenade Launcher

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
learn to code,Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, create 3D website, 3D Media, JavaScript, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics, learning webgl, learn webgl
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.