Due: Monday, May 2, 11:59pm CDT
Note: Late points are not applicable to this assignment.
The purpose of this assignment to apply the graphics concepts you have learned in class to design and implement your own 3D game! This is an optional bonus assignment that will replace the lowest score on the previous programs only if it benefits your grade.
Unlike the work we have done previously, this assignment is completely open-ended. You are completely free to implement whatever interactive 3D graphics program you want, so long as you meet the specific requirements listed below. If you want to make a more serious application instead than a game, that is also possible. This is your opportunity to show off what you can do with 3D graphics!
You should fill out this information before submitting your assignment. Make sure to document the name and source of any third party assets that you added, such as models, images, sounds, or any other content used that was not solely written by you.
Name:
Third Party Assets:
/* Add your design specification here. This should include:
* Motivation/objective of the application
* Description of all its features and functions
* Complete instructions for the controls
* Anything else we need to know to run and grade your program.
*/
To work with this code, you will first need to install Node.js and Visual Studio Code.
The starter code implements the same basic structure that we have used in other programs in this class. After cloning your repository, you will need to set up the initial project by pulling the dependencies from the node package manager with:
npm install
This will create a node_modules folder in your directory and download all the dependencies needed to run the project. Note that this folder is .gitignore file and should not be committed to your repository. After that, you can compile and run a server with:
npm run start
The build system should launch your program in a web browser automatically. If not, you can run it by pointing your browser at http://localhost:8080.
You have a great deal of freedom in implementing this assignment. Although your program does not necessarily need to be a game, it should some specific goal or objective for the user. It another words, just drawing a bunch of 3D objects on the screen for no particular reason will not be sufficient. Your program will be graded out of 20 points according to the following criteria:
- Write a detailed design specification, as described in the "Submission Information" section. (2)
- A basic scene has been created for you, including a ground plane, skybox, and a couple lights. You should either extend or replace these existing objects to create a more visually interesting scene. You can feel free to use shapes built-in to Three.js or import 3D models that you find online, although make sure to cite any third party content that you include in your program. (3)
- Your program should be interactive. You are free to implement this however you want, including using the keyboard, mouse, or GUI widgets. However, just drawing static objects on screen with no user interaction will not be sufficient. (3)
- Your program contains at least five moving 3D objects. They can either be directly controlled by the user, animated using prerecorded data, or physically simulated using gravity/collisions. (4)
- Your program should make use of collision detection to do something interesting when (at minimum) two objects collide. (4)
- Your program should include at least one 3D mesh with dynamic vertex properties. For example, it could morph into another 3D shape or change other vertex buffers, such as normals or colors. (2)
- At least two objects in the scene should be texture mapped. (2)
Similar to previous assignments, you can earn one bonus point for going above and beyond the basic requirements for this assignment. However, the criteria for being a "wizard" is a bit less specific due to the open-ended nature of the assignment. During grading, we will look for the students that have truly attempted to do something exceptional, ambitious, or creative. If you have a specific feature that you are proud of and would like us to make sure we consider it for the wizard bonus, please note this in the "Submission Information" section of your readme file.
In this assignment, you may want to download art assets on the internet. A couple good sources for free 3D models include CGtrader and Kenney. However, make sure to document all the third party assets included with your project, and include links to wherever you found them. Points may be deducted for third party assets that are not documented!
When you commit and push your assignment to GitHub, an automated script will build and deploy the production code to the gh-pages branch of your repository. However, your submission is not complete until you do the following:
- Open your repository on GitHub and go to Settings->Pages.
- Change the source to the
gh-pagesbranch, then save.
You will need to wait a few minutes for the website to deploy. After that, make sure to test everything by pointing your web browser at the link generated for your build:
https://csci-4611-spring-2022.github.io/your-repo-name-here
If your program runs correctly, then you are finished! The published build will indicate to the TAs that your assignment is ready for grading. If you change your mind and want to make further changes to your code, then just delete the gh-pages branch and set the GitHub pages source back to None, and it will unpublish the website.
Note that the published JavaScript bundle code generated by the TypeScript compiler has been minified so that it is not human-readable. So, you can feel free to send this link to other students, friends, and family to show off your work!
Material for CSCI 4611 Spring 2022 by Evan Suma Rosenberg is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.