WebGL Select Sprites by Color Tutorial

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

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 to select a sprite.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in the WebGL e-book series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or three.js, as well.

Color Array

The WebGL: Select Sprites by Color example creates an array of objects. Each object's of type, ColorEntity. Each ColorEntity includes the following four properties. String sName is the name of the sprite which displays when selected by the user. Numbers r, g, and b represent red, green, and blue channels. Each channel is in the range {0...255}. Digits represent the amount of color assigned for each hue. For example 0 indicates the hue isn't included in a specific pixel. However 255 indicates the hue renders at maximum value in the selected pixel.

For example a ColorEntity with r = 0, g = 0 and b = 255, displays a solid pure blue sprite.

You can use Photoshop to determine sprite colors in advance, or select a sprite and let JavaScript 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. Seven Thunder Software's free Drag a Sprite, example with tutorials, explains how to convert browser to canvas coordinates for both desktop and mobile devices.

Second 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. To render to the buffer, iterate over the set of generic entities, not just the array of ColorEntity. Render each one. 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.

Third 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 WebGLRenderingContext. The following listing creates a Uint8Array, named cp, then reads one pixel at coordinates (nX,nY) into cp.

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 ColorEntity, test to see if the Uint8Array, colors selected by the user, contains identical color channel values as each ColorEntity. 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. View from inside the cube to see the scene. The book 3D Scenes: Learn WebGL demonstrates how to create lightweight 3D environments.

With proper mapping and translation the result provides a simple three dimensional environment.

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 to select a sprite. JavaScript obtains a copy of the color under the point which was tapped, then iterates over an array of ColorEntity to determine which sprite was selected.

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.