WebGL Scenes: Responsive Web Design Screen Shots

3D Lake Scene

Mapped with Photos from an iPhone

Example for the E-Book WebGL Scenes: Responsive Web Design

Swipe to View the 3D Background

The texture map for this lake scene originated with panoramic photographs taken with an iPhone. The book WebGL Scenes: Responsive Web Design explains how to create three dimensional backgrounds from panoramic photographs.

WebGL Scenes: Responsive Web Design

Book Four in the Series Online 3D Media with WebGL

Learn to combine responsive Web design with WebGL. Display three dimensional environments which look great on mobile devices and desktop computers. The background repositions and changes size in response to screen dimensions and device rotations. Topics including displaying a 3D background with a simple cube, responsive Web design with media queries, and responsive interactive design with JavaScript.

WebGL Scenes: Responsive Web Design demonstrates 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 samplerCube type with the textureCube() function. The e-book's technique uses common sampler2D and texture2D() features.

Use of sampler2D instead of samplerCube allows many WebGL projects to render with just one program. Program switching involves more code as well as rendering time.

WebGL Scenes describes use of CSS3 and media queries to resize an animated background. The book explains how to view the environment interactively with JavaScript and WebGL. Swipe to see the top, bottom, left, right, back, and front of the scene. Rotate a mobile device or resize the browser window. JavaScript adjusts the WebGL viewport and maintains data needed for interactive scenes.

Developers and designers who need 3D scenes can create their own or use standard skybox format images. The book briefly explains how to create 3D backgrounds from panoramic photos, 3DS Max, or skybox graphics available online.

Examples tested well with iPhone 6, Android phone and tablet, Windows PCs with WebGL enabled browsers, and Windows Phone 8.1.

See WebGL Scenes: Responsive Web Design on Amazon. Select a Country from the Menu Below:

3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.