In chapter 2 of our text we are introduced to graphics modeling We discovered that we can build graphics models using vertex coordinates A vertex is a point and the graphics API draws lines between two points We also discovered that when the vertices form a closed object such as a polygon, we can apply a surface to it the object Finally we learned that we can put such polygons together to create objects with 3 dimensions In chapter 3 of the text, we learned how to use OpenGL functionality to implement vertices to create points, linesegments, polygons, and polyhedrons For the unit 2 assignment you must utilize the comparable functionality within WebGL to create a Polygon Square composed of 4 vertices Your square should have a surface and be either red or blue in color and must spin slowly on its access You will be given example code that creates a Polygon Triangle that is yellow in color and you will need to modify the code Make sure that you document your code with liberal comments to ensure that a reviewer understands what you were attempting to do within the assignment When you have completed the assignment, you must click on the share button and copy both the Live and Full Preview and the Code View ULS and submit with your assignment Grading Rubric You will have ONE WEEK to complete this assignment and it is due at the end of this unit Your assignment will be assessed (graded) by your peers using the following rubric You should post this assignment by submitting the URLs from the Jsbin com environment for both the Live and Full Preview and the Code View You can also submit your JavaScript code but you should only cut and paste the code into the submission dialogue box DO NOT attach the source code document Grading criteria Did the assignment output produce a Polygon with 4 vertices Was the Polygon colored either Red or Blue and was it fully surfaced Did the assignment demonstrate the ability to transform the object including Scaling increase and decrease the size of the object Rotation spin the object about its axis Transformation move the object in 3D space to another position Was the JavaScript Three js code well documented Starting Code for Assignments Assignment for CS4406 Computer Graphics container background 000000 width 100 height 100 set the scene size var WIDTH 600, HEIGHT 600 set some camera attributes var VIEW ANGLE 45, ASPECT WIDTH HEIGHT, NEAR 1, FAR 1000 get the DOM element to attach to var $container $(' container') create a WebGL renderer, camera, and a scene NOTE for the assignment in Unit 4 where you need to use a texture, or in any other assignment where a texture is required you should deactivate the Detector and use ONLY the CanvasRenderer There are some issues in using waht are called Cross Domain images for for textures You can get more details by looking up WebGL and CORS using Google search I have included some code below that will get around this issue that you can use if ( Detector webgl ) var renderer new THREE WebGLRenderer() else var renderer new THREE CanvasRenderer() var scene new THREE Scene() var clock new THREE Clock() var camera new THREE PerspectiveCamera(VIEW ANGLE,ASPECT,NEAR,FAR) the camera starts at 0,0,0 so pull it back for some assignments you may need to adjust this value some distance to make the scene visible properly camera position z 30 add the camera to the scene scene add(camera) set up the camera controls Please keep in mind that what this does is move the entire scene around because the entire scene is moving the position of the camera and lights in relation to objects within the scene doesn't change so the lighting on the surface of the object(s) will not change either var cameraControls new THREE OrbitControls(camera, renderer domElement) cameraControls addEventListener( 'mousemove', renderer ) start the renderer renderer setSize(WIDTH, HEIGHT) attach the render supplied DOM element $container append(renderer domElement) Example of Code that you can adapt to get around the issue of Cross Domain issues and CORS restrictions using textures We have this problem when using jsbin com as a development environment becuase we cannot load texture images to the local server Rather we need to pull them from location using a web URL You can use the images that we have put on the uopeopleweb com site along with the following code (modified of course for your particular program) Notice that what this code does is create a new Texture object called Texture1 and loads the texture image into the object var Texture1 new THREE Texture() var loader new THREE ImageLoader() loader addEventListener( 'load', function ( event ) Texture1 image event content Texture1 needsUpdate true ) loader load( 'http uopeopleweb com js paper jpg' ) END OF THE STANDARD CODE FOR THE ASSIGNMENT Following this is where you must place your own custom code to complete the assignment END OF YOUR CUSTOM CODE FOR THE ASSIGNMENT The rendering functions that follow are standard and can be used for this assignment You are welcome to customize them or create your own if you desire, however, you can simply use the code provided Standard functions for rendering the scene Notice how we have the animate function which submits a call to requestAnimationFrame to call animate This creates a loop that will render the scene again whenever something within the scene changes function animate() requestAnimationFrame(animate) render() function render() cameraControls update() renderer render(scene, camera) animate()

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 21, 2024

In chapter 2 of our text we are introduced to graphics modeling. We discovered that we can build graphics models using vertex coordinates. A vertex

In chapter 2 of our text we are introduced to graphics modeling. We discovered that we can build graphics models using vertex coordinates. A vertex is a point and the graphics API draws lines between two points. We also discovered that when the vertices form a closed object such as a polygon, we can apply a surface to it the object. Finally we learned that we can put such polygons together to create objects with 3 dimensions.

In chapter 3 of the text, we learned how to use OpenGL functionality to implement vertices to create points, linesegments, polygons, and polyhedrons. For the unit 2 assignment you must utilize the comparable functionality within WebGL to create a Polygon Square composed of 4 vertices. Your square should have a surface and be either red or blue in color and must spin slowly on its access. You will be given example code that creates a Polygon Triangle that is yellow in color and you will need to modify the code. Make sure that you document your code with liberal comments to ensure that a reviewer understands what you were attempting to do within the assignment. When you have completed the assignment, you must click on the share button and copy both the Live and Full Preview and the Code View ULS and submit with your assignment.

Grading Rubric

You will have ONE WEEK to complete this assignment and it is due at the end of this unit. Your assignment will be assessed (graded) by your peers using the following rubric. You should post this assignment by submitting the URLs from the Jsbin.com environment for both the Live and Full Preview and the Code View. You can also submit your JavaScript code but you should only cut and paste the code into the submission dialogue box. DO NOT attach the source code document.

Grading criteria:

Did the assignment output produce a Polygon with 4 vertices?
Was the Polygon colored either Red or Blue and was it fully surfaced?
Did the assignment demonstrate the ability to transform the object including:
- Scaling increase and decrease the size of the object
- Rotation spin the object about its axis
- Transformation move the object in 3D space to another position
Was the JavaScript / Three.js code well documented

Starting Code for Assignments

Assignment #??? for CS4406 Computer Graphics