Scribd
Upload
18 views3 pages

(English (Auto-Generated) ) WebGL 3D Graphics Explained in 100 Seconds (DownSub - Com)

Uploaded by

rizki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views3 pages

(English (Auto-Generated) ) WebGL 3D Graphics Explained in 100 Seconds (DownSub - Com)

Uploaded by

rizki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like