1 Project 4 WebGL 3D Project Overview In this project you will create a unique 3D animated scene composed of WebGL graphic components. The scene should include animation, lighting, textures, frame...

In this project, you will create a unique 3D animated scene composed of WebGL graphic components. The scene should include animation, lighting, textures, frame buffers, and multiple objects.


1 Project 4 WebGL 3D Project Overview In this project you will create a unique 3D animated scene composed of WebGL graphic components. The scene should include animation, lighting, textures, frame buffers and multiple objects. Requirements: 1. Using WebGL create a unique 3D animated scene. The scene has the following specifications: a. Size: minimum 640x480 b. Includes at least 10 different objects. c. Uses multiple lighting effects on different materials d. Uses multiple textures e. Includes radio buttons, slider bars or other widgets to turn on or off certain components of the animation. f. Uses frame buffers to organize the memory resources that are needed to render the scene. 2. Use WebGL 3. All JavaScript source code should be written using Google JavaScript style guide.( http://google.github.io/styleguide/jsguide.html) 4. Prepare, conduct and document a test plan verifying your application is working as expected. This plan should include a test matrix listing each method you tested, how you tested it, and the results of testing Deliverables: 1. All JavaScript source code used for this project. Code should adhere to the Google Javascript style guide. 2. Word or PDF file demonstrating with clearly labeled screen captures and associated well-written descriptions, the successful execution of your 3D WebGL animated scene. The document should be well-written, well-organized, include your test plan, include page numbers, captions for all screen captures, and a title page including your name, class, section number and date. References should be included for all sources used and formatted in APA style. Grading guidelines: Attribute Meets Design 20 points Methods used to isolate functionality (10 points) Code is efficient without sacrificing readability and understanding. (5 points) Code can easily be used and maintained. (5 points) Functionality 50 points Creates a unique 3D animated scene. (10 points) 2 Size is at least 640x480. (5 points) Includes at least 10 different objects. (5 points) Uses multiple lighting effects on different materials. (5 points) Uses multiple textures. (5 points) Includes radio buttons, slider bars or other widgets to turn on or off certain components of the animation. (10 points) Uses frame buffers to organize the memory resources that are needed to render the scene. (5 points) Uses WebGL (5 points) Testing 10 points Prepares, conducts and documents a test plan verifying the application is functioning properly. (10 points) Documentation and deliverables 20 points Submits all JavaScript source code used for this project. (5 points) Code adheres to the Google JavaScript style guide. (5 points) Submits Word or PDF file demonstrating with clearly labeled screen captures and associated well-written descriptions, the successful execution of your 3D Three.js scene. (5 points) The document is well-written, well-organized, includes the test plan, includes page numbers, captions for all screen captures, and a title page including your name, class, section number and date. References are included for all sources used and formatted in APA style. (5 points) 1. Overview The project draws three simple images on a frame then applies translations, rotations, and scaling to the images. The different effects are done automatically with a timer that moves to the next frame. The effects are additive. There are two java classes in the project. Project1GUI.java is the main class the runs the logic and creates the GUI. The second class, Project1_Images.java creates the 2d representations of the images. In the second class, there are currently 3 images stored. The images are stored in 2d arrays. When the getImage() method is called, the parameter determines which image is returned. Based on the parameter provided a new BufferedImage is created using the 2d array. All of the images are have two colors. The first image is a horizontal line, the second is a vertical line, and the third is a checkerboard design. The method goes through the 2d array and assigns a color to the BufferedImage at the same index with the setRGB(x, y, pixelColor) method. The BufferedImage is used in the paintComponent() method of Project1GUI.java Project1GUI.java’s main method creates the GUI. The paintComplonent() method is overridden. The method determines the values for which transformations should be done by examining the frame index. The frame index cycles through 0 – 6 based on the timer. The first two cases, frames zero and one, set the images to the default positions, with no translations, no rotation and no scaling. The third case, frame two, translates the images to the left by 5 pixels. The next case translates the images up 7 pixels. The next case rotates the images 45 degrees counterclockwise. The next case rotates the images 90 clockwise. The next case scales the image in the x direction by 2.0 and the y direction by 0.5. The frame index then loops back to frame zero. 2. Execution There are 6 frames of animation for this program. The first two are identical. The third frame translates the images 5 pixels to the left. Figure 1. The first two frames of animation. Figure 2. The third frame of animation. The fourth frame translates the images 7 pixels up. The fifth frame rotates the image 45 degrees counterclockwise. Figure 3. The fourth frame of animation. Figure 4. The fifth frame of animation. The sixth frame rotates the image clockwise 90 degrees. For a total of a 45 degree clockwise rotation. The final frame of animation scales the images by 2.0 in the x direction and 0.5 in the y direction. Figure 5. The sixth frame of animation. 3. Testing The first step in testing was to take the template provided that had two duplicate images and change it to include a new image and increase the size of the images from 10 pixels to 25 pixels. The first step was to change the constants from 10 to 25. Then a new 2d array was created that used loops to hold the data and represent a horizontal line. A new method was created so that the original could still be used. The new method returned the new test image as a BufferedImage. The second call to drawImage() in the paintComponent() method was changed to use the new BufferedImage instead of a duplicate of the original image. Figure 6. The final frame of animation. The next thing to test was all three custom images. Figure 7. The new image next to the old image. Figure 8. The custom images added to the GUI. Test Case Input Expected Output Actual Output Result Translation Change translateX to -5 Objects move to the left slightly Images move to the left Pass Rotation counterclockwise Change rotation += 45*Math.PI / 180.0; Images rotate counterclockwise and point at the top left corner Images rotate counterclockwise Pass Rotation clockwise Add new case statement with rotation += (- 90*Math.PI / 180); Images rotate clockwise and point at top right corner. Images rotate clockwise Pass Scale x and y Add new case statement with scaleX += 1.0; and scaleY -= 0.5; Images get wider and shorter. Horizontal bar becomes longer, vertical bar becomes shorter Pass Figure 9. Test cases for the program.