Create a 3D Environment
This short overview explains how to display a lighthouse scene from panoramic photographs, with WebGL. The scene and simple sprites store neatly in one graphic.
Swipe to view the WebGL Color Pick lighthouse background. Tap to select brightly colored sprites. Sprite shapes move off into the distance, then back again. Both the environment and sprite colors are stored in one texture.
A number of details were left out, to focus on the main topic.
However, most free WebGL tutorials
WebGL Textures & Vertices: Beginner's Guide.
Create the 3D Environment
The lighthouse scene was composed from horizontal and vertical panoramic photographs of the lighthouse and surrounding area. The photographs were taken with an iPhone in panorama mode. With Photoshop combine 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 more complicated sprites as well. This simple technique allows developers to upload one texture for sprites and the background scene.
See more free WebGL tutorials.