Manual

User Manual: Pdf

Open the PDF directly: View PDF .
Page Count: 14

Download
Open PDF In Browser	View PDF

Aanchal Sharma

Abstract
This project aims to create a 3D object by drawing three 2D "elevations". The project
implements many features like: modeling, transform object by applying 3D
(Translate/Rotate/Scale/SHear) transformations to the created object, viewing the created
object from multiple views and generating different projections of the objects.

Introduction
The project will employ the use of WebGL which is a JavaScript API for rendering interactive
2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is
integrated completely into all the web standards of the browser, allowing GPU-accelerated usage
of physics and image processing and effects as part of the web page canvas. WebGL elements
can be mixed with other HTML elements and composited with other parts of the page or page
background. Due to this reason I am choosing to work with it. The project will be able to render
user defined images in 3D and also provide the ability to
Transform the object
V_i_e_w_ _t_h_e_ _o_b_j_e_c_t_ _f_r_o_m_ _m_u_l_t_i_p_l_e_ _v_i_e_w_s
Transform the lighting of the object
Generate different projection of the object
Change the perspective projection vanishing points
Create texture/bump/environmental mappings of the object
Analysis and Design
Week 1: Please refer:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v1/finalProject.html
I created the full working model of front and side view of my dream house.

Week 2:
Please refer:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v2/2dTransformations.h
tml. I created the full working model of top view of my dream house. Select R to rotate the view;
S for scaling, T for translation; SX for Skewing X-axis; SY for Y-axis Skew and Reset to enter
the state representing the natural state.
I also added a html page to display various planar geometric projections for a cube which we
studied in class. In order to view, please refer:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v2/projections.html

I added the top view of my dream house and the various projections of a cube.
2dTransformations.html deals with all the 2 Dimensional Transformations of dream house and
Projections.html has the various Geometric Projections of cube.

Week 3:
1) I created a 3D Transformation of a cube. For that please refer 3dCube.html file

3dCube.html

3DMouse.html

2) I created a 3D Transformation of an object. The transformation changes with the mouse
pointer. To view please open the 3DMouse.html file

3) Created a floating object for a hut. To view please refer 3DFloatingHouse.html file

3DFloatingHouse.html

4) Implemented 3D View of a room. The view changes with the movement of mouse. To view
please refer room.html file.
The initial view looks something like:

room.html

This is nothing but a room’s wall.
Click anywhere on the wall/screen and you will be redirected inside the room.

The inside view of the room

Week 4:
Page1: Periodic Table
The Tags used in creation of this webpage are: HTML5, javascript, canvas, three.js, animation,
colors. The script files used here are: three.js, tween.min.js, TrackballControls.js and
CSS3DRenderer.js Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v4/periodicTable.html.

Table View

Sphere View

Helix View

Grid View

Page 2: 3D Animation Lines for animated background color
The Tags used in creation of this webpage are: HTML5, javascript, canvas, three.js, animation,
colors. I’m using three.min.js as main JavaScript Library. For Visualization, 3d-linesanimation.js file is used. And then for frequent animated background color, color.js file is used.
The Background color keeps changing and 3D Lines can be explored by dragging the mouse
onto them. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v4/3DAnimationLines.
html. The script is fully configurable (colors, lines, opacities, perspectives).

3DAnimationLines.html

Page 3: Basic Camera Movement using three.js and WebGL
The JS file used for for the understanding of the Basics of Camera Movement is Detector.js and
three.min.js files. The Tags used in creation of this webpage are: HTML5, javascript, canvas,
three.js, animation, camera. I gave the drop-down at the top right to switch between tilt, pan,
zoom, pedestal, dolly and truck/track.

Movement DropDown
For Demo, please click:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v4/cameraMovement.ht
ml

Top View

Side View

Week 5:
This Week I implemented the following Pages:
Page 1: Texture Mapping

textureMapping.html
I am using Detecter JS for this. I am drawing the picture on canvas and later the picture is
reflected on to the sides of the cube. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/textureMapping.htm
l
The required script files are:


Page 2: Shadow Mapping
I created two light bulbs, one cylinder, one pyramid, one cube and one sphere. The sphere,
pyramid and light bulbs are static, they don’t change their position. Whereas the cylinder and
cube moves. And the shadow can be seen on the surface. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/shadowMapping.ht
ml
The required script files are:




shadowMapping.html
Page 3: pa2.html
In order to get familiar with lighting which is also fundamental to creating any scene, using
WebG, this is the best page to visit. In this assignment, I’m writing some code to help me
understand on how the lighting equations work. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/pa2.html
The required script files are:
 - utility functions for operating matrices
 - utility functions for rotating the scene using the
cursor
 - file describing the models in IFS format
 - functions used to draw the scene.

Page 4: BatMan.html
This is for extra credit. I hope you enjoy it! Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/batman.html
The required script files are:






Batman.html
Note: WebGL runs within the browser, so is independent of the operating and
window systems. You may finish the assignment using any operating system you like, e.g.
Windows, OSX or Linux. Programming language: The assignment will be implemented in
JavaScript.



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.7
Linearized                      : No
Page Count                      : 14
Language                        : en-US
Tagged PDF                      : Yes
XMP Toolkit                     : 3.1-701
Creator                         : Aanchal Sharma
Creator Tool                    : Microsoft Word
Create Date                     : 2018:04:26 00:01:29+00:00
Modify Date                     : 2018:04:26 00:01:29+00:00
Document ID                     : uuid:411B6343-D9CB-49EB-837B-28190A760199
Instance ID                     : uuid:411B6343-D9CB-49EB-837B-28190A760199
Author                          : Aanchal Sharma

EXIF Metadata provided by EXIF.tools