This is the best webgl2.0 tutorial on youtube. well edited video, clear pronunciation, no complicated math, explain each line of code and accelerated code typing. Can't believe it is free.
I have been looking for a webgl playlist for a while.. I got stuck at sprite sheets, then I stumbled upon this playlist... I have just decided to start again from scratch using this playlist😅 Your explanation makes one understand exactly how webgl is working... Thank you 🙏
Seems like a very good course. Thank you for sharing this and looking forward to the rest of lectures! I came here after learning threejs with coding own shaders, but then I figured transform feedback isn't really possible or really complicated to do with threejs. I see that's the last lesson in this playlist, and after that I hope I could somehow implement that part into what I've done with threejs. One question though: I saw in one of the conversation below about webgl or threejs, but isn't threejs just a library to use webgl easier?
I haven't done any three.js work in several years (and before I started learning any WebGL), but I'd say that your description is accurate -- though it does also fall back to use the Canvas API when WebGL isn't available, so it's somewhat API-agnostic. And as you've experienced, it doesn't cover all possible use cases for a 3D graphics programmer, which is not surprising since WebGL lets us do a pretty amazing range of things. That said, I think that learning WebGL first will probably make your Three.js learning experience a lot easier, and learning Three.js first will probably make you think, "There must be some way to do that because I did it before in threejs."
Thanks for the useful background knowledge! If there is a "thanks button" or a link to donate, I think lots of people including myself would be willing to contribute.
Cool explanations my friend. One question. I am getting this issues when loading the page . ERROR: 0:2: '' : No precision specified for (float) ERROR: 0:3: '' : No precision specified for (float) ------- Issues resolve. There is not error or what so ever but I don't get anything no the screen. Thatst the hardest part i guess. `; Any idea?
Sounds like an error in your fragment shader. Fragment shaders require a precision for floats. You can try this near the top of your frag shader source code: `precision mediump float;` I also have a video on precision in this series. Also, be careful about not mixing up your source code strings. When calling `createShader()` and `shaderSource()`, make sure that you specify the correct shader type. If you accidentally try to compile vertex shader code as a `gl.FRAGMENT_SHADER`, you'll usually get errors like these.
@@osakaandrew thanks man. i did figure it out. No I am not getting any errors but the page does not show anything. :P The code is identical to yours so it drives me crazy :P
Thats the code currently: function canvasInit() { const c = document.getElementById("canvas") as HTMLCanvasElement; if (!c) console.error("no canvas detected"); const w = (c.width = window.innerWidth); const h = (c.height = window.innerHeight); return { w, h, c }; } window.addEventListener("resize", canvasInit, false); let { c: canvas } = canvasInit(); const gl = canvas.getContext("webgl2") as WebGL2RenderingContext; if (!gl) console.error("Webgl2 is not supported by your browser"); const vrtxShdrSrc = `#version 300 es out vec4 position; out float PointSize;
Ah. Your vertex shader main should be: void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 150.0; } Explanation: GLSL has several built-in variables. These are all pre-declared by WebGL, so you don't need to do anything but populate them. You don't have to declare them and you don't need to specify them as output variables. `gl_Position` is the vertex position value. And `gl_PointSize` is the width and height of the point (only for gl.POINT primitives). I know it's super confusing that, by convention, we use `gl.name` (gl-DOT-name) in JS, and `gl_Name` (gl-UNDERSCORE-name) in GLSL. It tripped me up too when I started. If I started this video series again, I would probably use a different name for the `gl` rendering context variable name.
@@osakaandrew omg so tiny mistake. I tried all caps combos :P. Thank you my friend. A general question. Would you move to threejs after sometime if you want to get into 3d staff on the web or you would stick to webgl. In other words do you have a future by having a career only knowing webgl(i mean no framework)?
Web browser. It is just HTML+JavaScript, using Chrome or Firefox or Safari or Edge or a mobile OS WebView. developer.mozilla.org/ko/docs/Web/API/WebGL_API
for const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader,vertexshadersource); this has an error when trying to use it due to typescript typing. Will i have to make a !vertextshader return statement everysingle time i have a new shader?
Are you getting a warning or an error? (Also, make sure your variable names are correct, including case -- so "vertexShaderSource" is a different variable from "vertexshadersource" because of those case differences).
@@osakaandrew yeah, I had changed the name. I try to change stuff like that while following tutorials. So basically my type script is telling me that the return type is shader something |null and because of that I have to put a gaurd after every function that has the possibility of returning null. I see ya don't have to deal with it and I was more or less wondering why. Also, do you know of a good written source for webgl2? I could only find webgl 1 tutorials. One last thing, is there a native matrix math library in webgl2? Because a webgl 1 tutorial imports some matrix lib to handle the vectors. I find it silly that a shader program doesn't have this natively.
Ah. I see. You likely have strict null checking enabled in your TypeScript (or that's how vanilla TS ships now? You can disable it for your project by adding to your .tsconfig compiler options with `"strictNullChecks": false`. My own environment is several years old, so I honestly don't know what I'd get on a new setup. I've always liked the idea of non-nullable types being forbidden by default, but it only works if all your libraries play along and most don't. If you can get your hands on it, Real-Time 3D Graphics with WebGL 2 is a good book on the basics. It's a basic introduction that just has all the WebGL 2 code included. And Gregg Tavares updated his webglfundamentals.org site with webgl2fundamentals.org/. Beyond that, it's a really good idea to get comfortable reading OpenGL 3 ES documentation. But for sure, one of the biggest challenges for newcomers to WebGL is the confusing documentation and out-of-date tutorials (and I say this knowing that in 3 years this series will be part of that problem). For vector math, I have yet to find a library I really like, so I usually write the functions I need myself. For games I prefer using an "impure functional" style, where the matrices are mutated by default since it doesn't produce anything your garbage collector will have to deal with later. You usually end up having to implement fewer than 10 functions to get everything working and you get an API surface that makes sense. Interestingly, OpenGL used to have a lot of vector math in it but that got all removed with version 3. The projection functions most matrix libraries use today still mostly follow those original function signatures.
This is the best webgl2.0 tutorial on youtube. well edited video, clear pronunciation, no complicated math, explain each line of code and accelerated code typing. Can't believe it is free.
Very nice atmosphere and speed. I will go with this series.
This is an amazing series! It makes something very scary and complex seem straight forward and easy. Thank you!
I have been looking for a webgl playlist for a while.. I got stuck at sprite sheets, then I stumbled upon this playlist... I have just decided to start again from scratch using this playlist😅 Your explanation makes one understand exactly how webgl is working... Thank you 🙏
Thank you for this exquisite content 👌🏼
looks like a very well made series. I'll be following this
Thanks. This is very noice series
Seems like a very good course. Thank you for sharing this and looking forward to the rest of lectures! I came here after learning threejs with coding own shaders, but then I figured transform feedback isn't really possible or really complicated to do with threejs. I see that's the last lesson in this playlist, and after that I hope I could somehow implement that part into what I've done with threejs. One question though: I saw in one of the conversation below about webgl or threejs, but isn't threejs just a library to use webgl easier?
I haven't done any three.js work in several years (and before I started learning any WebGL), but I'd say that your description is accurate -- though it does also fall back to use the Canvas API when WebGL isn't available, so it's somewhat API-agnostic. And as you've experienced, it doesn't cover all possible use cases for a 3D graphics programmer, which is not surprising since WebGL lets us do a pretty amazing range of things. That said, I think that learning WebGL first will probably make your Three.js learning experience a lot easier, and learning Three.js first will probably make you think, "There must be some way to do that because I did it before in threejs."
Thanks for the useful background knowledge! If there is a "thanks button" or a link to donate, I think lots of people including myself would be willing to contribute.
Cool explanations my friend. One question. I am getting this issues when loading the page .
ERROR: 0:2: '' : No precision specified for (float)
ERROR: 0:3: '' : No precision specified for (float)
-------
Issues resolve. There is not error or what so ever but I don't get anything no the screen. Thatst the hardest part i guess.
`;
Any idea?
Sounds like an error in your fragment shader. Fragment shaders require a precision for floats. You can try this near the top of your frag shader source code:
`precision mediump float;`
I also have a video on precision in this series.
Also, be careful about not mixing up your source code strings. When calling `createShader()` and `shaderSource()`, make sure that you specify the correct shader type. If you accidentally try to compile vertex shader code as a `gl.FRAGMENT_SHADER`, you'll usually get errors like these.
@@osakaandrew thanks man. i did figure it out. No I am not getting any errors but the page does not show anything. :P The code is identical to yours so it drives me crazy :P
Thats the code currently:
function canvasInit() {
const c = document.getElementById("canvas") as HTMLCanvasElement;
if (!c) console.error("no canvas detected");
const w = (c.width = window.innerWidth);
const h = (c.height = window.innerHeight);
return { w, h, c };
}
window.addEventListener("resize", canvasInit, false);
let { c: canvas } = canvasInit();
const gl = canvas.getContext("webgl2") as WebGL2RenderingContext;
if (!gl) console.error("Webgl2 is not supported by your browser");
const vrtxShdrSrc = `#version 300 es
out vec4 position;
out float PointSize;
void main()
{
position = vec4(0.0, 0.0, 0.0, 1.0);
PointSize = 150.0;
}
`;
const frgmntShdrSrc = `#version 300 es
precision mediump float;
out vec4 fragColor;
void main()
{
fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const program = gl.createProgram();
const vertex_shader = gl.createShader(gl.VERTEX_SHADER);
const fragment_shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertex_shader, vrtxShdrSrc);
gl.compileShader(vertex_shader);
gl.attachShader(program, vertex_shader);
gl.shaderSource(fragment_shader, frgmntShdrSrc);
gl.compileShader(fragment_shader);
gl.attachShader(program, fragment_shader);
gl.linkProgram(program);
gl.useProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.log(gl.getShaderInfoLog(vertex_shader));
console.log(gl.getShaderInfoLog(fragment_shader));
}
gl.drawArrays(gl.POINTS, 0, 1);
Ah. Your vertex shader main should be:
void main()
{
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
gl_PointSize = 150.0;
}
Explanation: GLSL has several built-in variables. These are all pre-declared by WebGL, so you don't need to do anything but populate them. You don't have to declare them and you don't need to specify them as output variables. `gl_Position` is the vertex position value. And `gl_PointSize` is the width and height of the point (only for gl.POINT primitives).
I know it's super confusing that, by convention, we use `gl.name` (gl-DOT-name) in JS, and `gl_Name` (gl-UNDERSCORE-name) in GLSL. It tripped me up too when I started. If I started this video series again, I would probably use a different name for the `gl` rendering context variable name.
@@osakaandrew omg so tiny mistake. I tried all caps combos :P. Thank you my friend.
A general question. Would you move to threejs after sometime if you want to get into 3d staff on the web or you would stick to webgl. In other words do you have a future by having a career only knowing webgl(i mean no framework)?
webGL2를 쓰는걸 보니까 유니티로 하시는 것 같은데, 방법 좀 알려주세요.
I don't use Unity. I cannot help. I'm sorry.
@@osakaandrew 유니티를 쓰지 않고는 어떻게 Webgl2를 쓰는 건가요?
Web browser. It is just HTML+JavaScript, using Chrome or Firefox or Safari or Edge or a mobile OS WebView.
developer.mozilla.org/ko/docs/Web/API/WebGL_API
I wish I had this to help me out before I bombed my class lol
for
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader,vertexshadersource);
this has an error when trying to use it due to typescript typing. Will i have to make a !vertextshader return statement everysingle time i have a new shader?
Are you getting a warning or an error? (Also, make sure your variable names are correct, including case -- so "vertexShaderSource" is a different variable from "vertexshadersource" because of those case differences).
@@osakaandrew yeah, I had changed the name. I try to change stuff like that while following tutorials. So basically my type script is telling me that the return type is shader something |null and because of that I have to put a gaurd after every function that has the possibility of returning null. I see ya don't have to deal with it and I was more or less wondering why. Also, do you know of a good written source for webgl2? I could only find webgl 1 tutorials. One last thing, is there a native matrix math library in webgl2? Because a webgl 1 tutorial imports some matrix lib to handle the vectors. I find it silly that a shader program doesn't have this natively.
Ah. I see. You likely have strict null checking enabled in your TypeScript (or that's how vanilla TS ships now? You can disable it for your project by adding to your .tsconfig compiler options with `"strictNullChecks": false`. My own environment is several years old, so I honestly don't know what I'd get on a new setup. I've always liked the idea of non-nullable types being forbidden by default, but it only works if all your libraries play along and most don't.
If you can get your hands on it, Real-Time 3D Graphics with WebGL 2 is a good book on the basics. It's a basic introduction that just has all the WebGL 2 code included. And Gregg Tavares updated his webglfundamentals.org site with webgl2fundamentals.org/. Beyond that, it's a really good idea to get comfortable reading OpenGL 3 ES documentation. But for sure, one of the biggest challenges for newcomers to WebGL is the confusing documentation and out-of-date tutorials (and I say this knowing that in 3 years this series will be part of that problem).
For vector math, I have yet to find a library I really like, so I usually write the functions I need myself. For games I prefer using an "impure functional" style, where the matrices are mutated by default since it doesn't produce anything your garbage collector will have to deal with later. You usually end up having to implement fewer than 10 functions to get everything working and you get an API surface that makes sense.
Interestingly, OpenGL used to have a lot of vector math in it but that got all removed with version 3. The projection functions most matrix libraries use today still mostly follow those original function signatures.