Lab-Assignment 1 Computer graphics: for those PDF

Preview

Summary

ITEC-517/SENG-517 Lab Assignment (30 Marks)April 26 2022A1. General Concepts [10 Marks]I. Computer Graphics (OpenGL/WebGl) basics1. If a point is inside a clipping 2D viewport, the outcode as implemented in Cohen-Sutherland algorithm isA. 0100 B. 0000 C. 0001 D. 00102. Homogenous coordinates in 2D s...

Description

ITEC-517/SENG-517

Lab Assignment (30 Marks) April 26 2022

A1. General Concepts [10 Marks] I. Computer Graphics (OpenGL/WebGl) basics 1. 2. 3.

4. 5. 6.

7. 8.

If a point is inside a clipping 2D viewport, the outcode as implemented in Cohen-Sutherland algorithm is A. 0100 C. 0001 D. 0010 Homogenous coordinates in 2D space A. Have 2 coordinates B. Have 3 coordinates C. w-coordinate is zero In which openGL primitive, the first vertex is always held fixed. From there on, every group of 2 adjacent vertices form a triangle with the first? A. GL_TRIANGLES B. GL_TRIANGLE_STRIP D. None of these For GL_QUADS, the vertices for each individual quad should be specified in ______ around quad. B. clockwise C. can be both A & B D. None Two types of shaders are A. Fragment and Polygon C. Vertex and Polygon D. None If a point is drawn at a position (10,10) on screen, after calling the glSca e2f(3.0, 2.0), the new point will be scaled __________. B. thrice C. twice D. none of these A. point size will be same its location will be (30,20) Which of following is not a supported drawing mode? B. GL_TRIANGLES C. GL_LINES D. GL_POINTS WebGL is a A. Graphics Library C. renders 3D graphics on D. All of these web

II. Programming 1. a) Write a program, Lines and in the language of your choice, that accepts our simplified inputs (line start and line end points), add features like: 

option to choose from DDA/Bresenham Algorithm



applies 2D transformations to the specified lines,



clips them to the world window, and



generates a line drawing on a windowing system

b) Modify program to draw 

draw Triangles:



animate triangle Reference: https://illinois-cs418.github.io/assignments/mp1.html



draw Rectangle



implement a 3 x 3 x 3 Rubik's Cube using OpenGL. A 3-D view of the cube is displayed on screen. User can choose to rotate the whole cube or one particular slice by using the mouse. A small popup menu is attached to the right mouse button,

ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

1

which allows the user to scramble the cube, to rotate/look around the cube, to reset the cube, or to exit from the program. 

Program to draw circles

2. a) Analyze and then explain what following opengl program is drawing? glBegin(GL_QUADS) ; glColor3f ( 0.0, 1.0,0.0 ); glVertex2f( -100, -100 ); glVertex2f( 100, -100 ); glVertex2f( 100, 100 ); glVertex2f( -100, 100 ); glEnd(); b) Write an OpenGL function to draw following shape(s) using basic primitives and assign appropriate colors.

c) Write an OpenGL function to draw a "rocket" (using simple shapes). The rocket must be constructed from a triangle and one/two rectangle(s). The function's parameters must include a vertex array for generating the shapes and assign shapes a color.

3. a) Give an openGL/WebGL implementation for the following characters.

a) simple human like character

ITEC-517 / SENG-517

b) character from Charlie's Colorforms City

Lab Assignment 1

April 26, 2022

2

3. b) Terrain Modeling (OpenGl/GLUT) The file terrain.cpp contains a C++ program and OpenGL to produce and display an interactive terrain mesh, as shown in the two images below.

There are two display windows: one is 3D Model, the other is 2D overview (not synchronized). This system includes two heightmap algorithm: circle algorithm and fault algorithm. (reference: http://www.lighthouse3d.com/opengl/terrain/index.php?circles)

Program Features: Commands

Functions

LEFT/RIGHT ARROWS

rotate the 3D model about y axis

a/d

rotate the 3D model about x axis

i

print current rotation info

r

generate a new random terrain using current heightmap algorithm

f

toggle current algorithm between circle algorithm and fault algorithm, the default algorithm is circle algorithm

y

draw the terrain using quads (strips)

t

draw the terrain using triangles (strips)

q/ESC

Close the windows and Exit

TASK: a) Modify the Program to change terrain color and 2D map b) Modify the Program to run with GL_LINE, GL_LINE_STRIP and with GL_QUAD.

ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

3

B. Projects [20 Marks]

Working as a Team 

Your ability to work as a team will be part of your final grade. Your finished product should reflect equal investment in this project.



Before beginning the project, review the project assignment and decide roles and responsibilities. For example, one person might be in charge of research while the other writes the content or script.



Break larger tasks into smaller ones, and write down due dates for each small task.



Transfer these due dates into your planner or calendar.



Hold each other accountable for these dates through meetings or “check-ins”



If one team member is concerned about another team member’s performance: ◦ The student should have an informal discussion with the other team member. If this does not yield results: ◦

A meeting should be held between the team members and a neutral student (that is, not a best friend!) who may be able to mediate the conflict. Notes should be taken during the meeting. If this does not yield results: The student who is concerned should gather the list of roles, responsibilities, due dates, and documentation of problem-solving efforts, and make an appointment with the teacher. Team/Group Members

ITEC-517 / SENG-517

Topic 1

Lab Assignment 1

Topic 2

April 26, 2022

4

Project 1: HTML5 WebGL Game or Unity WebGL game

Overview Your goal is to create a significant HTML5 Media Experience or Digital Game that is aesthetically pleasing and highly interactive. Ideally the experience will run in all modern browsers, but at a bare minimum it must run in Chrome. The objective of this project is for you to demonstrate your mastery of HTML5/CSS/JS and programming in a rich media context. You will be evaluated on your creativity, the quality of the experience you create, the soundness of your programming, and how far you went beyond what we did in class, as described below.

Project Deliverable: 1. Working Prototype Create a working prototype that illustrates the core mechanic of your game/experience.

2. Documentation You will submit documentation. It's a good idea to document things as you are working on the project. Consider setting up a google doc right away so that you can posts links and other information there as you are working. If you are working with a partner, each partner must submit separate documentation with the final project submission.  Describe what changes were made in your game/experience from your original design  Elucidate how you met the 5 categories of requirements, and be specific about any extras you did  Discuss what went right and what went wrong. List what features you would have liked to add to the project if you'd had more time  Declare any other resources (libraries, sounds, images, tutorials, sample code) you utilized.  Precisely detail the contributions of each partner to the overall project  Give yourself and your partner an overall grade on the project

3. Final Submission  ZIP up and submit.  All group members must submit final documentation

Ideas HTML5 Game Examples Types of games include shooters, platformers, tile-based puzzles, etc. Choose an existing game genre or come up with something new!  Interland Interland Interland is an educational game designed to teach kids about online safety. I think this is perhaps the best example I have come across so far of an online game created using three.js. I am particularly impressed by the overall design, general usability, and mobile controls. ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

5

 Cube Slam a browser based game, “Cube Slam is a video game that you can play face-to-face against your friends..just by sharing a link.”  Tic-Tac-Toe http://monox.mono-software.com/Blog/post/Mono/192/TicTacToe-3D-game-in-WebGL-Part-I/  other : https://freefrontend.com/three-js-games/ https://henryegloff.com/examples-of-browser-based-games-using-three-js-javascript-and-webgl/ you can even make money with HTML5 games: https://www.gamedeveloper.com/disciplines/making-money-with-html5-games Unity and WebGL speedbot: https://www3.cs.stonybrook.edu/~games/demos/SpeedBot/index.html Isotopes: http://gel.msu.edu/isotopolis-game/ VR: https://www.ucl.ac.uk/~smgxprj/vr/ https://www.cs.miami.edu/home/visser/undergraduate-projects.html other: https://stri.si.edu/megalodon/index.html https://segs.w3.uvm.edu/demos/compliance/ https://docs.unity3d.com/Manual/webgl-building.html https://www3.cs.stonybrook.edu/~games/demos/SpeedBot/index.html Resources https://wiki.etc.cmu.edu/index.php/HTML5_and_Gaming https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web https://threejs.org/examples/ https://cs.calvin.edu/courses/cs/352/files/threejs/tutorial1.html https://learn.unity.com/tutorial/creating-and-publishing-webgl-builds https://blog.logrocket.com/creating-game-three-js/ https://gamedevelopment.tutsplus.com/tutorials/creating-a-simple-3d-endless-runner-game-using-threejs--cms-29157

ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

6

https://web.chemdoodle.com/ https://vcg.leeds.ac.uk/research/student-projects/ https://gist.github.com/i09158knct/4739562 https://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954 https://experiments.withgoogle.com/search?q=WebGL https://courses.washington.edu/css450/2016.Fall/FinalProjects/index.html https://github.com/bonigarcia/webgl-examples/tree/master/basic_concepts https://webglfundamentals.org/ https://webglfundamentals.org/webgl/lessons/webgl-2d-translation.html

ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

7

Project2A: OpenGL or VULKAN Space Shooter The file shooter.cpp contains program for a game in which two players (aliens) attach each other, as shown in the images below. Each time a player gets shot, LIFE decreases by 5 points.

ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

8

Keybord control for PLAYER 1: W – UP direction.

S – DOWN

A – LEFT

D – RIGHT

C - to shoot,

Use 'w' and 's' to change

Keybord control for PLAYER 2: I – UP

K – DOWN

J – LEFT L – RIGHT

M - to shoot, Use 'I' and 'K' to change direction.

TASK: a) Modify screen colors, change character colors, change instructions to represent your name, roll no and department. b) Modify game instead of two ships, there is only one ship (one player version) and ship is flying in the space and

ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

9

Project 2B: OpenGL/VULKAN/WebGL Maze: Your task in this project is to implement a maze rendering program, not too far removed from those used in computer games of the first-person variety. This project requires that you understand and achieve several of the tasks discussed in class: viewing transformations, clipping, projection, and visibility. It is also your first, very limited, introduction to OpenGL.

Mazes:

A maze consists of rectangular cells separated by edges. The edges may be either transparent or opaque. The viewer is supposed to see through transparent edges into the neighboring cells, and they should not see through opaque edges. Each edge is assigned a color (which is meaningless for transparent edges). The maze is described as a 2D structure assumed to lie in the XY plane. You are responsible for making the maze 3D. Do this by extruding each edge vertically from the floor to the ceiling to make a wall. The floor is at z=0 and the ceiling is at z=2. Each wall should be drawn with its assigned color. Associated with the maze is a viewer. The viewer has an (x,y,z) location, a viewing direction, and a horizontal field of view. The view direction is measured in degrees of rotation counter-clockwise about the positive z axis. The horizontal field of view is also measured in degrees. For the project, the viewer is always looking horizontally, never upward or downward (or, always parallel to the floor or ceiling). This means that, after perspective projection, the left and right edges of walls are always vertical. In turn, this allows you to do all the visibility working with lines in 2D, before you extrude the walls. The maze file format consists of the following information (also look at one of the example mazes): The number of vertices in the maze, nv. Each edge joins two vertices. The location of each vertex, specified as it x and y coordinates. The vertices are assumed to be numbered from 0 to nv - 1. The number of edges in the maze, ne. Remember, there is an edge between every cell, even if that edge is transparent. The data for each edge: the index of its start vertex, the index of its end vertex, the index of the cell to the left, the index of the cell to the right, a 1 if the edge is opaque, or 0 if transparent, and an RGB triple for the color. The left side of an edge is the side that would appear to be on your left if you stood at the start of the edge and looked toward to end. If there is no cell to the left or right, an index of -1 is used. The edges are assumed to be numbered from 0 to ne - 1. The number of cells in the maze, nc. ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

10

The data for each cell, which consists of the four indices for the edges of the cell. The indices are given in counter-clockwise order around the cell. The view data, consisting of the (x, y, z) viewer location, viewing direction and the horizontal field of view. Source code can be found in the Maze.zip file. Several classes have been provided. Together they build two programs. The first program creates mazes in a certain format. The second is a skeleton maze renderer. The code is reasonably well documented, but part of the project is figuring out how the given code works and how to integrate your code into it. The programs are described below. BuildMaze The BuildMaze program provides a simple user interface for building mazes or can build them in fixed sizes. The Build Maze button builds a maze with the given parameters and displays it. The Save Maze button requests a file name then saves the maze to that file. The Load Maze button requests a maze file to load and display. Quit should be obvious. RunMaze The RunMaze program provides a skeleton for the maze walkthrough that you will implement. As provided, it displays both a map of the maze and an OpenGL window in which to render the maze from the viewer's point of view. On the map is a red frustum indicating the current viewer location, viewing direction and field of view. The map is intended to help you debug your program by indicating what the viewer should be able to see. To move the viewer, hold down a mouse button and drag in the OpenGL window. Mouse motion up or down is translated as forward or reverse motion of the viewer. Left and right mouse motion changes the direction of view. As the skeleton exists now, the viewer will move in the map window to reflect the mouse motion. The system performs collision detection between the wall and the viewer to prevent the viewer from passing through opaque walls. You should examine the code that does that to see an implementation of clipping that clips a line segment to an edge using an approach similar to Liang-Barsky clipping. The RunMaze program also keeps track of which cell the viewer is currently in, which is essential information for the cell-portal visibility algorithm you must implement. You should pay particular attention to the function draw in MazeWindow.cpp that sets up the OpenGL context for the window. As you will read later, all of the drawing you do in this project must be in 2D, so the window is set up as an orthogonal projection using the special OpenGL utility function gluOrtho2D. The draw function also draws the projection of the ceiling and the floor of the maze. You should be able to reason as to why is it safe to treat the floor and ceiling as infinite planes (hint: the maze is closed), and why those planes project to two rectangles covering the bottom and top half of the window. You do not need to change this function. C++ Classes This document will not go into details of the C++ classes provided. You should spend a considerable amount of time perusing them to figure out how everything works, and too look for little functions that will be useful in your implementation, such as functions to convert degrees to radians and back again (recall that all the C++ trigonometry functions take radians). Your Task Produce the viewer's view of the maze. You must extend the function Maze::Draw_View to draw what the viewer would see given the maze and the current viewing parameters. Note that the function is passed the focal ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

11

distance for Basic Perspective Projection, and you also have access to the horizontal field of view. Your implementation must have the following properties.

You are only allowed to use OpenGL 2D/WebGL drawing commands. In other words, any vertices you specify should use glVertex2f, glVertex2fv, glVertex2d or glVertex2dv only. You should use glBegin(GL_QUADS) to draw polygons, and glColor3f or glColor3fv to specify the polygon color. As an side effect of the 2D restriction, you must do your own viewing transformation. That is, you must take points specified in world space (where you will do the visibility) and transform them all the way into screen space (where you will draw them.) The transformation will consist of a translation and rotation to take the points from world to view space (with the origin at the viewer's location) and then a perspective division to take the view space points into screen space. Note that you are given the focal distance to make things easier, but you must still take care of several small details. Note that you can do all the transformations using basic transformation matrices followed by simple perspective. That is, you are in the Basic Perspective Projection case from the lecture notes. You DO NOT need to construct general purpose viewing transformation matrices. Reference: https://research.cs.wisc.edu/graphics/Courses/559-f2004/projects/project2/ http://users.polytech.unice.fr/~buffa/cours/synthese_image/DOCS/trant.sgi.com/opengl/examples/ more_samples/more_samples.html https://github.com/Abdullah-AlAttar/3D-Mazehttp://info.ee.surrey.ac.uk/Teaching/Courses/CGI/assignment12_maze/assignment12_maze.html http://beaugg.blogspot.com/2014/07/random-3d-mazes-in-opengl.html https://github.com/DiligentGraphics/DiligentEngine

ITEC-517 / SENG-517

Lab Assignment 1

April 26, 2022

12

Project3: Java OpenGL / OpenGL / WebGL RobotRace or Speedbot The overall theme is RobotRace: Students have to prepare an animated view of simplified human figures, moving over a race track. Template of Project is given in RobotRace.zip o mak...