WebGL

You are currently browsing articles tagged WebGL.

Due to a long plane flight, this week I started reading up on WebGL in earnest, going beyond the various tutorials on the web. The two books recommended to me that I’ve started on (and skimmed through in their entirety – I need to sit down with each in front of a computer):

WebGL: Up and Running, by Tony Parisi, O’Reilly Press, August 2012. More info about the book here, including a sample. I recall Tony from way back in the days of VRML, he had one of the first viewers for that file format, so he’s been working in this area of 3D graphics for the web for a long time. This looks to be a good book if your goal is indeed to get something on the screen fast. It’s readable, and I appreciate his use of URLs to WebGL demos and resources and (properly credited) Wikimedia images. The code samples for the book are here on github.

It uses the popular three.js library to insulate you from the OpenGL ES roots of WebGL and hide its raw API nature. The author of three.js, Mr.doob (I don’t make these names up), notes that his work is “a lightweight 3D library with a very low level of complexity — in other words, for dummies”. Which is a fine thing, and I think I’ll be using it myself to teach introductory computer graphics. However, if you want to gaze at the occult pulsing mutation spawned of JavaScript + OpenGL ES + DOM + JSON + HTML 5, I mean, unleash the full power of WebGL itself, you’ll want to read the next book instead.

WebGL Beginner’s Guide, by Diego Cantor and Brandon Jones, Packt Publishing, June 2012 (code here). This is a pretty impressive book overall. The authors deal with WebGL directly, adding only the glMatrix library on github to make matrix manipulation easier (this is about as minimal as you can get). This book walks through much of what WebGL does (essentially, the same as OpenGL, of course), giving lots of code examples and worthwhile illustrations. Some example programs are quite nice, with useful user interfaces allowing you to twiddle values and see the effect. The book deals with more advanced topics towards the end, such as how to render offscreen and sample the results (their example is for performing picking). There are a few minor problems with layout on my iPad (a few illustrations don’t fit and there’s an awkward scrolling interface that doesn’t quite work), and some occasional lapses in grammar, but overall the book is fine. Occasionally the authors will get distracted by side topics, like a full derivation of why you use the inverse transpose of the matrix for transforming normals, or explaining a shader that does simple ray tracing. In general, however, the book works through the key areas of the WebGL API and warns you of potential problems along the way. WebGL itself exposes you directly to vertex and fragment shaders, so if you are planning to do some serious work in this area, this book is perhaps a better choice that Parisi’s (that said, three.js itself gives you easy access to shaders).

Personally, these two WebGL books were cheap enough on Kindle that I bought them both. The Beginner’s Guide in particular is a much better deal on Kindle – a third the physical book’s price. They’re actually better on Kindle, in that they’re in color; the physical books are printed with grayscale images. There are other books on WebGL, but these were the two recommended to me and they are both reasonable choices, depending on your goals. I would not recommend either if your primary goal is learning the fundamentals of computer graphics (though there’s a bit of that type of material in each). For learning WebGL itself and the basics of what it offers, both books are fine, with the “WebGL Beginner’s Guide” being aimed at the more “to the metal” programmer.

JavaScript: The Good Parts, by Douglas Crockford, O’Reilly Press, May 2008. If you use WebGL, you’ll have to know at least a bit about JavaScript. Patrick Cozzi mentioned this as a reasonable guide, along with other writings by the author. I’ve only started it, but it’s pretty amusing. The book’s approach is to indeed teach only the good parts about the language and not let you know how to use the bad parts. The author recommends only one of the dozens of books on JavaScript, JavaScript: The Definitive Guide. He feels the rest are, to quote, “quite awful.”

Update: I finished this book and thought it got better as it went along. It starts out a bit language-wonkish, too much about grammar. Skip that chapter. The most useful parts were the appendices, where he explains the various parts of JavaScript clearly and succinctly, calls out the dangerous and evil parts of the language, and explains how to steer clear of them. The author came up with JSLint, which checks your code for badness, but to be honest it’s way too a strict schoolmarm for me, hitting me on the knuckles whenever I put a left brace “{” on the wrong line. I recommend JSHint instead.

Enough on WebGL and JavaScript, my current interests. I’ll mention just two more books that I’ve only just glanced at and so can jump to conclusions.

Real-Time Graphics Rendering Engine (Advanced Topics in Science and Technology in China), by Hujun Bao and Wei Hua, Springer Publishing. Shame on you, Springer, for shame. A 300 page book for $169 is bad enough, but this one has a slap-dash translation that could probably have been done better by Google Translate. I’m judging only from the “Look Inside” text I can access on the Amazon listing, but I see things like a section labelled “Rending Modle” on page 5. This might be a fine book in its native Chinese, the bits of material I tried to read seemed sound enough, but the translation is, well, judge for yourself. Here’s the end of chapter summary, a section I picked at random:

“Real-time rendering is always formed as a pipeline composed of consequential data processing and graphics calculations to generate final rasterized images. In order to achieve amazing rendering effects as well as real-time performance, GPU techniques, especially shader techniques, are introduced to utilize programmable pipelines and the parallel computing structure. Virtual geometric 3D models are transformed to be located in a virtual scene by geometrical transformation matrices. Material and/or other visual properties are then attached to those geometrical models to compute visually pleasant rendering results. As the performance of real-time rendering applications is highly emphasized, tailored shading techniques and BRDF models are employed to achieve real-time rendering results with balanced visual effects.”

I feel terrible for these authors whose work has been so shabbily thrown between two covers.

However, there is certainly a worse book out there, and I have to give the full-sized cover from its Amazon listing, since I expect it to disappear any day now and I want to keep it as a memento.


Suck it, bizzatches, I got me my own book on Amazon. Yes, the title is my name, it’s ostensibly a biography; I’m not the author. I ran across it yesterday morning, and it almost made me laugh. Almost, because I hate these “books”. It’s clearly by the same people who came up with all those other automated offerings, VDM Publishing.

I’ve posted about this so-called publisher before, here and here. VDM now has a new imprint, “Cel Publishing” (one of seventy-nine!), I expect because the Alphascript and Betascript Publisher books are fast disappearing from Amazon’s catalog as the complaints and returns roll in. The short version is that this firm has a program that grabs a random Wikipedia page and follow links from it. Once there’s enough material for a book-sized book, it spits out the contents. Some human – in this case allegedly one “Iustinus Tim Avery” (anagram server’s first hit is “Autism University”) – slaps a cover on it and it’s put in the catalog, to be published on demand.

The most creative part of the process used to be the cover choice. In the past they were sometimes pretty amusing, but it looks like Cel Publishing has removed that fun part of the job for the “editor” and instead just uses random abstract patterns. I personally think of myself as more of a splash of chartreuse paint, but so be it. Also, the book is clearly underpriced at $38 for 60 pages. What did make me laugh is that there’s now a review of the book (thanks, Matt!).

Tags: , , ,

I asked Patrick Cozzi if he knew of any WebGL editors working in the browser. There turn out to be quite a few, each with their own focus:

Enjoy! And let us know of any others you find.

Note: we’ve added a resource page for WebGL-related information.

Tags: , ,

by Patrick Cozzi, a guest blogger

(I was corresponding with Patrick and found he knew way too much about WebGL, so asked him to write something down. – Eric)

Although I am a long-time C++ and OpenGL developer, I’ve been developing full-time in JavaScript and WebGL for the past year and a half on an open-source 3D engine, Cesium, for virtual globes and maps. Here are some of my favorite WebGL resources.

Reading

SIGGRAPH

  • The WebGL BOF, organized by Ken Russell, will have a series of five-minute lighting talks with a focus on demos, including a Cesium demo I’m giving. Last year the room was packed – people standing, sitting on the floor, and crowding around the door. Let’s hope the room is a lot bigger this year.
  • Graphics Programming for the Web is a timely new course by Pushkar Joshi, Mikaël Bourges-Sévenier, Ken Russell, and Zhenyao Mo covering WebGL and other relavant HTML5 techniques. It sounds like it will be pretty broad, which is great for C++ developers like me that recently started to pretend to be web developers.
  • Although not WebGL-specific, I’ll be at the Rest 3D BOF organized by Rémi Arnaud. I’ll even miss part of Beyond Programmable Shading for it. Rest 3D is defining a REST API for accessing 3D content over HTTP. If it gets widespread adoption from content providers, WebGL apps using the API will have access to a ton of content, which is a big win for everyone.

Need to convince management/leads to consider WebGL?

  • WebGL is cross-platform, and doesn’t require an install, plugin, or admin rights. IE doesn’t support WebGL, but there are several options. We’ve found Chrome Frame to be the best because it installs without requiring admin rights, and also brings Chrome’s fast JavaScript engine.
  • WebGL browser support is increasing. Check out the WebGL Stats by Florian Bösch. It currently reports that 65.6% of desktop browsers across all OSes support WebGL. (more stats for Firefox here).
  • JavaScript doesn’t suck that much, really. JavaScript: The Good Parts by Douglas Crockford and his other JavaScript writings are great reads. There are downsides too, of course; for example, I have a much harder time rationalizing about performance in JavaScript than I do in C++. Fortunately, the built-in Chrome profiler is painless to use.

Tools

  • The WebGL Inspector by Ben Vanik allows us to step through WebGL calls or just draw calls, and view textures, buffers, shaders, and the current state – think gDEBugger for WebGL. I like to use it as a sanity check to make sure we are not making too many draw calls or loading too many textures.
  • Our WebGL Report uses a pipeline diagram to display the system’s WebGL capabilities such as maximum texture size and number of texture image units.

Finally, the WebGL wiki has a ton of great resources including a list of frameworks and more.

Tags: ,

I’ll be gone this weekend, so my dream of catching up on resources by posting every day is slowed a bit. Here’s today’s seven:

  • The free Process Explorer has a lot more functionality than its name implies. One very cool feature is that it actually shows GPU usage. Run it, right-click a process that’s running and select Properties, then go to the GPU Graph tab to watch memory use and GPU load.
  • If you are seriously involved in implementing bump maps, parallax occlusion maps, etc., Morten Mikkelsen’s blog has a lot of chewy information, along with demos and source. He’s doing a lot of interesting work on autogenerating and blending mappings.
  • The game itself is no great shakes, but Google’s Cube has some lovely 3D rendering going on via javascript.
  • Another “3D in the browser” experiment (with WebGL) is sketchPatch. It’s not as simple as advertised, but I like the idea of an interpreted language you just type and see in the same window.
  • There are lots of reasons Unreal Engine 3 is the most popular commercial 3D engine for games. Here’s some nice eye candy from their tutorial on image reflection, which is also just plain educational.
  • Some cool results here using cone tracing for global illumination effects. Seeing these effects for dynamic objects at interactive rates is great stuff, especially since they’re having to update octrees on the fly.
  • I love the colored Japanese woodcuts of classic videogames that Jed Henry has been making:

Tags: , , , , , ,

Newer entries »