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 at use the base JavaScript and WebGL explained in the free eBook, 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.

Lighthouse Texture

Lighthouse Texture Map

See more free WebGL tutorials.

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