Question

I’m new and starting to learn about 3D computer graphics in web browsers. I’m interested in making 3D games in a browser. For anyone who has learned both WebGL and three.js…

1. Is knowledge of WebGL required to use three.js?

2. What are the advantages of using three.js vs. WebGL?

Answer 1

Since you have big ambitions, you have to invest the time to learn the fundamentals. It is not a matter of what you learn first — you can learn them simultaneously if you want to. (That’s what I did.)

This means that you need to understand:

1. WebGL concepts
2. Three.js
3. The underlying mathematical concepts

Three.js. Three.js does an excellent job of abstracting away many of the details of WebGL, so personally, I’d suggest using Three.js for your project. But remember, Three.js is in alpha, and it is changing frequently, so you have to be prepared for that. Most people learn Three.js by studying the examples. Avoid outdated books and tutorials, and avoid examples from the net that link to old versions of the library.

WebGL. If you use Three.js, you don’t need to know how to program in WebGL, you just need to understand the WebGL concepts. That means, that you just need to be able to read someone else’s WebGL code and understand what you read. That is a lot easier than being expected to write a WebGL program yourself from scratch. You can learn the WebGL concepts sufficiently well using any of the tutorials on the net, such as the beginner’s tutorial at WebGLFundamentals.org and Learning WebGL.

Math. Again, you at least need to understand the concepts. Three good books are:

1. 3D Math Primer for Graphics and Game Development by Fletcher Dunn and Ian Parberry

2. Essential Mathematics for Games and Interactive Applications: A Programmer’s Guide by James M. Van Verth and Lars M. Bishop

3. Mathematics for 3D Game Programming and Computer Graphics by Eric Lengyel