3D Graphics Display Here with WebGL

Read WebGL E-Books

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 readPixels(). 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.

The e-book WebGL Scenes: Responsive Web Design explains how to prepare and display a three dimensional environment with panoramic photographs and WebGL. See more WebGL tutorials.

See More WebGL Tutorials!

3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

Copyright © 2015 Seven Thunder Software. All Rights Reserved.