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.

More WebGL Examples!

Copyright © 2015 Seven Thunder Software. All Rights Reserved.