3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

WebGL Camera

How to Move the Camera with Individual Sprites

Swipe to View the Art Gallery with Floating Paintings

Swipe to move around the art gallery. The camera or view point changes as you swipe. This WebGL example briefly explains how to move the camera with the background and individual sprites. Paintings float and rotate on their own, yet maintain their location within the art gallery.

First move the camera. Provide rotation or translation for the camera matrix. Calculate camera rotation opposite of model rotation. Upload the camera matrix to a uniform for transformations. Render the gallery.

Second rotate sprites. Multiply sprite matrices by the camera matrix. Upload each sprite matrix, then render the sprite painting.

Art Gallery

Seven Thunder Software modeled and rendered the art gallery with 3DS Max. Some of the graphics are original oil paintings. The e-book WebGL Scenes describes how to efficiently prepare and implement 3D backgrounds, such as the art gallery, with WebGL.

More WebGL Examples!

3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.