3D Programming Basics: WebGL

Empowering organizations
for a digital and cognitive
revolution
We are

ACERCA DE GLOBANT
Highlights
Crecimiento de ingresos ($ M)
25% industria ﬁnanciera
2017
CAGR: 27%
522
254
323
413
20182015 2016
659
2019
14,000+ 16
Globers Paises
55
Oﬁcinas
37
Ciudades
36%
YTD template
increase
27%
Crecimiento anual
de ingresos
Fuerte presencia global con gran talento para proveer
transformaciones digitales y cognitivas.
Argentina
Colombia
Uruguay
India
Chile
Peru
España
Bielorrusia
Rumania
EEUU
Méjico
Brasil
Inglaterra
Canadá
Luxemburgo
Francia
Globant Proprietary | Confidential information
2003
Fundación
2006
Firma con
Google
2017
Nombrados líderes mundiales
de servicios de consultoría de
estrategia digital por IDC
MarketScape
2019
Lanzamiento de
Be Kind
2008
Inversión de
Riverwood Capital
y FTV Capital
2009
Lanzamiento de
nuestros
estudios
2012
Inversión
De WPP
2014
Cotizamos en
NYSE
2015
Oferta
secundaria
2016
Lanzamiento de
SOP

Globant Proprietary | Conﬁdential Information
Algunos de nuestros clientesABOUT
GLOBANT

GLOBANT
Gaming Studio

Smart
Toys
Game
Development
Online
Services
eSports &
Second Screen
Virtual &
Augmented
Reality
Art &
Animation
➔ Leverage game mechanics with a
different approach.
➔ Help our partners through production,
launch and operation.
➔ Solid expertise with the most
recognized companies in the gaming
industry.
➔ Creative talent, solid technology
frameworks, and processes to scale
and foster innovation.
➔ We develop games and features for
multiple platforms:
Social • PC • Mobile • Next Generation •
Consoles • VR/AR Technologies.
12+
Years working with top
AAA studios
400+
Engineers and developers,
2D & 3D artists
100+
Projects in gaming, 3D
graphics, platforms, virtual
& augmented reality
We specialize in the design and development of world-class
videogames and online services, which work across web,
social, and mobile channels.
OUR GAMING STUDIO
GAMING STUDIO

Intro to WebGL
2020

3D Basics

3D Basics
● Rendering a 3D scene is like taking a picture. You need some objects to photograph, which will have
some materials, a few lights so we can actually see the objects, and a camera to take the picture:
3D Basics

3D Basics - Scene
● We call a 3D scene to the following group of components:
○ A set of 3D objects defined by its Geometry and Materials.
○ A set of light sources that define the amount of light that hits each portion of the model.
○ A Camera that defines from which point of the 3D space we actually see the rest of the scene.
● The action of processing the 3D scene and generate a 2D representation is called Render. We have
different types of Renderers:
○ Offline renderers: the tools used by companies like Pixar or Dreamworks to make films. Some
of them are: Maya, Zbrush, 3D Studio and Blender.
○ Real-time renderers: used by games to generate frames based on user inputs. Unreal,
Frostbite, Unity and threeJS have real-time renderers among other components.
3D Basics

3D Basics - Models
● The geometry of models are represented in the 3D cartesian space by a set of points (vertices) and
triangles:
3D Basics
● Basic shape geometry usually comes among other vertex properties like normals and colors.
Normals are used to calculate the effect of lights over the object
● The ﬁnal aspect of every pixel of the object is calculated using what we call Materials.

3D Basics - Cameras
● Intuitively, cameras define from where we see the scene. They have a set of properties
like its position and the target direction.
● What you can see through a camera is limited by a volume called the View Frustum.
3D Basics
● You need to correctly define all this
properties to actually “see something”
● Usually it is not that difficult because
there are a set of predefined values that
works on most situations and from
where you can start experimenting.

OpenGL and WebGL

Some background
OpenGL is one of the two main APIs for computer graphics, and the only open source one.
It’s meant to provide an abstract way to interact with different GPU hardware and develop high
performance 3D apps.
On top of that builds WebGL, which takes a restricted portion of OpenGL and exposes it to the
web.
WebGL and OpenGl

WebGL
Some characteristics about WebGL
● Low level
● Widely supported by modern browsers
● Two versions
○ 1.0 is based on OpenGL ES 2.0
○ 2.0 is based on OpenGL ES 3.0
● Shaders written on GLSL
○ Shaders are programs that run on the GPU
○ GLSL is a simple C-like language
WebGL and OpenGl

ThreeJs intro

Three.js- Introduction
● Three.js is a JavaScript library used to display 3D graphics in a web browser in real-time.
● It uses WebGL at its core and provides an API which deﬁne a framework that simpliﬁes
many aspects of WebGL programming.
● Browser support: Chrome, Firefox, Edge, Opera
● It’s a fast evolving project that has many components so getting the right versions of
each module is very important.
● Three.js is published as an npm module so to install it you just need to run:
npm install three
from your working directory.
ThreeJs Intro

Three.js - Organization
ThreeJs Organization
● The base core of functionality is included in the three.js ﬁle.
● Many other components like loaders, controls and shaders
are part of the examples directory.
● There are many ways to include the modules into your
project. One of them is using import:
<script type="module">
import * as THREE from './node_modules/three/src/Three.js';
import { WEBGL } from './node_modules/three/examples/jsm/WebGL.js';
import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from './node_modules/three/examples/jsm/controls/OrbitControls.js';

HTML render element
ThreeJs HTML setup
● You can use the entire document canvas to show the rendered image, but it is more
common that the output only takes a portion of it.
● To do that include a <div> element with an id in the HTML body:
<div id = "Scene-Content"> </div>
● Then use this id in the script to deﬁne where to attach the renderer into the HTML, doing
something like this:
// Renderer Setup
var renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.setClearColor( 0x000000);
renderer.shadowMapEnabled = true;
// HTML binding
var elementID = 'Scene-Content';
var element = document.getElementById('Scene-Content');
element.appendChild(renderer.domElement);

App walkthrough

Introduction
We’ll introduce the different concepts of graphics development by walking through a small app
to visualize models written using ThreeJS.
App walkthrough

App walkthrough
Initial setup
The ﬁrst things you need to
create are a renderer instance,
a scene and set up the render
loop.
In this case we are creating an
empty scene and a renderer
that covers the entire window.
The main loop will be executed
every frame by the browser and
will render the scene.
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
function mainLoop() {
requestAnimationFrame( mainLoop );
renderer.render( scene, camera );
}
mainLoop();

App walkthrough
Game Loop
The Game Loop is where everything happens.
The idea is that the app is constantly executing the Game
Loop until it exit.
It typically has the following steps:
● Get Input: Where you get the player input: mouse, Keyboard, Joystick, etc…
● Update: Where you use the player’s input to update your game logic and other systems
like physics.
● Render: Where you execute the commands needed to render the scene. ThreeJS
automatically goes over the scene and calls the necessary WebGL commands.
function mainLoop() {
requestAnimationFrame( mainLoop );
renderer.render( scene, camera );
}
mainLoop();

App walkthrough
Cameras
There are two main types of
cameras commonly used,
perspective and orthographic.
Perspective camaras make the
world look like you are used to
seeing it, where parallel lines
join on the horizon.
Orthographic cameras keep
parallel lines parallel.

App walkthrough
Cameras
Creating a camera on ThreeJS
is just creating a new object of
type PerspectiveCamera or
OrthographicCamera and
adding it to the scene.
const fieldOfView = 90;
const nearDistance = 0.1;
const farDistance = 1000;
var camera = new THREE.PerspectiveCamera( fieldOfView ,
width/height,
nearDistance ,
farDistance);
scene.add( camera );
The properties passed to the function are
● Field of view
○ How wide the view angle of the camera is. Usual values are 45, 90 and 110, cell phone cameras
are around 65, the human eye is around 135.
● Aspect ratio
○ This is just the ratio between width and height.
● Near distance and far distance
○ This the the nearest (and the farthest) distance we care about.

App walkthrough
Model Loading
● Three.js provides several built-in geometries, like boxes, spheres, cylinders, cones, etc.
● To add more elaborated geometry three.js provides loaders for popular 3D formats like
.fbx, .obj and many more.
● Recommended format: glTF. It’s supported by 3D modeling packages as an export
option.
● To use the glTFLoader you must import the following module:
import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';
..or include the following script:
<script src="./node_modules/three/examples/js/loaders/GLTFLoader.js"></script>

App walkthrough
Model Loading
● To load a glTF model use this reference code:
new GLTFLoader().load(
// resource URL
'path/to/Model.glb|.gltf',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100
) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened: ' + error
);
}
);
The .load method provides three function
callbacks to catch different events:
● Loading done.
● Loading progress.
● Loading error.
The most important is the Loading done
callback because in that point we know
for sure that the model is completely
loaded in memory and we can
successfully add it to the scene.

App walkthrough
Model Loading - Model anatomy
● The loader automatically creates an Object3D object
and uses its children array to build the same hierarchy
deﬁned as the one constructed in the 3D modeling
program.
● It is common that after loading you need to change
some aspects of the model, like some material
property or the shadows of the object.
function enableShadows(object) {
if(object.type='Mesh'){
object.castShadow = true;
object.receiveShadow = true;
}
for (let mod of object.children) {
enableShadows(mod);
}
}

App walkthrough
Materials
Materials define the visual
properties of the object, like color
and roughness.
For example, a piece of car tire is
rough and black, without
reflections, while a spoon can be
smooth and reflective.

App walkthrough
Materials - PBR
PBR stands for Physically Based
Rendering, and is the most used
material model nowadays.
It deﬁnes a few parameters that
allow to model a wide variety of
materials. Some of them are:
● Roughness
● Albedo (Surface color)
● Metalness (usually 0 or 1)
Additionally, a texture is usually used
to add detail by modifying the
surface orientation.

App walkthrough
Materials - PBR
The good news is that you don’t
need to do much to use PBR
materials, as ThreeJS supports them
out of the box.
If you are loading a GLTF ﬁle, it will
create the materials for you.
Otherwise you assign it when
creating your geometry, as in the
following example.
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00 });
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

App walkthrough
Lights
● Three.js offers many different types of lights you can use in your scenes:
THREE.SpotLight, THREE. DirectionalLight, THREE.AmbientLight and
THREE.HemisphereLight.
● Directional light mimics the light coming from the Sun, with parallel rays following a
direction.
● Ambient light just adds a constant light to every pixel, in an effort to simulate the global
light of the ambient. It is used to soften the illumination.
● With Ambient + Directional you can easily get this result:
Ambient factor

App walkthrough
Lights
● Here is the code to add an Ambient light and a Directional Light
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 3.0 );
directionalLight.position.set( 0,0,0 );
directionalLight.target.position.set(1,-1,-1);
directionalLight.target.updateMatrixWorld();
scene.add (directionaLight);
● You need to deﬁne Color and Intensity in the constructor.
● Directional light also needs a position and a target to deﬁne its direction.
● You must call updateMatrixWorld() after setting a new direction.

App walkthrough
Shadows
● Shadows are a big subject in Computer Graphics. They are difficult to generate correctly
and efficiently.
● For that reason there are a huge number of algorithms that treat every special case
separately in order to achieve an efficient implementation.
● ShadowMaps is one of these algorithms and it is implemented in Three.js by default.
● The shadow is calculated by
rendering the objects from the light
to a texture that then is projected
over the scene.

App walkthrough
Shadows
● The steps to add shadows are:
○ Enable Shadow maps in the renderer:
○ Define which object will cast a shadow.
○ Define which object will receive shadows.
○ Define which light will cast a shadow and define the camera from the light point of view.
renderer.shadowMap.enabled = true;
object.castShadow = true;
object.receiveShadow = true;
directionalLight.castShadow = true;
directionalLight.shadow.camera.near = -250;
directionalLight.shadow.camera.far = 250
directionalLight.shadow.camera.left = -250;
directionalLight.shadow.camera.right = 250;
directionalLight.shadow.camera.bottom = -250;
directionalLight.shadow.camera.top = 250;

App walkthrough
Image Based Lighting
Image Based Lighting (IBL) is a
method to use a static texture,
usually a photograph, to represent
the environment and compute
lighting from it.
The photograph is a 360 degree
picture, so you can know what the
environment is for any direction.
It’s a fast method that adds a lot of
realism compared to a constant
ambient color.

App walkthrough
Image Based Lighting
Once again, ThreeJs makes it easy
to use IBL on your apps.
You load the environment texture,
pass it to an instance of
PMREMGenerator, which takes care
of doing the appropriate
processing, and then just assign
the texture to your scene.
Additionally you can also use it as
the background for your scene.
new THREE.TextureLoader().load('path/to/texture',
function (envMap){
var generator = new
THREE.PMREMGenerator(renderer);
var env = generator.fromEquirectangular(envMap);
generator.dispose();
scene.background = env.texture;
scene.environment = env.texture;
});

Questions?

3D Programming Basics: WebGL

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to 3D Programming Basics: WebGL

Similar to 3D Programming Basics: WebGL (20)

More from Globant

More from Globant (20)

Recently uploaded

Recently uploaded (20)

3D Programming Basics: WebGL