WebGL Select Elements by Alpha

Swipe to Rotate the View and Move the Sprites

  1. Tap once to stop rotating the view.
  2. Tap a second time to select a sprite.
  3. Tap a third time to start rotating the view again.

Select the floating square and triangle, as well as the river. Each element includes unique alpha values.

Learn to select elements in a scene with values from the alpha channel. Call the WebGL API method readPixels(). However immediately before calling readPixels(), place the environment's color data in the back buffer. Render the scene. Render without any change, such as translation or rotation.

iPhone WebGL Alpha with readPixels()

Selection with the alpha color channel worked great during testing on Androids and various Windows browsers. However with iPhone some examples simply didn't work until calling a stationary render method, just before reading pixels from the canvas. Read the Color Selection Tutorial for more details. However substitute the alpha value for all other color values mentioned in the tutorial.

No solutions were found online after a lot of searching. Hopefully this tutorial helps others with the same problem. Read more WebGL techniques.

Learn 3D Programming with Screen Shots Learn 3D Programming with Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.