Learn WebGL #3 - 'The First Triangle' (GL API Tutorial)

Full code available on Github!

This tutorial is my rendition of the famous "First Triangle" program that is so often the starting place for GL courses. Get ready, 'cause there is a LOT of new API calls coming your way. Is it worth all that code just for a awkward red triangle? I'll let you be the judge :) Thanks for watching!

[IzzySE]

Youbare a genius! I have been searching on books, videos, blogs, sites a complete explanation of every step of the pipeline and the javascript. And I didnt found an explanation so great as yours.
Keep on like that please!
Thank you so much!

[friar-wad]

Love this tutorial so far. I appreciate the description of what each line of code does. Some other webgl tutorials I've looked at give you a bunch of code and tell you what it does at a high level, but I'm quite interested in understanding what graphics code does at a lower level too.

[nedaugust]

Thanks so much for the tutorial. This was short, not overwhelming, and perfectly paced. Thanks, I am subscribed now.

[MuksEmmaN]

You videos are really saving my semester mark

[jaysanprogramming]

How come you don't have to set the dimensions of the canvas?
Is there a default camera view for webGL? You have set vertices and drawn them but there is no code for viewports. I don't get it.

[wcdeich]

How do you set the screen x, y, z range?

[Doti]

First of all, thanks a lot for your tutorial.
I just have a question. I copied all your code from the video, but somehow I don't get the triangle rendered in my browser. I checked the code and I don't have typos, what am I doing wrong? Is it required to run a node.js server to execute the code? (I'm running the code by opening the html file) Thanks a lot for your help!!

[poptart]

Hi I get the following error unfaithfulness syntax err missing ) after argument list line 85 but I checked and all my parenthesis are closed!

[RSTao]

Should this also work if your just loading it from your local machine instead of a server, I'm getting an error: float32Array is not defined? fixed the float error, was missing the upper case first letter, but its still not displaying. Have also uploaded it to an online server but not working properly, no errors in console so it hard for me to debug..

[weekendvlogger]

please help. me on drawing EEG signals using webgl..ppllleaaaseeee

[CCheukKa]

I spent the better part of an hour trying to debug and double check all the code but the log still says program failed to link.
The damn problem?
Ctrl+H all colour to color and there, the stupid problem solved

If you were having the same problem, you're welcome
So much frustration especially since the problematic lines are in the string code bits so you can really proof-check
I was going to commit hate but let's not start an internet war

[jcrvzz]

Anybody else hear weird animal sounds in the background around 9:59?

[yallayallayogurt]

Hey man! would you be interested in helping me figure out a solution that implements webgl? or atleast have a chat about some solution? :)

[RSTao]

Would be alot easier to follow along if you turned off auto completion in your text editor. Just a suggestion...

[behnamazizi]

at first, I attempted to learn WebGL but after watching the code... you know... I'm more attempted to back to suicide plan. :)))