WebGL Tutorial 01 - Setup and Triangle
HTML-код
- Опубликовано: 13 янв 2025
- WebGL is a powerful tool for adding graphics to your client side web application. In this video, I explain the basics of how WebGL works, and guide you through writing the code to display a triangle on the screen.
A live demo of the result of this tutorial is available at www.kamaron.me/...
In this series, I will not be using any external libraries like Three.JS. These tutorials are intended for people comfortable (but not necessarily experienced) with JavaScript and HTML, with or without any prior graphics programming experience. Ideally, I would like anybody watching my full tutorial set to be able to create a 3D video game from scratch using WebGL.
Source code available at github.com/ses...
Diagram in video: www.lucidchart...
Other fantastic WebGL resources:
antongerdelan.n...
webglfundamenta...
www.chromeexpe...
developer.mozi...
msdn.microsoft...
Any tutor who dares to say: "Actually, I have no idea why", earns my respect right away!
"...I'm not gonna call it 'webglcanvas' cause I don't want you to think that's a special name or anything."
- Already a better instructor than about 50% of the books and humans I've encountered, just for that.
Thanks! I was a TA for a good chunk of my time in college, and names threw people off quite a bit. There are cases where names are significant, so when teaching something I try to make the names obviously not fixed - "var gl = canvas.getContext('webgl')" is a good counter-example, I don't think I've seen any resources that name their context something that isn't the lowercase letters "gl".
You're really good at teaching. For people just getting started - I'm finding a combination of this, 'webglfundamentals' and 'the book of shaders' incredibly complimentary.
Thanks for the great video. I've been looking for a webgl tutorial without using any APIs or additional libraries all day, and yours is the only one I've been able to learn anything from! Got mine working first time :)
Awesome! That's fantastic to hear as a content creator :-) I made these because at my job (Lucidchart) we wanted to implement WebGL rendering for speed, but Three.JS wasn't appropriate for our needs. Most of the tutorials out there are for Three.JS specifically. Anywho, I'm glad you were able to learn from mine!
Having no experience with openGL or 3D graphics, I read the Mozilla tutorial before watching this and hoped that a tutor would be able to clarify what each constant and method was actually doing to set up webGL. You did exactly that! I feel super confident that I understand what's going on with the initialization process, now! Thank you so much!
If there were official guidelines on how to make a proper, high quality tutorial, then this would conform to it like no other. Really well done and had an easy time following along. Thanks!
Thanks! I'm glad you appreciated the tutorial! There's a couple things I would change if I could do them over (fullscreen the code with picture-in-picture for the result or vice versa, more disclaimers about future JavaScript versions) but overall I'm really pleased with how these turn out.
I wonder if there is a good series of guidelines out there? I haven't seen any, though I do see a lot of coding tutorials on the web.
ThinMatrix also does an excellent job in his videos, he does OpenGL and Java.
I did! I've had a fun time playing it, that kind of game is very soothing, which helps me a lot when I'm over-stressed. I love that channel and was glad to be able to buy the game he made!
@@IndigoCode Small suggestion. If you had remembered to bump up the fonts or zoom into everything it would have been perfect. It's a bit hard to read some of the text on your screen's resolution. Great job either way.
What an absolute legend. The way you set up the code is WAYYY cleaner, easier to use, and easier to follow than how we are taught at my college. Greating teaching style. Thanks a lot
Thanks for letting me know you liked it! I appreciate the comment
finally a useful tutorial for graphics programming
+Joe Doherty Sweet, I'm glad you liked it!
i was so worried when i think the text is gonna be small for the whole vid, but finally u enlarge it, thx for the vid btw XD
@43:58 -> Yes, I was yelling at the screen, but only because your tutorial and style had been so amazingly clear that I actually understood what the error was. Thanks for putting the effort into this excellent tutorial. Pacing was good; was able to follow along in real-time -> but you are an incredible fast and accurate typist, had to hit pause a couple of times. :) Looking forward to the next one.
Thanks for the comment! I really appreciate hearing when people are able to learn and enjoy the tutorials.
Best of luck in your WebGL journey!
I was yelling because it finally worked for me...
After writing 100+ lines of code, it finally worked
This is a great tutoral man. Thank you for posting this brother
I'm really glad you made a tutorial like this, and not just "here is how you set up Three.js with jQuery".
+aiklarung I'm glad you appreciate it! That's EXACTLY what I was going for. I was working on some WebGL code for work last year and couldn't find any really good walkthroughs on how it works, that's why I made these :-)
Perfect tutorial! It was really instructive!
I want to thank you for explaining all the details about how WebGL works and detailling why we do each thing we do instead of just writing them down.
Nice job, keep it up!
Glad you liked it, thanks for the comment!
clear and concise walk-through for a webgl beginner, appreciate your work!
So useful. It's hard for me to wrap my head around this with reading alone. Thank you!
Really like this tutorial. Straight forward but the instructor still takes time to explain each step in an understandable manner. Thank you for this
just a heads up, if your using a new version of Chrome, you don't need to make an array for the vertex shader text and join it together like that.
All you need is a multiline string which looks much nicer:
var vertexShaderSource = ` code in here`;
these side ways quotes is under the tilda and can be used for multiline string in JavaScript
^ This - anyone reading this, use these instead. They're much better, and when your shaders depend on values given initialization-time via JavaScript, you can say something like `uniform mat4 boneBuffer[${MAX_BONE_COUNT}]` instead of "uniform mat4 boneBuffer[" + MAX_BONE_COUNT + "];", which helps reduce the number of silly mistakes that happen.
Unfortunately, when I recorded these, most of ES6 was still unsupported, so the thing I showed was not ideal.
To everyone reading and watching this in the future: it's ` ` (downwards to the right) not ' ' and not ´ ´. And you can just write the shaders in there like they were their own file. And I can only recommend this video (while normally being pretty critical about explanations and stuff) !
This was genuinely a better tutorial than anything my uni provided. Kudos to the max.
Thanks, I'm glad you enjoyed it!
I've been struggling for a while with webGL, and this video is the best resource i've found online that has helped a lot, and actually made webGL mildly interesting to me now. Thanks a lot, and keep it up!
Thanks! I'm glad it did the trick for you!
Separating files is a really good practice, not an old fashion thing. Also, thanks for this vids!
Agreed! If I could go back and re-make these, I'd probably separate out a couple of utility classes / methods to simplify the main file code a bit, especially in the later videos that get pretty long.
i was for about a minute asking myself: "¿why offset 3?... he is using 2d coordinates... ¿should it not be offset 2 instead?" so i smiled from ear to ear when you said we were hopefully yelling at the screen :)
Great tutorial! Much better than trying to figure it out by trial and error as i was doing before. I hope more people come here first when learning about WebGL Concise and Effective!
Quick tip for anyone coding their GLSL in their Javascript file. Javascript does allow for the use of backticks to write multi-line strings.
So for example:
let vertexShader = ["...", "...", ... "..."].join("/n");
Can be simplified to:
const vertexShader = `
// GLSL Logic...
`;
You can even keep your GLSL in an object like this:
const SOURCES = {
vertex: `
// Vertex Logic
`,
fragment1: `
// Fragment 1 Logic
`,
fragment2 `
// Fragment 2 Logic
`
};
And use those shaders as such:
let colorShader = compileShader(SOURCES.vertex, SOURCES.fragment1);
let anotherColorShader = compileShader(SOURCES.vertex, SOURCES.fragment2);
This is a flexible and readable approach to storing your GLSL scripts within your javascript file. And most modern IDEs will allow you to fold each individual multi-line string, making it much easier to debug and asses.
Another way to keep shaders is This is my example of triangle in TypeScript in Playground: next.plnkr.co/edit/hGGHKCo4UidasNirSPJF?preview
Great video! You're really good at teaching, very clear with your explanations and its very easy to follow your reasoning. Thanks for this amazing tutorial 😄
Thank you! I've been meaning to redo these forever (it's pretty out of date now) but I'm always happy to hear they're still useful for people.
thanks for the webgl series, I get instant understanding and concepts from your videos!
Great to hear!
Thanks for the tutorial! Had to go through a bunch until I found this one that actually explains what's happening. Really easy to understand.
+Alexa Syrie Thank you, I'm glad you found it clear and helpful :-)
This is probably the most useful tutorial on webgl I've found so far. Well explained and it unlocked a few things I was struggling with. Thank you!
Thank you! I'm glad you found it helpful.
This helped me a lot more than my textbook! Thanks dude! Two thumbs up and subscribing. Cheers!
Awesome, thanks! I'm glad it helped! Graphics programming is so foreign from a standard programming background, I'm glad everything made sense to you!
You are very good at explaining the concepts.
Thanks!
THANK YOU!! Loved this tutorial and loved how you explained every line of code because it showed you have a strong understanding of what was happening and it answered a lot of questions where I was confused.
Thank you, and I'm glad you learned a lot!
Finally, a webgl tutorial that works!!
Great video, I really appreciate your thoroughness! Drawing a triangle is the perfect way to jump into webGL. I can't wait to check out the next in the series.
Awesome! I'm glad you liked it, I hope you enjoy the rest of the series as well!
Thank you for this,
I'm not a coder by any means, but i learned a lot about syntax doing this tutorial while watching.
Thanks!
Absolutely! I'm glad you could learn from it. Props to you for following along if you're "not a coder," graphics programming is pretty intense as coding goes.
Amazing tutorial, thank you for all your work. Sometimes videos like these are the only places where you can learn about a new technology. I'm sure thousands of people will be able to learn about webgl thanks to you man, cheers.
Still doesn't take me away from the fact that this is the hardest to grasp and advanced graphical tool i ever came across with! I just wonder if there's any sense analyzing every line of code I rewrote from your video or just focus on the main attributes and copy and paste the rest.. I'm rambling. Thanks again!
Sure thing! I'm glad you learned from it. Graphics programming is complex, no way around it, but if you keep at it things will start to make sense. It took me a few passes at writing little programs like this before I started to really understand what is going on - the good news is that WebGL is much easier to get started with than OpenGL or Direct3D.
Thanks for this video. I've read a few tutorials about WebGL but this has been by far the best so far. Perfect balance between theoretical explanation and practical implementation.
One small note: at 29.00, you say that we know that each point has 2 values, an X and Y, because of the vec2 in our _fragment_ shader. I believe you meant to say "vertex shader" (unless I'm just much more confused than I think I am!). I believe RUclips annotations can be used to clarify this point without needing to edit the video.
Good catch, thanks for telling me about it - I put up an annotation. Thanks for the compliment too, I'm glad you liked the video! I always miss a handful of things, I watch the videos two or three times completely before making them public (checking quality, making sure I don't accidentally have sensitive information visible, etc) but with long videos I'm bound to miss something.
If I had found this tutorial earlier I wouldn't have had any problem with OpenGL I think. But additionally it seems to me that WebGL has far better naming than some other OpenGL implementations. Loving it! :)
Excellent tutorial. You explained very well the 'how' and 'why' of all the 'boiler plate' stuff.
Thanks! One of the problems I have with a lot of OpenGL tutorials out there is that they give you some absurd amount of boilerplate without explaining any of it, so you end up not being able to do anything OpenGL unless you're using their starter code. I didn't want to do that in these.
Thanks man, You're awesome :D
I'm going straight to your next ones, can't wait to see what's next.
Great! I hope you enjoy the next ones as much as you did this one!
I miss your tutorials man. you get me started using WebGL.
Thanks! I appreciate it. I'm looking into making a few more, I finally have time to start doing this again.
@@IndigoCode Yey!! BTW by following your tuts and reading some articles on webgl online, i made this i hope you liked it
anuraghazra.github.io/ShaderExpo
There's a triangle on my screen and it's beautiful! Great tutorial!
By the way, JavaScript added `mulitline` strings using backticks some time after this tutorial was uploaded.
Sweet, I'm glad you got through successfully, that triangle is hard to get first try!
There's a few new things, this series also uses a third party "async" library that's super old now that promises and async/await are common... I have a more modern series, but it's only about half finished right now
@@IndigoCode Looking forward to it!
Thanks so much for this! And yes I did feel very good about myself for avoiding the offset error, even though I made several spelling errors instead causing my own compilation issues. 😁
Thank you so much for these videos! Finally I understand a lot of things! In next days I'll see also the other tutorials, but today this video makes me very happy (in class I was really frustrated) :)
I'm glad it helps! Graphics programming is no walk in the park, good luck as you continue to learn how to do it.
i liked and subscribed really nice tutorial and by the way i was astonished to see 4k as quality of the video
Thanks, I'm glad you enjoyed it! Yeah, 4K was _definitely_ overkill - for these I used ShadowPlay to record everything, and my home dev setup does use a 4K monitor. For just drawing a triangle to the screen, it's a bit much, but I didn't see a point downsampling it.
Thanks man, really great tutorial to start with webgl! Nice work...
It's quite nice to switch to WebGL after the struggle with OpenGL's setup. It's the same thing but way easier and human-readable.
I was totally yelling at the screen.
Instant Sub.
I usually used canvas 2d object but thought of going 3d using webgl cuz I have heard name of it... I guess 2d is better much simple but still great tutorial.. Not gonna create anything in 3d but just gonna learn how to do it
Edit: I just noticed that this guy only has 3.9k subs, you deserve way more
For someone who has been using basic HTML5 Canvas draw calls for the last 6 months, that is not a boring triangle....
omg... the old league client logo.
the memories... i love the tutorial. i thought it was recently made, but the moment i seen the icon i was like HOLD UP
Excellent tutorial, many thanks for your time and energy. Suggestion: Give an annotation at the beginning of the video to let folks know that you'll be enlarging the size of the code editor text shortly. I almost bailed because it was impossible to read and was just expecting the whole video would be that way.
Thank you, this was exactly what I was looking for! Great tutorial, keep it up :)
+Tim Weißenfels Thanks! I'm glad you enjoyed it!
Actually, it was quite an interesting triangle to build! N
ot boring at all.
Great tutorial on basic WebGL without something like THREEJS!
Thanks! Three.JS is fantastic, but it's really good to know the underlying tech.
Thank you so much for this great tutorial! Nicely explained and I appreciate the links to the WebGL resources in the description.
couldn't be any better. exactly what I wanted to learn! Looking forward to watch your next tutorial! Great work! keep doing great!
you explain everything very easy and simple. love it. understand it.
+Behzad Abdollahi Thanks, I'm glad you liked it! The tech is really great, I'm glad it made sense to you!
+IndigoCS :)
The reason for "precision mediump float" is because GPU on different systems have different precisions for floating points. I believe for vertex shader the default is highp but for fragment shader there is no default so a precision needs to be specified. mediump is most widely used and supported on most systems, it's floating range is 10 bit. If highp is used for fragment shader there might be a frame rate drop due to performance issues. Hope that helps.
That does, useful information! Thank you!
You don't need to hard code the number of vertices into the gl.drawArrays() function. You can do triangleVertices.length / 2 which is still 3 for your example.
Good catch! That's much better style, too. "triangleVertices.length / 2" tells whoever is reading the code later a lot more information than "6".
Bless your soul. You're doing God's work. If you ever did an updated one on webgl2 that would be amazing.
I'm glad you liked the video! I'm in the middle of re-doing these for WebGL 2, the first two videos are out on my channel.
The fundamentals are mostly the same in WebGL 1 and 2, but JavaScript has changed a LOT since I made these old videos.
AWESOME! You just got a Sub!
Looking forward to the next lessons
and thank you so much for making these videos :)
+Antari24 Sweet! I'm glad you liked this one, I really liked making it!
Your tutorial is very useful, brilliant !
Thank you so much for this complete introduction
great series of tutorial. I am learning a lot. thank you for sharing. Also, ps, you could have probably written the code for the whole of the series by the time I finish writing this one comment. Yes I am complimenting your typing skills :D
nice and up to date tutorials. keep it up :)
+David Pop I'm glad you found them good, I'm definitely not tired of making them yet ;-)
Thank you sooooo much, help me a lot to understand the basics!
I'm glad you liked it!
I like to use one line of code to get both variables out of the way:
var canvas = document.querySelector("canvas"), webgl = canvas.getContext("webgl");
Wow! all that code to get a triangle on screen!
Welcome to the wonderful world of graphics programming :-) HTML/JavaScript/WebGL even gets rid of a lot of the code you'd need in other languages, especially C++.
Drawing a triangle is the "hello, world!" of graphics programming. This tutorial used 121 lines of JavaScript to do it, the equivalent Vulkan program is about 900 lines of C++ (see vulkan-tutorial.com).
Most of that is boilerplate that doesn't have to be repeated, though - most of those 121 lines don't have to be repeated if you want to draw a bunch of triangles and move them around. Same with Vulkan, to be fair.
Wow!! huge difference! if the cost of being part of the wonderful world of graphics is writing a little longer code, I would do it.
I ve seen amazing 3d examples done in the web browser using Webgl which got me overwhelmed. Can't wait to gain this power!
And glad we have enough resource to learn from, like yours.
Amazing video tutorial about webgl.
Thank you for this useful tutorial.
You're welcome, I'm glad you enjoyed it!
Here is another heads up, if you are using webpack and ES module for your project, you can actually use require to import your shader text as files.
Just like :
const vertexShader = require('./shaders/vertex-shader.glsl')
(And of course you have to install shader-loader to compile your shader files modules)
And then you can even install glsl lang support for your shader files if you are using VScode.
Great tutorial! Thanks for putting this together.
Sure thing, I'm glad you enjoyed it! I really liked making these videos.
For those who really new to WebGL (like me) I strongly recommend to start learning from here, MDN: developer.mozilla.org/en-US/docs/Learn/WebGL Web GL has a lot of uncommon API (if you've never done any game programming before) that needs to be understood properly, otherwise it would be really easy for you to get lost. In MDN you'll learn it step by step starting from the most basic concept of WebGL itself instead of dropping you right in the middle of the jungle.
Very good. I've learned so much in a short time... thank you.
Note:
You can use backticks ` with ES6 style to set up the strings for vertex and fragment shader texts more readable. i.e:
var fragmentShaderText =`
precision mediump float;
varying vec3 fragColor;
void main(void) {
gl_FragColor = vec4(fragColor, 1.0);
}
`;
Thanks for the comment! I'm glad you liked the video!
As for the backticks, those are way better. When I recorded these (early 2016), ES6 wasn't widely supported enough in browsers for me to feel comfortable using the features, but in hindsight I probably should have just future-proofed them by using that syntax anyways (Chrome supported back ticks).
Just lovely to watch!
Sweet! I'm glad you liked it!
Amazing tutorial!
+The Gupta Project Thanks! I'm glad you liked it!
Thank you soooo much for this great tutorial!
You are so welcome, I'm glad you liked it!
Its incredible that you need 120 lines to daw a one single triangle. LOL. Thanks for the tutorial!
Such is graphics programming, the best Vulkan tutorial I've found uses something crazy like 900 lines for it's "Hello, World!" program... I think you can do it with around 40 in WebGL, if you cut out comments, skip error checking, and only draw one frame.
I'm glad you liked the tutorial!
Gonna start with this tutorials now! Wish me luck!
Welcome to the channel, I hope you learn a lot! Good luck!
This is awesome thanks for making this.
Glad you enjoyed it, it was fun to make!
Wow what a great tutorial! Thank you so much!
3 years later still one of the best tutorials on RUclips. Thanks again for posting this!
Amazing tutorial. Thank you very much!
Thanks! Glad you liked it!
A WAYYYYYYYYYYYYYYYYYYYY easier than creating in c++.
Yep! I advocate starting with graphics programming in WebGL, even if your goal is to move to C++. If you use C++, there's a lot of stuff only slightly related to graphics programming you have to do - link in several libraries (much more difficult in C++), create a window and rendering context (also much more difficult), and a bunch of COM garbage if you're using DirectX.
With WebGL, you can focus pretty much exclusively on the graphics concepts - data buffers, shaders, texture bindings, draw calls, etc., with minimal language / environment overhead. "Building" the code is easy, "linking" libraries is trivial, and setting up a context is two lines of code (one HTML, one JS).
The actual OpenGL code in C++ is nearly identical to the WebGL equivalents, so moving to Java, C++, Rust, Python, whatever isn't very hard (assuming you're familiar with those other languages). DirectX 9/10/11 code is extremely similar too (the concepts are the same or very similar at least), and even DirectX 12 / Vulkan are much easier to pick up with an understanding of WebGL.
@@IndigoCode You have not posted anything for 3 years... Are you fine?
@@codinghub3759 haha thanks for checking in, I've started a couple projects that I wanted to turn into videos but had to scrap them for one reason or another. There's been a job change and a move in that time too, which hasn't helped! I'm hoping to get a series on game programming started soon, I've been building out the proof of concept game and I think it'll work nicely, but this is a weekends hobby for me so progress is pretty slow.
@@IndigoCode lmao im just watching your video and a savage 23 seconds ago commet appears
@@IndigoCode No problem, one good quality tutorial per month is better than hundreds of poor quality per day
Thanks! I have been doing 2d game programming with JavaScript and the canvas for a while and am hoping to branch out! This is an easy toe in the pool lol..
Hey an easy way to write shader in js is using backticks(``) like this:
var fragmentShaderText =
`precision mediump float;
varying vec3 fragColor;
void main()
{
gl_FragColor = vec4(fragColor, 1.0);
}`
this actually gives the same result for me
Good tip! That feature came out in JavaScript within months of these videos being made, it's definitely the better way to go.
If you're using webpack or JS modules, you can also define the shader strings in their own files that way, and the line numbers from the WebGL compile step will line up with the line numbers in your files - helpful when trying to fix those difficult to find "operation * cannot be applied to types..." bugs.
24:30 webgl seems like it is very badly designed product to me. Why the heck would they design it to require a line of code to _NOT_ allow it to fail silently??
I agree! And like a lot of bad design, the reason for it is legacy code.
WebGL is a thin wrapper over OpenGL, which itself is a pretty old C API with a lot of legacy cruft. OpenGL treats everything as this big ol' state machine, and errors will usually set some error flag you have to check with a different call (like glGetError). Compare gl.createBuffer (WebGL) / glGenBuffers (OpenGL) / vkCreateBuffer (Vulkan) / ID3D11Device::CreateBuffer (DirectX 11) to see what I mean - other APIs will at least return an enum value that tells you if there was an error or not, OpenGL expects you to remember to check for errors after making a call.
OpenGL also has a very hard time fixing core design decisions like that because it's very careful that changes to the API are only additive - any call from OpenGL 3.3 should be identical in 4.1/4.5. It breaks that rule for some things (e.g., deprecating glBegin/glEnd) but core API calls are sorta stuck using this model.
My least favorite part of all this is that the return signatures don't even give a hint that the call could fail - so you have to read the docs for each individual call to figure out whether or not you need to consider errors / which errors to consider.
@@IndigoCode Very interesting, thank you for the information! Hopefully, WebGPU will solve some of these issues and innovate a better design of their own (imo, design innovations are every bit as valuable as technological innovations)
I get a app.js:5 Uncaught TypeError: Cannot read property 'getContext' of null
at InitDemo (app.js:5)
at onload (index.html:9)
when I try to colour the canvas. My guess is the function is being called before the canvas is being created on here?
Your browser does not support HTML5
Anyone else ran into this same issue before?
I have the same problem, how you figured it out?
You mistyped "id" with "if" that's why it said property of null because they cannot find your canvas.
Yes, I'm looking at back again and I'm kinda understand what are you talking about before this I've just copying your code and didn't understand the idea was, for the shaders you can Use ` symbols than array with coma in it will make shader coding faster
Thanks man! Great video!
if you get "illegal return .." in line 53 then use " throw new Error("error:" + Uncaught SyntaxError: Illegal return statement); "
Am I the only one who is confused by the gradient at the end? Because you only set the colors for 3 vertices, how come the triangle ends up with the gradient colour?
Good question. That has to do with how the rasterizer stage works. When you set the 3 colors, it's for the three pixels at the far corners of the triangles. Every pixel in between the three corners has to be filled in order to make a solid triangle. Those in-between pixels are colored based on how close they are to each corner point. It works the same way when you get into more advanced attributes like texture coordinates, normals, and tangents, but it's most visible when dealing with color.
@@IndigoCode Thanks for your reply! Your video helped me a lot. I am also taking a graphics course now and was struggling with it. However I am still not fully clear on how the rasterizer stage works and how the colours transitions... I guess it would be hard for you to entirely explain them here, so maybe you could send me some literature to read?
@@zhenghaohe4727 Sure! This article goes into a ton of detail, probably more than you want: www.scratchapixel.com/lessons/3d-basic-rendering/rasterization-practical-implementation/rasterization-stage
There's a nice graphic on webglfundamentals.org/webgl/lessons/webgl-how-it-works.html that also shows what the rasterizer does to your screen pixels that I like.
Hope that helps!
@@IndigoCode Wow that's a lot to read. Thank you sir. One last question, why do we get so many `array` in the names of these APIs. e.g. gl.enableVertexAttribArray, it only takes a number( the location of an attribute), why does it have a `array` at the end of the name? I don't understand.
I put the vertex and fragment code into a element, so the browser knows that its not javascript, and i can use a getElementById(...) to get the text in it.
Note: only 5min. in:
Great tutorial, my only request is that you could link the flowchart in the demo somewhere in the description.
Ah, right, I must have forgotten to do that. The second page (used in a later video) doesn't seem to be complete.
www.lucidchart.com/documents/view/eba35393-4569-4651-89db-d3f5689667bf/0, description updated as well.
Just a heads up.. The single pipe "|" is actually a bitwise operator "OR" and not to be confused with the logical operator "OR" (||).
brilliant!!!!!!!!!!!!
+Mohammad Nawaz Thanks, I'm glad you enjoyed the video!
Thank you for the video! It helps alot.
I'm glad it helps, thanks for the comment!
So useful :)
Thank you
Thanks dude! I owe you one!
107 lines for draw a amazing triangle !
Thanks! :-D
25:55 Yeah, one could expect that the API would be more object-oriented in JavaScript and not some medieval C mess ;q But nope, it's just the same old mess in JS ;/
BTW plural for "vertex" is "vertices".
Is the colors interpolated between the corners automatically? I don't see where that happens in the code
Yep! That happens during the _rasterization_ stage of rendering. We write the vertex shader, where we specify the location and color of each point on the triangle (red top, green left, blue right). The rasterization stage finds all the pixels on the screen that are in a triangle formed by those three corners, and assigns them interpolated values of all the properties we give (for example, color) based on how close to each side they are. The calculation used is to find the "barycentric coordinates" of each pixel within the triangle, with respect to each of the three points, if you want to research it more. The idea is a point that's 80% towards the top, 15% to the left, and 5% to the right would have the color (0.8, 0.15, 0.05) - the point right in the middle is 33% top, 33% left, and 33% right, so it would be (0.33, 0.33, 0.33), and so on.
Hi can you let me know the possible career paths in Graphics programming? Kind of blind to the possible roles for this domain..
Javascript is the best programming language?
Last time I checked it was a downloadable, client-side, single threaded, browser scripting language. :D