How do I learn WebGL the fast way?

Question

I am learning WebGL these days, but I found that it's really hard to understand the pipeline.

Is there any head first WebGL tutorial online ?
Should I learn GLSL ?
The code to draw something with WebGL is too complex, is there any way to reduce the code lines?

I'd start here (http://games.greggman.com/game/webgl-fundamentals/) then check out some of the other links below — gman, May 06 '13 at 16:41
@gman, (games.greggman.com/game/webgl-fundamentals) is by far the best resource listed here. — Foreign Object, Aug 13 '14 at 18:50
I'd recommend this Skillshare tutorial: https://skl.sh/2shhq00 — Alexander Buzin, Jun 25 '18 at 10:38
**The accepted answer was arguably a bad resource and is offline now. I'd recommend** https://webglfundamentals.org (note given the question is closed no one can add a better answer). I could edit the accepted answer but I don't feel comfortable changing it so drastically. Maybe @Abstract Algorithm will consider an edit or maybe they still believe it's a good resource even in the archive. — gman, May 15 '19 at 08:38
If anyone looking for a video tutorial , [here's](https://www.udemy.com/course/webgl-internals/?referralCode=6E7843BC98639EAB0377) one on udemy. — graphics123, Apr 05 '20 at 14:30

Abstract Algorithm · Accepted Answer · 2018-11-13T10:27:21.803

40

http://learningwebgl.com/blog/?p=11 (dead link as of Nov 2018, backup: https://web.archive.org/web/20180615095219/http://learningwebgl.com/blog/?p=11)
Yes, I could recommend Light House 3D: http://www.lighthouse3d.com/tutorials/glsl-core-tutorial/
It's not that complex, just focus on the code written on Learning webGL. I wouldn't recommend working with some other library/engine at the start. Learn basics and later use libraries to speed up your coding.

Learning webGL is great place to start, probably best. Don't hesitate to read from as many resources you can. Opera developer, Mozilla Hacks, Light House 3D, Scratch a Pixel, Aerotwist (http://www.aerotwist.com/tutorials/an-introduction-to-shaders-part-1/ more shaders)... It's very difficult at the beginning, but later you'll get the grasp of the pipeline and way of thinking. It takes time (1-2 months to learn only basics), but be persistent.

Hope this helps.

edited Nov 13 '18 at 10:27

answered May 06 '13 at 10:30

Abstract Algorithm

6,601
3
28
42

I hate the learningwegbl.com site because the author's English skills are so poor to an extend that some passages are completely incomprehensible. – doABarrelRoll721 Jan 05 '16 at 10:51
8

@doABarrelRoll721 learningwebgl.com* extent* ;-) – Olson.dev Mar 25 '16 at 17:33
6

@doABarrelRoll721 If you think their English is not good, maybe you can help them to revise their posts! That would be awesome – Mohammad Kermani Jul 14 '16 at 06:46
@Olson.dev, now that is hilarious – Miguel Coder Jul 18 '18 at 20:08
The blog link is dead. Happen to know what the new link is, if there is one? – Mike 'Pomax' Kamermans Nov 13 '18 at 02:16
It seems that server is currently maintained or has some access problems. I've added the fallback URL via web archive (see up). – Abstract Algorithm Nov 13 '18 at 10:28

score 9 · Answer 2 · edited Jul 12 '13 at 10:32

9

There are interactive tutorials here: http://www.webglacademy.com
I think it's cool because you can change your code, test it again, and it is step by step.

You can also check webgl lesson on http://www.learningwebgl.com
Then, when I want to search some help about a specific webgl API/GLSL command, I search on http://www.opengl.org/sdk/docs/manglsl/

edited Jul 12 '13 at 10:32

Sean Bone

2,791
5
27
45

answered Jul 12 '13 at 10:06

Mike

91
1
2

score 7 · Answer 3 · answered Jun 04 '13 at 05:32

7

This is the best tutorial I have found so far!

http://my2iu.blogspot.in/2011/11/webgl-pre-tutorial-part-2-drawing-2d.html

answered Jun 04 '13 at 05:32

Bhavin Shah

1,187
12
14

3

http://my2iu.blogspot.in/2011/11/webgl-pre-tutorial-part-1.html - The part 1 post is also awesome. – mawaldne Dec 12 '13 at 20:21

score 2 · Answer 4 · answered May 06 '13 at 02:55

2

Probably, but I don't know it.
Yes; in order to render anything with WebGL, you need a shader. GLSL is the language of shaders, so if you want to render anything, you'll need to use GLSL.
Yes; use a library like Three.js.

answered May 06 '13 at 02:55

icktoofay

117,602
18
233
223

How do I learn WebGL the fast way?

4 Answers4