ACM IIT ROORKEE

Polygon Collider Visualizer

Session 1 : Setup and Basics of

computer graphics
 Time Line: PolCol

1st week 2nd week 3rd week

● Creating simple cube ● Learning about the soul of ● Innovating the progress made
animation project, GJK algorithm so far, by applying CSS, and
● Creating two polygons additional functionalities of
approaching each other ● Advancing to 3D shapes and three js.
objects.

● Modify the algorithm for collision

detection in dynamic space.
 Computer Graphics

● Graphics is all about the digital way of

visualising art and motion. It is a very
interesting field of computer science, in
which creativity, logic (maths), physics all
can be seen being intermingled.
Rendering
Rendering is the process of a computer taking raw information from a scene(polygons,
materials, and lighting) and calculating the final result, the result being displayed on the
required device.
There are two categories of rendering: Pre-rendering and Real-time rendering.

 Pre-Rendering technique is used in environments where speed is not a concern and the
level of photorealism is of utmost importance. Eg. Movies, animation

 Real-Time Rendering is the prominent rendering technique using in interactive graphics

and gaming where images must be created at a rapid pace. Because user interaction is
high in such environments, real-time image creation is required
Graphics Terminology
● Scene: The space which will be recognized for further processes,
hence making the 3D space of importance

● Camera: The viewing concept that shows graphics and scene

according to the angle and distance from the objects.

● Renderer: Produces the given information on the screen using

rendering techniques.
 three.js

● three. js is a JavaScript-based
WebGL engine that can run
GPU-powered games and other
graphics-powered apps straight
from the browser. The three. js
library provides many features
and APIs for drawing 3D scenes
in your browser.
THANKS