Fun with WebGL 2.0 : 001 : The first Vertex

This is a video tutorial series I'm looking to put together to learn how to use WebGL 2.0. The first main goal is to reach the point in where you can parse a OBJ file, load a texture and then have viewport control to rotate around it.

For now we start with just a single vertex and the beginnings of putting together a framework that we can use down the line for varies projects beyond just making a modal viewer. Maybe a game engine? Maybe even a 3d modeling tool? Who knows.

[nesvand]

Great stuff - going to follow the series as I love getting a non-framework view of webgl.

It's also giving me a good opportunity to work out a webpack build that suits this kind of work - cheers!

[krishnadamarla]

its really cool :) great job :) pls do more. can u pls use mouse hover on functions while explaining ? sometimes i miss the flow.

[samsaraAI]

In my opinion to be the 1st video you should start slower and writing the code line by line.... just my opinion

[etisdew]

btw when you said 'congrats you have a working webgl canvas', my reaction was 'I got a rock :(' but I've since fixed it.

[seirharp]

literally cant hear anything.. the volume is so low..
:(

[appsudecasa]

I want to see errors in a <p> element and not a console.error, can you help buddy?

[stephennwakasi]

This is amazing! Everyone gather here!!!

[katsie]

Great thanks, I have my fragment shader sandbox woking with webgl 2.0

[dejoneltahan]

if you were born when this video were made you would be 8 years old

[delvorin]

I'm wondering if something has changed within WebGL or is it just me. when I created the HTML and the gl.js script I could not figure out why I was not getting the grey background and white canvas. it was getting an error of
"Uncaught TypeError: canvas.getContext is not a function
at GLInstance (VM396 gl.js:3)
at index.html:36" now I even went so far as to copy and paste the same code you had up to that point. it wasn't until I added the part about the shaders in that I was able to see the background and canvas with its 2 squares. just wondering if it is me or something has changed.
Thanks in advance to anyone that helps. P.S. Ty Sketchpunk for the tutorial series.

[jornejongsma]

About that utility class, today you wouldn't create a class that only holds static methods anyways, but okay, but why didn't you add these utility methods to your GLInstance class, while they clearly belong to that class?!

[EduardoThePro]

Uncaught TypeError: Cannot read properties of undefined (reading 'LINK_STATUS')
at ShaderUtil.createProgram (shaders.js:31:46)
at viewer.html:33:42

[doduarrow]

hi. i started watch your series. first of all i don't know .js and i have to finish my master program last 3 years i cant pass graphic. where do i start. second question is can you share this code

[obnoxiouscommenter]

I can't tell which line of code you're referring to

[luisdavid]

I never programmed JavaScript, but i understand the code has it is fairly well, my only issue is how do I run the code? hahaha

[Xabdiben]

How can an array of 3 floats, seemingly what is needed for a point to be displayed, result in a square being displayed? It seems you'd need 2 triangles to draw a square.

[philippetorgue]

why main(void) ? look at the spec : The function main is used as the entry point to a shader executable. Both the vertex and fragment shaders must define a function named main. This function takes no arguments, returns no value, and must be
declared as type void: void main() {....}

[berkayemreturhan]

volume of this video is -50 by default

[nobodyonearth]

Great tutorial, but the voice is very boring and hard to follow. Thank you!