WebGL Animated 3D Scene
Responsive Web Design with CSS3 and Media Queries
Play Button to View the Animation.
View the background from front to left, back, and right. Tap the background to see one frame at a time.
Seven Thunder Software modeled and rendered the background with 3DS Max. The background was then mapped to a cube and loaded as one texture into WebGL.
WebGL Scenes with Responsive Web Design
Example WebGL environments
demonstrate how to display a 3D background with basic shaders,
cube environment, and one texture graphic.
This method avoids use of skyboxes, multiple image files, and separate shaders.
Skybox shaders require the
textureCube() function. The e-book's
sampler2D instead of
samplerCube allows many WebGL projects
to render with just one program.
Program switching involves more code as well as
Examples tested well with iPhone 6, Android phone and tablet, Windows PCs with WebGL enabled browsers, and Windows Phone 8.1.