This project is a continuation of the work of a team from the past semester. Because of this, we have some assets available for our use including pre-existing code.
Existing Materials
Below is the screen flow diagram from the previous team. We can utilize this to determine the sequence of the lab steps and get an idea of what the lab looks like in its entirety.

The code that was brought into this project from the past team was a Unity project. The environment of the lab and almost all of the lab objects had been completed. A couple of steps of the lab had been constrained/sequenced. The main framework and pieces of the lab had been completed.
Non-functional Requirements
- The project must be open source
- The project must be able to be accessed online
- The project must be in 3D and utilize 3D components
- The project should have good usability — users should be able to easily figure out what the next steps of the lab are
- The project should have good response time — interactable objects should respond to user input in no more than one second
- The project should be robust — users should be able to make mistakes in the lab and correct them
Current Team's Designs
Below is our use case diagram. This helps us visualize how the user will interact with our software and what interactions need to be supported.

New Models
Notebook
We added a notebook model for the user to interact with so that they could access the screens to record data during the lab and plot the results at the end by interacting with this model. This helps keep the user in the "lab experience." It also make it easier to direct the user when it is time to record or plot data.
Three different size of pipette tip boxes and pipette tips
We needed to add pipette tips and the boxes where they are stored to make the lab more realistic. In an actual lab setting, a new pipette tip is needed with every solution draw to keep the solution sources pure. So, making the user do this in our lab helps to build this habit. We included three different sizes because in a lab the user will see many different sizes and our client wanted to make sure the users are familiar with pipettes and how they work.
Test tube holder
We added a test tube holder to make the lab more realistic. Before this was added, the test tubes would float on the table which makes the lab seem unrealistic. We wanted to make our environment as close to an actual lab environment as possible.
Redesigns
Lab Environment
The environment that we started with was dark and dungeon-like. We changed the textures and colors to be brighter and cleaner. This helped make the lab room seem more like an actual lab.
Test tube
Our team modified the glass textures to make them a little more visible and glass-like instead of being fully transparent.
Beakers
We moved the labels of the beakers to the lower front which is where they would appear in the lab in real life. We also made the dye a more realistic color. Before this change, it was a bright yellow instead of brown - which is the actual color of the dye. We also added a beaker with an unknown protein concentration which is referenced in the lab manual for the lab we are emulating.
Deployment - GitHub Pages
We decided to host a production build of our project using GitHub Pages. This allows the software to be accessed by anyone. However, it is hosted by a personal GitHub account. Anyone with access to the source code for the project and a GitHub account with pages set up can deploy the code to a production site with the process described below.
(Assuming GitHub Pages and WebGL Unity has been created)
- Compile and merge updated code on Git.
- Pull from most recent branch to local machine.
- Create a WebGL Build from Unity.
- To reduce stress for the build, change settings under (Player).
- Other Settings -> Lightmap Encoding set to Normal or High Quality
- Remove Strip Engine Code
- Manage Stripping Level to low
- Vertex Compression to None
- Remove Optimize Mesh Data
- Set Compression Format to Disabled.
- Add files to GitHub Pages and Publish.