Of all the HTML5 and related APIs we’ve been given, WebGL is possibly the most interesting. With it we can create awesome 3D environments right in our browsers, and in this article I’m going to walk you through exactly how to do that. In particular, we’re going to be building a model of planet Earth that we can rotate around like a crazy person and with which we can wow our fellow developers… well, at least a little. Before We BeginFor this tutorial we will be using the fantastic three.js WebGL plugin. It’s a bit like jQuery for WebGL in that it abstracts a lot of the processing ugliness inherent in the native API. Put simply, three.js makes our lives a lot easier. We can include it, just like any normal script in our HTML document, like so:
Here we’ve used a CDN, but you could use a local version. We then need to make sure that WebGL has something to render onto. Here we have some flexibility: we can use an ordinary
After adding the link to the JavaScript file, our HTML is more-or-less done for now. The SetupThree.js itself tends to set things up much like a real 3D desktop program might. We have a scene in which things live, a camera with which to view them, some lighting, a renderer to actually render things, and of course the 3D objects themselves. The list can seem a little daunting, but all of these can take shape as variables within our
There are some other variables defined here, namely the WIDTH and HEIGHT constants to get the width and height for our renderer, and a group of variables we’ll be using later on to set up our camera position. All of these are elements that are common to almost every 3D project, regardless of the platform or environment, so get used to these guys hanging around. With three.js we’re able to implement these pretty easily, and we’ll see how they fit into our project in a moment. The EnvironmentTo start, we need to take our new variables and set them up so that our model Earth will show up looking awesome. We can start by setting up everything that will handle this environmental stuff:
Here’s a description of what’s happening in the code above:
Now we need to start building Earth itself by sticking in a mesh:
Here we create a mesh, which is kind of like an object that we’ll dress up to look like Earth, and give it some geometry and a material, or texture, to cover it. We also position it properly and add it to our scene like we did with our other objects. You can see an example of our setup below. There is some extra code here to handle the rendering (which we’ll get to in a moment), but it’s looking good so far! See the Pen WebGL Earth Tutorial, Demo 1 by SitePoint (@SitePoint) on CodePen. The Blue PlanetNow the fun part is skinning this guy. First we’ll use a diffuse map, which will give us the look of Earth, and which you can add like this:
If you’re in need of a good texture to use here, you can try this one or search Google for a decent diffuse map of Earth. Anything with a good resolution is fine. Now this doesn’t look too bad, but we can make it better by introducing a little topography here. The Earth has some pretty high mountains and in order to make sure the rest of the solar system knows that, we’ll need to use a bump map. In 3D, bump maps are black and white images, with the intensity of white indicating the height of the “bump” (or in our case, our mountains).
With that, we’re more-or-less there. Again, searching Google for “Earth bump map” will give you plenty of options, but if you don’t feel like hunting you can find a nice one here. If we run the above code (with the rendering code from before), we’ll get this: See the Pen WebGL Earth Tutorial, Demo 2 by SitePoint (@SitePoint) on CodePen. Spin It!All that’s left now is to give our Earth some rotation. We’ll need two new functions for this, which we can call
Our
Here’s where things are happening. Every time To The Bitter EndThere are, of course, tweaks we can add to make our Earth even better. OrbitControls.js is a script that will give some mouse-driven rotation ability to our Earth and adding a field of stars to our backdrop or some clouds in our stratosphere isn’t too difficult either. If you’re a real sucker for punishment, you can even add an atmosphere to your planet using WebGL’s shaders. You can see an example, with code, of some of these additions in the final CodePen demo: See the Pen WebGL Demo Final by SitePoint (@SitePoint) on CodePen. Be sure to click around on the page and scroll your mouse wheel to see the special effects (hold down shift to get the mouse wheel working on this page or else use the full page demo). ConclusionWebGL and three.js can be challenging because they require us to think a little like a 3D artist at times, using things like scenes, renderers, and cameras to get the job done. But the result is something that looks pretty impressive and, if you’re dedicated, can lead to some interesting possibilities with 3D in the browser. Stick with it and you’ll be able to pull off some amazing feats in no time. |
|