WebGL Games E-Book Screen Shots

WebGL Select Sprites by Color Tutorial

WebGL Select Sprites by Color Example Introduction Color Array Select By Color Find the Sprite by Color Create the 3D Environment Summary WebGL Tutorials

Introduction

This short tutorial explains how to select sprites by color with WebGL. Use color to determine which element the user selected within a WebGL 2D or 3D scene. Each sprite's texture mapped with a different color. The WebGL Select Sprites by Color example includes a three dimensional environment. Swipe to view the background. Sprites rotate in the foreground. Tap once to stop the view from rotating. Tap a second time to select a sprite. Tap a third time to resume interactive rotation.

Color Array

The WebGL Select Sprites by Color example creates an array of objects. Each object includes the following four properties. String sName is the name of the sprite which displays when the user selects it. Numbers r, g, and b represent red, green, and blue channels. Each channel is in the range {0...255}. You can use Photoshop to determine sprite colors in advance or select a sprite and let code display each color channel's value.

this.sName = sName; 
this.r = r;
this.g = g;
this.b = b;

Select By Color

First include an onclick event handler for the canvas. Translate browser coordinates to canvas coordinates. See the Drag a Sprite example with tutorials for information regarding translating browser to canvas coordinates for both desktop and mobile devices.

Second stop rotating the view. Freeze the scene allowing the user to select a sprite without movement.

Fourth render the scene without any motion. A quick render before reading the screen verifies the current view on display is saved to the buffer. The WebGL Select Sprites by Color example renders each entity in the view. Code iterates over the set of entities. The entities include the background scene and two sprites. Upload each entity's transformation matrix and draw the matrix without any changes. The goal is to render the scene exactly as viewed.

Fourth read in one pixel at the X and Y coordinate where the user tapped. The following listing demonstrates how to read just one individual pixel from the screen. Create a Uint8Array to hold four values. Call the WebGLRenderingContext method readPixels(). Variable gl is a reference to a WebGLRenderingContext. The following listing creates a Uint8Array then reads one pixel at coordinates (nX,nY) into the array.

var cp = new Uint8Array(
 4
);

gl.readPixels(
 nX,
 nY, 
 1,
 1, 
 gl.RGBA, 
 gl.UNSIGNED_BYTE, 
 cp
); 

Find the Sprite by Color

The Uint8Array contains four values. The first value is the red channel. The second value is the green channel. The third value is the blue channel. The last value is the alpha channel.

Iterate over the Color Array searching for an object with matching red, green, and blue channel values.

The following short listing demonstrates searching through an array of objects with red, green, and blue values. For each object test to see if the Uint8Array also contains the same values. If so, the user tapped a sprite. Display the name of the sprite to the user, and exit.

for (var i = 0; i < aCE.length; i++){

var ce = aCE[i];

if(cp[0] == ce.r && cp[1] == ce.g && cp[2] == ce.b){ 

 eDebug.innerHTML = "You found "+ce.sName+"!";
 
 break;
}
} 

Create the 3D Environment

Seven Thunder Software modeled the environment with 3ds Max, then rendered cube reflection maps from the environment. The rendered maps were composited in Photoshop, then assigned as one texture, to the faces of a cube in 3ds Max. Use the UVW Unwrap edit dialog to map the cube faces. Export the cube as a Collada DAE file. You may use Seven Thunder Software's free Windows 3D DAE Translator. The 3D DAE Translator converts DAE data into a set of arrays for use with WebGL. Many 3D models on this Website were converted with 3D DAE Translator.

With proper mapping and translation the result provides a simple three dimensional environment. Seven Thunder Software's e-book WebGL Scenes explains how to create efficient 3D scenes with WebGL.

Summary

This short tutorial explained how to select sprites by color with WebGL. Use color to determine which element the user selected within a WebGL 2D or 3D scene. Each sprite's texture mapped with a different color. The WebGL Select Sprites by Color example includes a three dimensional environment. Swipe to view the background. Sprites rotate in the foreground. Tap once to stop the view from rotating. Tap a second time to select a sprite. Tap a third time to resume interactive rotation.

Seven Thunder Software's upcoming book 3D Games with WebGL explains a simplified, streamlined approach to sprite selection. Enjoy more WebGL tutorials.

See More WebGL Tutorials!

Copyright © 2015 Seven Thunder Software. All Rights Reserved.
WebGL Scenes: Responsive Web Design Screen Shots