WebGL 3D Graphics Explained in 100 Seconds

web graphics library is a javascript api for implementing interactive 2d and 3d vector graphics in the browser it allows developers to run hardware accelerated graphics with the client's gpu directly inside an html canvas without the need for external plugins it opens the door to 3d web design interactive games data vis physics simulations and most importantly beautiful artwork webgl is used to render graphics in everyday tools like google maps and by the unity engine to make web-based games to understand how it works it helps to first understand basic 3d theory and the rendering pipeline in a 3d scene every point is a vertex identified by its x y and z coordinates the vertices are then connected together to form a bunch of little triangles known as primitives then a light source bounces off of them to create the appearance of shadows and depth perception they're then rasterized to convert a 3d vector graphic into a projection of a 2d pixel which tricks our brains into seeing a 3d object on a 2-dimensional computer screen this pipeline can be customized by writing shaders which are just functions that tell the computer how to draw pixels on the screen shading requires the computer to perform a ton of linear algebra or matrix multiplication to render graphics smoothly at 60fps it's often too much for the cpu to handle by itself which is why we have gpus to distribute the calculations more efficiently webgl allows us to process graphics on the gpu and is based on a library that's been around since 1992 called opengl to get started you just need to grab an html canvas in the dom then get its webgl contacts to start drawing the main program code is written in javascript but shaders are written in the opengl es shading language a shader will take information about a vertex or fragment and use the gpu to calculate the data required to render it as a pixel on the screen luckily you don't need to write shaders by hand to start adding 3d graphics to your website you can use libraries like 3js or tools like spline to quickly design 3d experiences without much underlying knowledge of webgl stay tuned for a full 3js tutorial make sure to hit the like button thanks for watching and i will see you in the next one

Channel: Fireship

Views: 340,225

Keywords: webdev, app development, lesson, tutorial, 3d, game dev, web dev, threejs, web 3d, web design, data vis, webgl, opengl, js, javascript

Id: f-9LEoYYvE4

Length: 2min 6sec (126 seconds)

Published: Wed May 12 2021