Class[3][5th jun] [three js]

ALGORITHMS, COMPUTER GRAPHICS,
AND MATHEMATICS FOR GAME
DEVELOPERS & COMPUTER
SCIENTISTS
Class[3]: Introduction to JavaScript [Part 2] + Introduction to Computer
Graphic [Part 1]
PREPARED AND PRESENTED BY
Dr.Saajid Abuluaih, PhD
5th of Jun, 2021

Algorithms, Computer Graphics, and Mathematics
for Game Developers and Computer Scientists
© 2021 arche1.co.jp | jaist.ac.jp
All rights reserved.
2
Agenda
One-Bite Wisdom
Debug JS Code
JavaScript + ThreeJS
𝑖
Introduction to Computer Graphic
JS Code Integration
Today’s Algorithm
𝑔
𝑛
“The future is not just unwritten - it is unsearched”
-Bruce Sterling

P A G E 3
One-Bite Wisdom
Four-Color Theorem

4
GRAPH COLORING
FOUR-COLOR THEOREM
How many colors do you think we need to color “conservatively” (the minimum number of colors) the
following picture such that no two adjacent regions are colored with the same color?
Only two colors are enough to color the above picture. Two-color theorem theorize that a map with only
straight lines, curves, or closed loops requires not more than two colors to be colored
References:
Discrete Mathematics and Probability Theory
Four color theorem
The Four-Color Map Theorem - Numberphile

5
GRAPH COLORING
FOUR-COLOR THEOREM
Map coloring was first used by cartographers to depict different segments on a map to display different
elevations, kind of roads, or even political boundaries. This problem demands the minimal number of
colors to be applied to make maps easier for reading, which makes the problem a mind challenging puzzle
as well.
References:
Discrete Mathematics and Probability Theory
Four color theorem
The Four-Color Map Theorem - Numberphile
One of the favorited theorems for mathematicians is Four-Color Theorem. The theorem proposes that
every existing map can be colored using only 4 colors such that no two adjacent countries would be
colored with the same color …

P A G E 6
Today’s Algorithms
Let’s Brush our Coding Skills

Write a function ‘fib(n)’ that takes in a number as an argument and returns the nth number of the
Fibonacci sequence.
Example:
n: 1st , 2nd , 3rd , 4th , 5th , 6th , 7th , 8th , 9th …
Fib(n): 1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 …
7
TODAY’S ALGORITHM,
FIBONACCI SEQUENCE

Fibonacci sequence.
Example:
Fib(n): 1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 …
8
FIBONACCI SEQUENCE
function fib(n){
return (fib(n-1) + fib(n-2));
}
This algorithm will be an introduction
to Dynamic Programming that we’ll see next week

Fibonacci sequence.
Example:
Fib(n): 1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 …
9
FIBONACCI SEQUENCE
function fib(n){
if (n <= 2) return 1;
else
return (fib(n-1) + fib(n-2));
}
This algorithm will be an introduction
to Dynamic Programming that we’ll see next week

P A G E 10
JS Code Integration
Get your code integrated with your webpage

11
JS CODE INTEGRATION,
THE HTML DOM (DOCUMENT OBJECT MODEL)
References:
JavaScript HTML DOM
The HTML DOM is a standard object model and programming interface for HTML. The browser produces a
Document Object Model of a web page when it is loaded. The HTML DOM model is built as a tree of
Objects as follows:
JavaScript is designed to interact with the object model to create/manipulate HTML documents
dynamically. It can:
• Change the elements order and content in the page
• Alter the existed elements or remove them
• Change CSS styles
• Change, add, and remove elements’ attributes
• Handle events when users interact with the HTML

12
HTML5 DOCUMENT STRUCTURE
References:
HTML5 Page Structure
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
The Document Type Declaration, or doctype, is the first element on a standard HTML page. This tells the
browser what kind of document it's looking at. Any HTML file's doctype is always the first element at the
top. Then there are sections and subsections, each with its own title and subheading. These heading and
sectioning components help the reader in comprehending the meaning of the text.
The <head> element contains metadata (document title, character set, styles, links, scripts), specific
information about the web page that only browsers use (not displayed to the user). In <head> element,
<link> and <script> elements can be added. Link element establishes the link between the current HTML
document and the external resource. It's usually used to point to an external CSS stylesheet. Whereas
script element may used to include a JavaScript file.
<link rel="stylesheet" type="text/css" href="style.css">
<script src="/js/myScript1.js"></script>

13
IN A WEB PAGE USING <SCRIPT> TAGS
- The <script> tag is used to embed JavaScript code.
- The <script> element used either for embedding some JavaScript client-side code, or it points to an
external JavaScript script file using the src attribute.
<body>
<div id="TextArea"></div>
<script type="text/javascript">
for (var i = 0; i < 10; i++) {
if (i < 5)
document.getElementById("TextArea").innerText += " " + i;
}
</script>
<script src="/js/myScript1.js"></script>
</body>

P A G E 14
Debug JS Code
Get your code integrated with your webpage

15
DEVTOOLS ON GOOGLE CHROME
Chrome DevTools is a set of web developer tools built directly into the browser which helps in editing
pages on-the-fly conveniently and debug your code.
There are several ways to access different part of the DevTools UI:
• Simply R-Click anywhere in the document and select Inspect from
• Use F12 to open DevTools.
• Control+ Shift + C to select Inspect and jump directly into Elements Panel.
• Control + Shift + J to to jump directly into the Console panel.
References:
Chrome DevTools
Chrome DevTools. Similar tool existed
in almost all other browsers as well

16
DEVTOOLS: OUTPUT TO CONSOLE FOR
DEBUGGING PURPOSES [Part 1]
- console.log() / console.debug():
allows you to output messages or variables value to the console panel.
References:
Console MDN Web Docs
- console.worn() / console.error():
allows you to output messages to the console with distinct label
color.
Note: ‘undefined’ message
that you see means that the
function didn’t return any
value. It is expected that a
function returns a value.

17
References:
• console.dir(document.body):
displays an interactive list of the properties of
the specified an object.
• console.table():
This function logs data as a table. Very useful
to printout arrays and objects

18
References:
- window.alert(message):
a very common function to show messages without accessing the console.
- window.prompt(message):
Another very common function for reading user inputs and showing messages
simultaneously.
- console.clear():
A function the clear the outputs on console panel (you can press t “Clear Console” button
or press control + L).

19
DEVTOOLS: DEBUGGING WITH THE DEBUGGER
- In sources panel, find your file.
- Click beside the line number to add a breakpoint
- Run the application
- Use the following buttons:
- Step over next function call
- Step into next function call
- Step out of the current function
- Use the following panels:
- Scope
- Watch
- Breakpoints
- Try conditional breakpoints

P A G E 20
JavaScript + ThreeJS
Introduction to the 3D world

WebGL is an API (Application Program Interface) that controls GPUs. WebGL is
based on OpenGL ES (for Embedded Systems), an API for mobile devices which
itself is based on OpenGL. OpenGL is an API for desktop computers that dates
back to 1992.
Three.js is a JavaScript framework that uses WebGL to generate dynamic 3D
computer graphics in a web browser without relying on proprietary browser
plugin.
21
JS + THREEJS,
GETTING STARTED WITH ThreeJS
References:
Three.js
OpenGL ES
OpenGL

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://threejs.org/build/three.js"></script>
</head>
<body>
<script></script>
</body>
</html>
22
JS + THREEJS,
CREATE A SIMPLE 3D SCENE
Create the basic HTML document structure and add the CDN reference to
ThreeJS library.
TIP: You can create the basic HTML structure with VS Code by typing
exclamation mark and then hit tab from the keyboard :: ! -> tab

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://threejs.org/build/three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/window.innerHeight, 0.1, 1000 );
</script>
</body>
</html>
23
JS + THREEJS,
Create a scene and a camera as follows:
Move the camera back on z axis:
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
24
JS + THREEJS,
Add the renderer and append it to the document:
Render the scene
renderer.render( scene, camera );
Create a box geometry 1,2,1 with red material and attach it to the scene
var geometry = new THREE.BoxGeometry( 1, 2, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
The 3d geometry is going to look like this:

var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
renderer.render( scene, camera );
};
animate();
25
JS + THREEJS,
Add some animation:
We have created a scene with a rotating box using only few lines of code!

P A G E 26
Computer Graphics
Introduction

In CGI (Computer-Generated Imagery), a 3D scene is made of
objects that having a very wild variety of shapes, appearances
and structures arranged in a three-dimensional representation
of geometric data. These objects are sorted in the computer for
the purpose of performing rendering into 2D images.
27
Computer Graphics,
3D scene
References:
3D computer graphics
A basic 3D scene consist of 3d objects and
their materials, cameras, and light sources.
(Image Source)
Basically, a 3D scene defines a virtual world that contains three
main elements:
• 3D Objects: described by some 3D geometry and material
description that defines the looks of the current object and
how light interacts with it. These object can be in a
continues motion.
• Light Sources: describe the position, the motion, and the
direction of each light in the scene.
• Cameras: describe the view frustum, and the motion of
each camera in the scene.

In 3D Computer Graphic, the imagery generation considers
only those objects located within a pyramid-shaped view of
the world that is called the view frustum
28
Computer Graphics,
View Frustum
The near plane at distance n and the far plan at
distance f from the camera C define the View
frustum. (Image source)
BTY, frustum means a pyramid with a head chopped off
References:
Viewing frustum
(Image source)

3D rendering is the process of converting the data of 3d
objects into 2D images. In other word, to render is to create
an image, or simply depiction.
29
Computer Graphics,
3D rendering
3Ds Max Scanline renderer
References:
3D rendering

Interactive rendering means that a user can instantly
interact with an application, resulting in a changes in the
final rendered images of a 3D world printed to screen.
Examples:
Video games
Simulations application
30
COMPUTER GRAPHICS,
INTERACTIVE 3D RENDERING
References:
Protected interactive 3D graphics via remote rendering
Interactive 3D Rendering - Interactive 3D Graphics
Interactive 3D Visualization in Jupyter | SciPy 2018 | Maarten Breddels

A regular classic monitor refreshes at 50~60 Hz (You need to see the new monitors that refresh at 120Hz)
which means, it redraw the signals 50~60 times per second which gives an upper limit on the frame rate.
Move the mouse fast enough and see what happens. That is called a refresh rate.
An application can display 10 frame per second (FPS), which means that many of the redrawn images are
the same.
In movie industry, a frame rate of 24 fps is considered standard, though the refresh rate can go up to
72Hz. Which means, each frame is repeatedly projected two or three times.
In game industry, that frame rate considered too low. Thus, a frame rate of 30 to 60 frame per second is
considered standard.
31
COMPUTER GRAPHICS,
REFRESH RATE VS FPS
References:
Frame Rate vs. Refresh Rate: What’s the Difference?
Frame Rate (FPS) vs Refresh Rate (Hz)

When the 3D engine decide to render a frame, it passes polygons after breaking them down to
triangles. However, the renderer need to decided which triangles need to be rendered first in case they
overlapped.
Painter algorithms decided to draw object one on top of another.
Then you render the most distant object first, then the next closest object,
and so on and so forth
However, that comes with a downside. Take a look at the following figure
and try to guess which object need to be rendered first:
32
COMPUTER GRAPHICS,
PAINTER’S ALGORITHM
The Flaw is that it can get into a cycles of objects that partially hidden behind each other.
References:
Painter Algorithm
Painter’s Algorithm in Computer Graphics
Image source
Image source

The way the GPU solves the visibility problem, is by using Z-
buffer. The ‘Z’ in the Z-buffer stands for the distance
between the camera and the objects.
So, in addition to store the color of pixels in an image we
store their distance, which known as z-depth, which is a
number that ranges from 0.0 to 1.0
0 is the closest to the eye and 1 is the maximum distance.
When we render a scene, we check the depth of each pixel
against all object in the view frustum to know whether it
overwrites the existed value or not.
33
COMPUTER GRAPHICS,
Z-BUFFER
References:
Z-Buffer Algorithm
Z-buffering
Image source
Image source

P A G E 34
HOMEWORK
Let's Exercise What We've Learned

• write a program that converts pounds into kilograms. Use windows.prompt() to ask the user for how
many pounds they want to convert, then output the result of conversion to the console.
• Write a program that creates a 3d scene with a cone geometry in it. The cone has to have the
following parameters: radius = 4, height = 10, radial segment = 40.
35
DEADLINE 19/6,
HOMEWORK

Algorithms, Computer Graphics, and Mathematics
for Game Developers and Computer Scientists
THANKS FOR YOUR
ATTENTION

Class[3][5th jun] [three js]

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to Class[3][5th jun] [three js]

Similar to Class[3][5th jun] [three js] (20)

Recently uploaded

Recently uploaded (20)

Class[3][5th jun] [three js]