WebGL 3D Graphics Explained in 100 Seconds

[@ecs1611]

Honestly, some coding tutorials I feel say a lot without saying much. So the amount that you teach in 100 seconds is truly incredible. Keep up the great work! 🔥🚀

[@tropicaljupiter]

This is not a coding tutorial

[@medilies]

This video is kinda useless. It only says "Hey! WebGL exists and you can try to learn it"

[@scrung]

@@medilieswhich is useful to people that didn’t know about webgl prior to watching, and can now look up an mdn article about how to use it

[@ramirosandoval781]

@@medilies Its not useless; I didnt knew what OpenGL and WebGL were but now I do. The title is not "WebGL tutorial".

[@medilies]

@@ramirosandoval781 I responded to the comment that overhypes the video. And claimed exactly what u said. The video only helps people discover that webGL exists.

[@Arominit]

That rock climbing guy's picture is taken in Brazil (Pedra da Gavea), it's actually 3ft above the ground and there's a always a 20min line of people waiting to take the same picture 😎 (edit: at 1:50)

[@softwarelivre2389]

1:50 for those wondering

[@Arominit]

@@softwarelivre2389 tnx, added to the comment

[@disrael2101]

What city is it in Brazil

[@softwarelivre2389]

@@disrael2101 It is in Rio de Janeiro - RJ.

[@nickvanamburg]

Also, at 0:26, the google maps footage shows the famous 98 ft statue of Jesus which is also in Rio de Janeiro!

[@abdullahamrsobh]

Correction at 0:50 Rasterization happens before Fragment Shader execution, to save performance by culling hidden fragments (pixels) and prevent wasting time(GPU Performance) shading these fragments

[@piyushkumarsahoo8771]

Minimum system requirements?

[@medilies]

Amen.

[@zoriiginalx7544]

And to interpolate the varying variables (I.e. vertex colour) per each fragment

[@undeadpresident]

don't forget to bind your glVertexBufferElementArrayUnit

[@Chris-zt4ol]

Insane how you always make videos about the tec I started looking into 😂

[@ongzz]

omg i just started getting into threejs too!!

[@FRANKFIFORM]

Literally this Saturday night I was trying to plot a graph on a web dashboard and the only way that I find that can do it smoothly was using scatter and line plots with WebGL

[@philippebaillargeon5204]

​@@FRANKFIFORM I felt in love with ThreeJs. Both are trully incredible libraries

[@danieldeelite]

It's called the palgorithm

[@josemanuelbaezsoriano1663]

You always find the way to teach something completely new, yet very interesting to developers :D

[@kirarevcrow]

It's not new, but rather less talked about by popular tech channels

[@stxnw]

@@kirarevcrow because devs don’t care about design

[@MaximilianBerkmann]

It's not even new...

[@kasperchristensen8416]

This short video actually taught me exactly what I wanted to know about WebGL. Thanks!

[@DanishShakeel]

Three.js next!

[@swoorp]

I have mastered WebGL but your voice has taught me what I forgot! You're an awesome teacher... But the shaders are written in glsl with a .frag/.vert file extension or you can put it in a string in js and use it that way!

[@Mabi19]

Actually, GLSL files are extension-independent. You can use any file types you want, for example .glsl (which I prefer) or your own bundle format (for vertex and fragment shaders)

[@swoorp]

@@Mabi19 yea but the most compatible I think is the .frag or string method as I never got .glsl working with js

[@Mabi19]

@@swoorp This is just false. It makes literally zero difference (unless you're using some other opinionated framework)

[@Mabi19]

@Coder Husk Yeah, that's pretty much the only benefit. It still doesn't help with loading the GLSL file (because OpenGL doesn't care where you get it from)

[@sankalpsinghbais8588]

hey hi, can you please give me some insight, like how can i get started with WebGL, like from where should i start and what basic programming language i need, thanks in advance

[@lawrencedoliveiro9104]

0:51 Actually, the OpenGL term “fragment” refers to intermediate pixel values. They are not called “pixels” until they are composited into final pixel values on the display surface.

[@bokudev9866]

Looking forward for your Three.js tutorial

[@creativedeveloper6921]

This guy really knows EVERYTHING! Love your videos and keep it up!

[@a7u412]

Very hyped for the three.js tutorial!

[@samarmohan9891]

Day 6: Elixir/Phoenix in 100 seconds, iOS Development in 100 seconds, Android Development in 100 seconds, Rust in 100 seconds, C in 100 Seconds, TailwindCSS in 100 seconds, JS Testing in 100 seconds, Ruby/Rails in 100 Seconds, C++ in 100 Seconds, Golang in 100 seconds. I know it's a lot but I'm still going to post it. Thanks for amazing content Fireship!

[@milkyway9225]

Go and Elixir, yes, please

[@adityaramakrishnan969]

All in 100s ..no need to learn from year-long courses 🙂

[@alvinxyz7419]

I was just learning three js & glsl shader and this pops up in my feed

[@roua.]

looking forward to to the threejs tut, great vid as usual

[@basharmously2162]

I asked for this on your previous video! Thank you for delivering this. waiting for the tutorial.

[@pranjalsmiling]

ah yes, the tech youtuber with the soothing voice uploaded again.

[@mavvdeus]

I love his voice too

[@victorpinasarnault9135]

Make a video for the recently released WebGPU too, please!

[@xinaesthetic]

“Released” seems like a bit of a strong word there.

[@prashantmaharana3467]

Excited for three.js, and thanks alot for this amazing video, always wondered how browser or processors render 3D models

[@andychan4025]

I'm so glad you introduced Spline!

[@isofruitfruit9357]

Oh wow, way to leave us hanging! Very much looking forward to your follow up on this

[@AtomicCodeX]

Thank you so much for this Cant wait to watch about threeJS

[@hououinkyouma5372]

The background music reminds me of Halt and Catch Fire. Brilliant series.

[@LeBigPanda]

Great video!

[@luckylukeskywalker]

Could you do a video on WebGPU as well? Would be awesome.

[@DavidDeCorso]

Was just about to start learning this. Thanks so much!

[@adamhenriksson6007]

This is literally the thing I'm working with right now, you are some sort of crazy psychic you know that? Keep up the crazy good work.

[@TheLazyIndianTechie]

I was looking for Spline and was searching everywhere, in my history etc and gave up. Finally found it here. Thanks a ton! (I had forgotten the name)

[@erad4910]

Wow can't wait for the three.js tutorial as usual you are awesome!

[@znull3356]

All aboard the three.js tut hype train, choo choo! 🚂

[@venkyscode]

Big Heart for fireship ❤️👌

[@ViorelMocanu]

Amazingly informative and to the point. Great work!

[@skylark.kraken]

Ouh looking forward to three.js, got an idea which requires it.

[@milindsharma7184]

Much needed. Please upload three.js tutorials soon

[@GoodVolition]

WebGL is great. Definitely want to use libraries if possible though.

[@boredduck231]

Thank you sooo much

[@khalidmohammad5103]

Webgl to WebGPU in 100 seconds.

[@disrael2101]

Your eli5 is the best I've ever seen.. also those are real complex topics to explain so u deserve even more appreciation

[@Dracolmao_]

YESSSSS , THREE.JS PLZ, IVE VEEN TRYING TO FIND GOOD TUTS . . .FINALLY

[@satishwadkar6963]

Your topics are always quite unique and based on new technologies. I used to watch each video, specially 100 seconds series..

[@prakashmardi25]

I have been waiting for three.js, finally 😎

[@julianlozano2414]

Can't wait for the three.js tutorial !!!

[@subhadeepchatterjee1528]

aw you did not go beyond 100s i really like the way you teach....BUT GREAT STARTING POINT THOUGH THREE.JS lets gooooooooooooo

[@justttn]

Spooky, I was just researching this today. A fireship tutorial would be would be nice 🔥

[@smittywerbenjj1]

This. Is. Great. Thank You Fireship!

[@elonximperator892]

Amazing Content Quality →☁️🚀

[@cassolmedia]

nice! i look forward to the full tutorial

[@yapayzeka]

cant wait for three.js thank you.

[@mdsaddamvoltas4411]

so much love for just saying three.js tutorial.

[@Noobmaster_x69]

Which software you use to make this videos? I love it!

[@theocrob]

🥳 New fireship video!

[@colton3507]

dude. just looked it up for the first time this morning

[@otterguyty]

Unreal 5 needs to support webgl! Nanite & Lumen for the future of web 3!

[@inklingboi8431]

I'm working on a three.js game right now so this is really convenient for me xD

[@luispereira8396]

I searched this today. Nice mind reading fireship

[@tarekmoubarak4633]

looking forward to the three.js tutorial!

[@laja6108]

Amazing explanation 👏🏽

[@priyantha.buddhika]

Waiting for three.js video 😍🔥

[@julianhecker944]

Can’t wait for threejs!

[@codelightsparkles2403]

Looking forward to that three js tutorial 😀 I hope it will be beginner friendly too 😅

[@SridTech]

When scrolling on KZbin and a 100 second series from fireship pops up, how tf did I not get notified about this early.

[@alinciocan5239]

Really amazing job!

[@youtubepooppismo5284]

I had to make a javascript tool with a countdown/timer So i decided to display the hh:mm:ss as a webgl render, since I knew how to do raymarching i wrote a glsl shader and each digit was a distance function. I even enabled the reflection option. However, I was passing each digit as a uniform, and that made the browser crash while compiling the shader. The webgl context would be lost for the long compiling time (Only if you had a non-intel GPU, if you only had a cpu it'd compile but it didn't run smoothly, obviously) This didn't happen if a manually set the digits in the shader code. SO i'm never using webgl again :)

[@dillonlynch5767]

Your editing is AMAZING! Tutorial?

[@ramilego]

Always interesting content :)

[@TheExiledTexan]

Three.js is love, Three.js is life.

[@Chevindu]

Hope you'll discuss about the Typescript port of the ThreeJS

[@sendmesomespecialhelp9219]

It's would be so helpful if you make a video about Programming Paradigm and how it is implemented. There aren't many video on YT that discuss this topic in details :(

[@hughpapaheffner4957]

Please do an API Gateway tutorial with Express Gateway and implementation in an Angular project and some microservices!!!!!

[@lookdadnomilk]

No idea what you're saying, but I completely agree.

[@nazarm6215]

Sounds like fun. React-Three-Fiber too?

[@codeaperture]

Jeff is the god of JavaScript. Confirmed and here we go.

[@arctan2]

yes three.js that's what i am waiting for make it fast

[@NielMalan]

Wow. Suddenly all the words I've been seeing has meaning!

[@nxte8506]

hopefully we get three.js tomorrow. I NEEED ITT!!

[@fadhilsaheer8877]

we need beyond 100 sec 🔥🚢

[@NEXEDU]

Please make Full video on web GL

[@NoOne-zu5qm]

was looking for some good three.js and react three fiber tutorials , looking forward for tutorials

[@GoodVolition]

Vector graphics is a little misleading. You do use vectors, and there are graphics but vector graphics is generally going to be used for the type of vector graphics found in svg, pdf, ai files.

[@emanuelescarsella3124]

God please a three.js tutorial by you would be awesome

[@abhinav.sharma]

Make a 3D FireShip logo in your full tutorial

[@devyeasir4192]

dude you know my mind!

[@jacolack4010]

protobufs in 100 seconds would be awesome

[@kanakbagga3824]

Please do a video on DGraph :)

[@stephen9849]

extreme challange: can you do vulkan in 100 seconds ;)

[@VivekYadav-ds8oz]

Where do languages like Rust and C++ come into the picture in this case?

[@NEXEDU]

This is interesting

[@karanbathija5139]

Nice three.js tut would be awesome, can you do pm2 if possible?

[@zealot4325]

jeeeeez this javascript is everywhere

[@mycloudvip]

Great Video.. Would you consider including Babylon.js and Pixi.js as part of any upcoming videos regarding this topic?

[@bythandeka]

This is interesting!

[@gabrielcoelho1623]

Hey, that's Rio de Janeiro here in Brazil! So cool :) 0:23

[@FlorianEagox]

Can't wait for the Three.js video. I would love to build a page on my website that's like a little room of my 3D assets, but I don't want to use a game engine if I don't have to. They work well, but still feel very clunky and not well integrated into the website.

[@jackkirby5287]

Can you do an abstract OpenGL tutorial? I would like to learn OpenGL so I can use libraries like LWJGL.

[@bennyquick9469]

WebGL explained in three words: OpenGL in javascript

[@hypercrack9262]

NEEED A 3JS AND SPLINE TUTORIAL!!

[@weshuiz1325]

Beyond webGl plz 🔥

[@pixiedev]

I can't imagine 🤩🤩 3d in web. I want to learn 😍.

[@kettenbach]

Let's goooo ‼️ 🔥🚀

[@Robin-uh7zz]

WebGL is legacy. Please do a WebGPU video!