Presentation by topic WebGL/Three.js

Created by Marina Zaitseva

What is WebGL?

WebGL (Web Graphics Library) is a software interface for creating interactive web graphics that allows us to see three—dimensional content right in the browser.

How did it all start?

HTML5 - 2014 year.

Elements such as VIDEO, AUDIO and CANVAS appear. Canvas makes it possible to draw various elements on the page: text, lines, shapes, images.

Canvas for drawing = HTML5 — Canvas element.

Brushes and paints = JavaScript and GLSL programming languages.

How does it work?

In a 3D scene, each point is a vertex X, Y, Z.

The vertices connect and form primitives.

The light source is the creation of shadows and image depth.

Primitives are transformed to create three-dimensional vector graphics in the form of a projection of a two-dimensional pixel, as a result, the brain sees a three-dimensional object on a two-dimensional computer screen.

There are two types of functions:

•fragment shaders

•vertex shaders

They use the GL shader language.

The vertex shader calculates the coordinates of the vertices, and the fragment shader calculates the colors of pixels.

The dimming process = too much load on the CPU.

WebGL uses graphics processing units (GPU).

The goal of the GPU is to draw graphics at lightning speed.

Total = hardware rendering.

Hardware rendering = a lot of freedom for creativity and creating graphics on the site.

Example

Click on image and go to site.

Advantages of WebGL:

1. Performance

2. Interactivity
Click for example

3. Attracting attention
Click for example

Three.js

is one of the JavaScript libraries that serves as an auxiliary tool when working with 3D graphics in WebGL.

Click image and go to site

Three.js is in the works:

"THE SCENE"

"CAMERA"

"RENDER"

"LIGHTING"

"OBJECTS" AND THEIR MATERIALS

In Three.js applies 4 types of cameras:

Perspective

Stereo Camera

Orthographic

Cube

Perspective camera

Orthographic camera

Lighting in Three.js

"Lighting" is divided into several types:

Ambient light

Directional light

Point light

Spot light

Three.js examples: