HTML and CSS Reference
In-Depth Information
Why build Geometry Destroyer?
Some online tutorials teach the basics of what you can do with WebGL. But this chapter's
tutorial doesn't cover creating simple demos—you'll be creating a real application from the
ground up. A few of the subjects you'll learn during the build include how to
• Create a reusable WebGL class
• Generate and maintain large numbers of WebGL entities
• Create different shape buffers with reusable code
• Work with assets in 2D and 3D space
• Handle 2D collision detection in 3D space with particle generation
In this chapter you'll first learn how to use WebGL to create an engine from scratch. Know-
ing how an engine works teaches you the fundamentals of managing 3D assets.
After you've built the engine's entity management to control visual objects, we'll walk you
through making a request with WebGL, processing returned data, and displaying the res-
ulting 3D shapes. For the last part of the lesson, we'll show you how to create your game's
player and bullets with 2D shapes in 3D. We'll then expand on the 2D drawing ideas to
create 3D rotating polygons that explode into cubes and squares when destroyed.
Need a prebuilt WebGL engine?
In a rush to get a WebGL application rolling? We recommend downloading CopperLicht
for 3D gaming at
http://www.ambiera.com/copperlicht/download.html
. After you've
downloaded the package, you should take a look at the documentation and demos at
www.ambiera.com/copperlicht/documentation/
to get started. For any other projects (inter-
active data representations, architecture, animated videos, maps, and the like), grab a copy
of Mr. Doob's three.js from GitHub at
https://github.com/mrdoob/three.js
. You'll find ex-
amples, documents, and usage guides to get you started at
http://mng.bz/1iDu
.
After completing this chapter, you'll understand how WebGL creates and manages 3D data.
In addition, you'll walk away with a reusable basic WebGL engine and a fun game! Let's
start by rolling out the engine's entity-management components.
