WebGL Scenes: Responsive Web Design Screen Shots

WebGL 3D Art Gallery

Swipe to View the Architecture

Improve your Web presence with online 3D media by Seven Thunder Software. Select paintings with the Interactive Art Gallery.

The art gallery was modeled and rendered with 3ds Max from photographs of actual art galleries. Seven Thunder Software's free 3D DAE translator and online rendering software prepared the interactive art gallery. The e-book WebGL Scenes: Responsive Web Design explains how to display similar online architecture from 3D models with WebGL.

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.