152

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?

alex
  • 438,662
  • 188
  • 837
  • 957
r1nzler
  • 2,423
  • 8
  • 26
  • 30
  • 11
    Use Three.js. Period. It is exactly what West says below, while simple in theory, writing WebGL from scratch is a pain. There are so many things that almost every WebGL application will need / want to do. These things can be abstracted away from you. Also, Three.js has matured into an amazing library. If you check Google Trends or the number of SO Questions here you will see that it has pulled far ahead of the competition. – theblang Apr 30 '13 at 19:29
  • 4
    @GeorgeStocker Actually, the answers to this question have _not_ been based primarily on opinion, but on facts, references, and specific expertise. This has been a valuable post for the there.js community, and part (2) of the question is certainly acceptable. How would you recommend rewording it so it is acceptable to you -- that is, without changing the meaning/intent of the question? – WestLangley Apr 15 '14 at 04:51
  • @WestLangley I haven't heard anything but opinions in the answers given; not to mention "Pros and cons to using either [library]" is a bit too broad for Stack Overflow. – George Stocker Apr 15 '14 at 12:03
  • 2
    @GeorgeStocker Your reply is itself an opinion, and I strongly disagree with it. How would you recommend rewording the post so it is acceptable to you? – WestLangley Apr 15 '14 at 12:41
  • @WestLangley I'm not the one you have to convince. Really, you need the community to agree with you. Your best bet is to go to [Meta](http://meta.stackoverflow.com) and write a question asking a few things 1) Why is this question not a good fit for Stack Overflow 2) What can be done to make it a good fit for Stack Overflow, or 3) If you believe it's a good fit for Stack Overflow, make your case as to *why* it's a good fit. – George Stocker Apr 15 '14 at 12:58
  • @GeorgeStocker You unilaterally closed it. I am asking you. As moderator, you have a responsibility to answer my question. I will then follow your advise and make the changes you suggest. – WestLangley Apr 15 '14 at 13:17
  • The reason I'm not the one you need to convince is that without getting rid of the two questions posed ("Which do you recommend I start learning?", and "Are there any pros or cons to either"?) this question isn't and won't be a good fit for Stack Overflow. That's why I'm suggesting you take it to the community via Meta; maybe they'll see a way to make this a good fit, or maybe they'll just disagree with the closing entirely and re-open it as is. – George Stocker Apr 15 '14 at 13:33
  • 1
    Perhaps the questions could be rephrased to ask how learning WebGL is beneficial to using Three.js. The answer to that would be supported by facts, references, and expertise. – zz85 Apr 16 '14 at 16:30

8 Answers8

216

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

I hope this is helpful to you. Good luck.

riot
  • 177
  • 2
  • 7
WestLangley
  • 92,014
  • 9
  • 230
  • 236
  • what is the best site to learn about webgl concepts from start to end in easy english. Or at least whenever the author uses some 'word', he/she does so after having describe it once before so build on it. – Muhammad Umer Apr 12 '13 at 20:27
  • 1
    See the link to the Learning WebGL tutorial in the body of the post. – WestLangley Apr 12 '13 at 20:52
24

There is a very good online course - Interactive 3D Graphics at https://www.udacity.com/course/cs291 on THREE.js. This course includes assignments also to get hands-on experience. It covers all the basic concepts of Three.js and Computer Graphics

Bhupendra
  • 910
  • 9
  • 31
15

My personal thoughts are the following:

  • If you have plenty time, you could learn both, but note that WebGL is much lower level than Three.js.
  • For a first 3d project, experts suggest using a library like Three.js in order to get used to the terms and the general 3d model.
Dan D.
  • 31,836
  • 4
  • 59
  • 77
  • 3
    I agree with this. At this point it looks like it could be a good thing to have both in your toolbelt. I would start out by learning Three.JS, then do some shaders with GLSL and keep trying to learn more about WebGL all the while. – Cory Gross Aug 15 '12 at 12:08
12

Whichever direction you choose to go, I suggest you learn/polish up on your linear algebra skills. Then go ahead and learn or polish up your understanding about MVP dimensions (Model View Projection). Three.JS can abstract much of that away, but I think it's key that one understands those concepts well before getting serious about any 3D development.

I wrote an introductory article about MVP when I was first learning 3D programming with OpenGL. I realized that until I was able to explain what those transformation matrices are, and how they relate to the various dimensions/spaces, I really didn't know any 3D programming at all, though I could render objects to the screen.

Since your goal is to create games, I think you'll benefit much from learning some raw WebGL first, even if you end up using a framework like Three.js to help you write your code later.

Shaihi
  • 3,872
  • 4
  • 23
  • 47
rodrigo-silveira
  • 10,557
  • 9
  • 55
  • 98
10

"WebGL is a 2D API and not a 3D API"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

This article describes the fundamental differences between WebGL & 3d libraries like three.js.
Which made my choice between WebGL or Three.js a no-brainer.

gman
  • 83,286
  • 25
  • 191
  • 301
Bob Fanger
  • 24,735
  • 7
  • 52
  • 70
  • The quote is not from the main text of the linked page. I do partially accept the arguments stated in the linked page, though. Not about being a 2D API, but about being a rasterization API (which is suited for 2D and 3D graphics). – Elias Hasle Mar 25 '19 at 10:03
6

I came from a Unity3D background as well as Papervision3D back in the day, so I had a good understanding of how to deal with 3D space. Three.js is the way to go for your initial jump into learning how to deal with WebGL projects. The api is very good, it's very powerful and if you're coming from another 3D technology, you'll be up and running with very little time.

I spent a lot of time with Threejs.org's examples - there's a ton of them and they're very good at getting you off and running in the right direction. The docs are decent enough, especially if you're comparing them to other webGL 3D api's out there.

You might also consider getting the free version of Unity3D and the free collada (was free when I got it) exporter from their app store (Window>App store). I found it easy enough to setup my scene in Unity and export it to Collada for use with Three.js.

Also, I posted this class that I use with Three.js called neo ( http://rockonflash.com/webGL/three/neo.js ). Just add it to your project, then call Neo.JackIntoThree() and it will add the methods/properties to Object3D for use in your project. Things like DrawAllAxis() are invaluable when debugging your scene etc.

Hands down though, Three.js is a great way to go - it's flexible enough to let you write your own shaders/objects etc, and powerful enough right out of the box to help you accomplish your goals.

neoRiley
  • 437
  • 6
  • 10
4

I picked up three.js, but also jumped into GLSL and experimented a lot with three.js shaderMaterial. One way of going about it - three.js still abstracts much of the stuff for you, but it also gives you a very clean, low level access to all the rendering (projection, animation) capabilities.

This way, you can follow even something like this awesome open-gl tutorial. You don't have to set up the matrices, typed arrays, because three already sets it up for you, updating them when needed. The shader though, you can write from scratch - a simple color rendering would be two lines of GLSL. There is also a post processing plug-in for three.js that sets up all the buffers, full screen quads and stuff you need to do the effects, but the shader can be very simple to begin with.

Since programmable shaders are the essence of modern 3d graphics, i hope my answer is not missing the point :) Sooner or later, anyone who does this needs to at least understand what goes on under the hood, it's the nature of the beast. Also, understanding the 4th dimension in homogeneous space is probably important as well.

This book is good for WebGL.

pailhead
  • 4,430
  • 2
  • 14
  • 37
2

I just learnt a little of both and I feel that understand the basics of webgl, I think an introduction on webgl is sufficient and then jump into three js. It will be pretty easy once you understand the underlying concepts of WebGL. Useful links:

  1. Best Intro I have read: http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. Comprehensive tutorials: http://www.johannes-raida.de/tutorials.htm
Raj
  • 85
  • 6