Book Image

WebGL HOTSHOT

By : Mitch Williams
Book Image

WebGL HOTSHOT

By: Mitch Williams

Overview of this book

Table of Contents (17 chapters)
WebGL HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Order of transparencies


The flexibility of being able to navigate anywhere has also created a new problem—the transparent cones that represent the light shafts from the streetlights will no longer be ordered furthest to closest. We can walk to the other side of the scene, turn around, and see the spotlight cones overlapping in the wrong order. We have to render the scene so that with each frame, we test the stacking order of the transparent objects. This is a tedious bit of coding, but it also demonstrates the issue. The following screenshot shows the same scene from the opposite side. Notice that the closest spotlight cone obscures the furthest cone where the two overlap. We cannot ignore the issue, so let's devise a program to fix this.

Engage thrusters

The solution is to restack the order with which the items are rendered. Currently, the 3D meshes are rendered in the order that they are added in webGLStart(). There is an array, meshObjectArray, of the 3D meshes in this scene. The ten items...