WebGL makes it possible to render GPU-accelerated 3D graphics on the web.  Learn the basics of 3D theory and rendering pipelines for complex graphics and animations https://fireship.io

#webdev #3d #100SecondsOfCode

🔗 Resources

WebGL https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
Rendering Pipeline https://duriansoftware.com/joe/an-intro-to-modern-opengl.-chapter-1:-the-graphics-pipeline
Three.js https://threejs.org/
Spline https://spline.design

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:52:33.964Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
1f1b5456-7a78-4389-9f63-51bac8c8cd3c
3fd2bf86a063b4f53b43fd194c69f2f7f8f43e940ebfc89fd4c995e8f8d693fa
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
WebGraphics Library is a JavaScript API for implementing interactive 2 d and 3 d 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 plug ins.
It opens the door to 3 d 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 3 d theory and the rendering pipeline.
In a 3 d 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 3 d vector graphic into a projection of a 2 d pixel, which tricks our brains into seeing a 3 d 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 60 FPS.
It's often too much for the CPU to handle by itself, which is why we have GPUs to distribute the calculations more efficiently.
It.
WebGL allows us to process graphics on the GPU and is based on a library that's been around since 1992 called Open GL.
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 Open GL 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 3 d graphics to your website.
You can use libraries like 3 JS or tools like Spline too quickly designed 3 d experiences without much underlying knowledge of WebGL.
Stay tuned for a full 3 JS tutorial.
Make sure to hit the like button.
Thanks for watching, and I will see you in the next one.

Speaker 0: WebGraphics Library is a JavaScript API for implementing interactive 2 d and 3 d 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 plug ins. It opens the door to 3 d 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 3 d theory and the rendering pipeline.

In a 3 d 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 3 d vector graphic into a projection of a 2 d pixel, which tricks our brains into seeing a 3 d 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 60 FPS.

It's often too much for the CPU to handle by itself, which is why we have GPUs to distribute the calculations more efficiently. It. WebGL allows us to process graphics on the GPU and is based on a library that's been around since 1992 called Open GL. 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 Open GL 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 3 d graphics to your website. You can use libraries like 3 JS or tools like Spline too quickly designed 3 d experiences without much underlying knowledge of WebGL. Stay tuned for a full 3 JS tutorial. Make sure to hit the like button.

Thanks for watching, and I will see you in the next one.
WebGraphics Library is a JavaScript API for implementing interactive 2 d and 3 d 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 plug ins. It opens the door to 3 d 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 3 d theory and the rendering pipeline. In a 3 d 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 3 d vector graphic into a projection of a 2 d pixel, which tricks our brains into seeing a 3 d 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.
graphic design
geometry
visualization
youtube
multimedia
neural networks
animation
video gaming
mathematics
Shading requires the computer to perform a ton of linear algebra or matrix multiplication to render graphics smoothly at 60 FPS. It's often too much for the CPU to handle by itself, which is why we have GPUs to distribute the calculations more efficiently. It. WebGL allows us to process graphics on the GPU and is based on a library that's been around since 1992 called Open GL. 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 Open GL 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 3 d graphics to your website. You can use libraries like 3 JS or tools like Spline too quickly designed 3 d experiences without much underlying knowledge of WebGL. Stay tuned for a full 3 JS tutorial. Make sure to hit the like button.
graphic design
Thanks for watching, and I will see you in the next one.
WebGraphics Library is a JavaScript API for implementing interactive 2 d and 3 d 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 plug ins. It opens the door to 3 d 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 3 d theory and the rendering pipeline. In a 3 d 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 3 d vector graphic into a projection of a 2 d pixel, which tricks our brains into seeing a 3 d 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 60 FPS. It's often too much for the CPU to handle by itself, which is why we have GPUs to distribute the calculations more efficiently. It. WebGL allows us to process graphics on the GPU and is based on a library that's been around since 1992 called Open GL. 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 Open GL 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 3 d graphics to your website. You can use libraries like 3 JS or tools like Spline too quickly designed 3 d experiences without much underlying knowledge of WebGL. Stay tuned for a full 3 JS tutorial. Make sure to hit the like button. Thanks for watching, and I will see you in the next one.
WebGraphics
webgraphics
Library
library
is
is
a
a
JavaScript
javascript
API
api
for
for
implementing
implementing
interactive
interactive
2
2
d
d
and
and
3
3
d
d
vector
vector
graphics
graphics
in
in
the
the
browser.
browser
It
it
allows
allows
developers
developers
to
to
run
run
hardware
hardware
accelerated
accelerated
graphics
graphics
with
with
the
the
client's
client's
GPU
gpu
directly
directly
inside
inside
an
an
HTML
html
canvas
canvas
without
without
the
the
need
need
for
for
external
external
plug
plug
ins.
ins
It
it
opens
opens
the
the
door
door
to
to
3
3
d
d
web
web
design,
design
interactive
interactive
games,
games
data
data
vis,
vis
physics
physics
simulations,
simulations
and
and
most
most
importantly,
importantly
beautiful
beautiful
artwork.
artwork
WebGL
webgl
is
is
used
used
to
to
render
render
graphics
graphics
in
in
everyday
everyday
tools
tools
like
like
Google
google
Maps,
maps
and
and
by
by
the
the
Unity
unity
engine
engine
to
to
make
make
web
web
based
based
games.
games
To
to
understand
understand
how
how
it
it
works,
works
it
it
helps
helps
to
to
first
first
understand
understand
basic
basic
3
3
d
d
theory
theory
and
and
the
the
rendering
rendering
pipeline.
pipeline
In
in
a
a
3
3
d
d
scene,
scene
every
every
point
point
is
is
a
a
vertex
vertex
identified
identified
by
by
its
its
x,
x
y,
y
and
and
z
z
coordinates.
coordinates
The
the
vertices
vertices
are
are
then
then
connected
connected
together
together
to
to
form
form
a
a
bunch
bunch
of
of
little
little
triangles
triangles
known
known
as
as
primitives,
primitives
then
then
a
a
light
light
source
source
bounces
bounces
off
off
of
of
them
them
to
to
create
create
the
the
appearance
appearance
of
of
shadows
shadows
and
and
depth
depth
perception.
perception
They're
they're
then
then
rasterized
rasterized
to
to
convert
convert
a
a
3
3
d
d
vector
vector
graphic
graphic
into
into
a
a
projection
projection
of
of
a
a
2
2
d
d
pixel,
pixel
which
which
tricks
tricks
our
our
brains
brains
into
into
seeing
seeing
a
a
3
3
d
d
object
object
on
on
a
a
2
2
dimensional
dimensional
computer
computer
screen.
screen
This
this
pipeline
pipeline
can
can
be
be
customized
customized
by
by
writing
writing
shaders,
shaders
which
which
are
are
just
just
functions
functions
that
that
tell
tell
the
the
computer
computer
how
how
to
to
draw
draw
pixels
pixels
on
on
the
the
screen.
screen
Shading
shading
requires
requires
the
the
computer
computer
to
to
perform
perform
a
a
ton
ton
of
of
linear
linear
algebra
algebra
or
or
matrix
matrix
multiplication
multiplication
to
to
render
render
graphics
graphics
smoothly
smoothly
at
at
60
60
FPS.
fps
It's
it's
often
often
too
too
much
much
for
for
the
the
CPU
cpu
to
to
handle
handle
by
by
itself,
itself
which
which
is
is
why
why
we
we
have
have
GPUs
gpus
to
to
distribute
distribute
the
the
calculations
calculations
more
more
efficiently.
efficiently
It.
it
WebGL
webgl
allows
allows
us
us
to
to
process
process
graphics
graphics
on
on
the
the
GPU
gpu
and
and
is
is
based
based
on
on
a
a
library
library
that's
that's
been
been
around
around
since
since
1992
1992
called
called
Open
open
GL.
gl
To
to
get
get
started,
started
you
you
just
just
need
need
to
to
grab
grab
an
an
HTML
html
canvas
canvas
in
in
the
the
DOM,
dom
then
then
get
get
its
its
WebGL
webgl
contacts
contacts
to
to
start
start
drawing.
drawing
The
the
main
main
program
program
code
code
is
is
written
written
in
in
JavaScript,
javascript
but
but
shaders
shaders
are
are
written
written
in
in
the
the
Open
open
GL
gl
ES
es
shading
shading
language.
language
A
a
shader
shader
will
will
take
take
information
information
about
about
a
a
vertex
vertex
or
or
fragment
fragment
and
and
use
use
the
the
GPU
gpu
to
to
calculate
calculate
the
the
data
data
required
required
to
to
render
render
it
it
as
as
a
a
pixel
pixel
on
on
the
the
screen.
screen
Luckily,
luckily
you
you
don't
don't
need
need
to
to
write
write
shaders
shaders
by
by
hand
hand
to
to
start
start
adding
adding
3
3
d
d
graphics
graphics
to
to
your
your
website.
website
You
you
can
can
use
use
libraries
libraries
like
like
3
3
JS
js
or
or
tools
tools
like
like
Spline
spline
too
too
quickly
quickly
designed
designed
3
3
d
d
experiences
experiences
without
without
much
much
underlying
underlying
knowledge
knowledge
of
of
WebGL.
webgl
Stay
stay
tuned
tuned
for
for
a
a
full
full
3
3
JS
js
tutorial.
tutorial
Make
make
sure
sure
to
to
hit
hit
the
the
like
like
button.
button
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains that Web-half Library is a JavaScript API for implementing interactive 2-d and 3-d vector graphics in the browser. The process involves creating a pipeline that connects everything to create a 2-d image, and the creation of a 3-d image requires linear algebra and matrix multiplication. Web-half Library allows developers to use shaders and libraries like Open GL to create a 3 JS or Spline, and a tutorial on creating a 3 JS experience is provided.
WebGL 3D Graphics Explained in 100 Seconds
WebGraphics Library is a JavaScript API for implementing interactive 2 d and 3 d 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 plug ins. It opens the door to 3 d 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 3 d theory and the rendering pipeline. In a 3 d 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 3 d vector graphic into a projection of a 2 d pixel, which tricks our brains into seeing a 3 d 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 60 FPS. It's often too much for the CPU to handle by itself, which is why we have GPUs to distribute the calculations more efficiently. It. WebGL allows us to process graphics on the GPU and is based on a library that's been around since 1992 called Open GL. 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 Open GL 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 3 d graphics to your website. You can use libraries like 3 JS or tools like Spline too quickly designed 3 d experiences without much underlying knowledge of WebGL. Stay tuned for a full 3 JS tutorial. Make sure to hit the like button. Thanks for watching, and I will see you in the next one.
The speaker explains that Web-half Library is a JavaScript API for implementing interactive 2-d and 3-d vector graphics in the browser. The process involves creating a pipeline that connects everything to create a 2-d image, and the creation of a 3-d image requires linear algebra and matrix multiplication. Web-half Library allows developers to use shaders and libraries like Open GL to create a 3 JS or Spline, and a tutorial on creating a 3 JS experience is provided.