Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

6. Integrating 2D and 3D > Overlaying 3D Visuals on 2D Pages

Overlaying 3D Visuals on 2D Pages

The WebGL compositor works in both directions: not only can we layer 2D elements seamlessly atop 3D scenes; we can also place 3D objects on 2D pages and blend them visually with the page. The key is to create a WebGL rendering context with a transparent clear color so that the objects in the scene get rendered but not the background rectangle for the element. Let’s look at an example.

Figure 6-2 depicts a web page with an overlaid 3D object. Open the file Chapter 6/integration-object.html. Look at that little alien guy walking around the page! Note the shadow cast by the figure, how it moves over the text on the page. Now, grab the alien with the mouse: you can drag him around. You can also use the scroll wheel to zoom the figure in and out, making it bigger and smaller. This level of integration between animated, interactive 3D content and the rest of the page opens up awesome possibilities. Imagine using this technique with online technical manuals, where figures, images, 3D models, and text blend together into a coherent presentation; or think about how it could be used to create new types of in-your-face interactive advertising. Let’s have a quick look at the code.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint