WebGL Color Pick: readPixels()
Tap the Canvas to Select a Color from the 3D Scene
Swipe to View the Landscape and Move the Sprites
Swipe to view the background. Sprite shapes move off into the distance, then back again. Both the environment and sprite colors are stored in one texture.
Call the WebGL method
Read the color under the mouse or touch point.
Create the 3D Environment
The lighthouse scene was composed from horizontal and vertical panoramic photographs of the area. The photographs were taken with an iPhone 6 in panorama mode. With Photoshop compose the photographs into one texture. With WebGL map the texture to the inside of a cube.
The image file includes solid square blocks of color for the sprites. However the empty spaces on the graphic can be used for any sprite.