Empowering organizations
for a digital and cognitive
revolution
We are

ACERCA DE GLOBANT
Highlights
Crecimiento de ingresos ($ M)
25% industria financiera
2017
CAGR: 27%
522
254
323
413
20182015 2016
659
2019
14,000+ 16
Globers Paises
55
Oficinas
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 | Confidential Information
Algunos de nuestros clientesABOUT
GLOBANT

Globant Proprietary | Confidential Information
GLOBANT
Gaming Studio

Globant Proprietary | Confidential Information
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

Globant Proprietary | Confidential Information
Intro to WebGL
2020

Globant Proprietary | Confidential Information
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:
Globant Proprietary | Confidential Information
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.
Globant Proprietary | Confidential Information
3D Basics

3D Basics - Models
● The geometry of models are represented in the 3D cartesian space by a set of points (vertices) and
triangles:
Globant Proprietary | Confidential Information
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 final 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.
Globant Proprietary | Confidential Information
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.

Globant Proprietary | Confidential Information
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.
Globant Proprietary | Confidential Information
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
Globant Proprietary | Confidential Information
WebGL and OpenGl

Globant Proprietary | Confidential Information
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 define a framework that simplifies
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.
Globant Proprietary | Confidential Information
ThreeJs Intro

Three.js - Organization
Globant Proprietary | Confidential Information
ThreeJs Organization
● The base core of functionality is included in the three.js file.
● 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
Globant Proprietary | Confidential Information
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 define 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);

Globant Proprietary | Confidential Information
App walkthrough

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

Globant Proprietary | Confidential Information
App walkthrough
Initial setup
The first 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();

Globant Proprietary | Confidential Information
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();

Globant Proprietary | Confidential Information
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.

Globant Proprietary | Confidential Information
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.

Globant Proprietary | Confidential Information
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>

Globant Proprietary | Confidential Information
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.

Globant Proprietary | Confidential Information
App walkthrough
Model Loading - Model anatomy
● The loader automatically creates an Object3D object
and uses its children array to build the same hierarchy
defined 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);
}
}

Globant Proprietary | Confidential Information
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.

Globant Proprietary | Confidential Information
App walkthrough
Materials - PBR
PBR stands for Physically Based
Rendering, and is the most used
material model nowadays.
It defines 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.

Globant Proprietary | Confidential Information
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 file, 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 );

Globant Proprietary | Confidential Information
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

Globant Proprietary | Confidential Information
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 define Color and Intensity in the constructor.
● Directional light also needs a position and a target to define its direction.
● You must call updateMatrixWorld() after setting a new direction.

Globant Proprietary | Confidential Information
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.

Globant Proprietary | Confidential Information
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;

Globant Proprietary | Confidential Information
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.

Globant Proprietary | Confidential Information
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;
});

Globant Proprietary | Confidential Information
Questions?

Globant Proprietary | Confidential Information
Further reading

Globant Proprietary | Confidential Information
Further Reading
● Shadows
○ research.michael-schwarz.com/publ/files/shadowcourse-eg10.pdf
● PBR
○ Artist oriented - marmoset.co/posts/physically-based-rendering-and-you-can-too
○ Tech oriented - learnopengl.com/PBR/Lighting
● IBL
○ Technical breakdown and explanation - learnopengl.com/PBR/IBL/Specular-IBL
○ Free environments on HDR format - hdrihaven.com
● Cameras
○ Useful to understand the relation between the near and far plane - en.wikipedia.org/wiki/Z-buffering
● Shaders
○ A tutorial on how to create custom shaders - aerotwist.com/tutorials/an-introduction-to-shaders-part-1
● Lights
○ Three.js lights - threejsfundamentals.org/threejs/lessons/threejs-lights.html
○ Shader calculation:
www.tomdalling.com/blog/modern-opengl/08-even-more-lighting-directional-lights-spotlights-multiple-lights