WebGL Scenes: Responsive Web Design Screen Shots

WebGL Select Sprites by Texture Tutorial

Select Paintings by Texture Example Select Sprites by Texture Introduction Steps to Implement Selectable Textures Create Alpha Values with Photoshop Read the Alpha Channel Summary

Introduction

This Web page describes a technique to select sprites by texture within a WebGL scene. There's no need for complicated unproject or other ray picking algorithms. This tutorial explains how the Select Paintings by Texture and Select Sprites by Texture examples were implemented.

Display the WebGL scene without alpha transparent areas. For each sprite, store a specific value in the sprite's alpha channel. The alpha value becomes the sprite's identifying characteristic. Call the WebGL readPixels() method to read the alpha value at the touch point where the user taps.

The example projects store the environment background, sprite graphics, and sprite identification in one texture for efficiency. Swipe to view different areas of the background. Square sprites spin around. The simple examples use square sprites, however any WebGL acceptable mesh element works with this technique.

Steps to Implement Selectable Textures

  1. In Photoshop select a layer with one or more sprite graphics.
  2. Create a layer mask.
  3. Select the layer mask.
  4. Select a section of the graphic which represents a sprite.
  5. Default layer masks display all white. Use black to clear the sprite selection.
  6. Fill the selection with a percentage of white (P).
  7. Note the percentage in order to convert from percentages to alpha channel ranges (A).
  8. Apply the formula 256 * P = A. Round up or down if needed.
  9. Save the graphic as a PNG image file with transparency.
  10. One alpha value identifies each sprite. For example a sprite mapped with alpha value of 26, represents the sprite masked with 10% white.
  11. Call the WebGL method readPixels().
  12. Determine which sprite was tapped, based on the alpha value from the pixel.

Create Alpha Values with Photoshop

Create sprite graphics in a graphics editing program such as Photoshop. However mask sprite graphics to apply specific levels of alpha transparency. For example the first sprite might have a 10% opacity mask. The second sprite might have a 20% opacity mask.

With Photoshop white masks represent 100% transparency and black masks represent 100% opacity. In other words a fully white mask shows the full graphic color. A 100% white masks nothing. A fully black mask covers everything. Nothing in the graphic shows through.

Photoshop allows you to apply percentages of mask color to sections of an image. Photoshop mask values range from {0%..100%}. WebGL converts those percentages into positive whole integer values in the range {0...255}.

For example mask off a sprite with 10% white. The alpha value in WebGL equals 26. 256 * 0.1 = 25.6. Rounded up 25.6 = 26. Mask off a sprite with 50% white. 256 * 0.5 = 128. Of course there's no need to round whole numbers just use 128. Mask off a sprite with 20% white. 256 * 0.2 = 51.2. Round down to 51.

Alpha Transparent Sprites

Save the sprites as PNG files with transparency. However display the sprites in WebGL without transparency. Plan to display each sprite graphic with solid opaque colors. This technique uses the alpha channel to identify sprites. The sprites in this project specifically avoid display of transparent areas.

However if you're interested in transparent display see the WebGL Sprites with Alpha project. You can create the WebGLContext with {alpha : false}, then switch alpha blending on and off during rendering.

Read the Alpha Channel

When the user taps the canvas, call the WebGL readPixels() method. Read one pixel at the touch point. readPixels() returns four values for each pixel. The first channel represents red. The second channel represents green. The third channel represents blue. The last channel represents alpha.

The value of the alpha channel represents the selected sprite.

Tips

Testing in current Web browsers indicated the canvas background color must be black, for the sprites to display with the correct fully opaque color. With a white background color, the sprites display with transparency layered over white.

The WebGL clearColor() method appears to have no affect on the color of the sprites. Set the clear color to all white (1,1,1,1), all black (0,0,0,0) or any combination of the two settings. However don't use WebGL blend functions to hide transparent areas, or the alpha channels will display. In other words, you'll lose the solid opaque colors applied to sprites with this technique.

Summary

This Web page described a technique to select sprites by texture within a WebGL scene. There's no need for complicated unproject or other ray picking algorithms. This tutorial explained how the Select Paintings by Texture and Select Sprites by Texture examples were implemented.

Display the WebGL scene without alpha transparent areas. For each sprite, store a specific value in the sprite's alpha channel. The alpha value becomes the sprite's identifying characteristic. Call the WebGL readPixels() method to read the alpha value at the touch point where the user taps.

The example projects store the environment background, sprite graphics, and sprite identification in one texture for efficiency. Swipe to view different areas of the background. Square sprites spin around. The simple examples use square sprites, however any WebGL acceptable mesh element works with this technique.

Have fun and love learning! See more WebGL examples below.

WebGL Textures and Vertices eBook Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.