Repository navigation
Engineering Addendum
Installation:
The project can be installed by installing blender and the humangen add-on as well as cloning the repository from GitHub. This will install all the required software onto the user’s laptop.
Install Blender from https://www.blender.org/download/
Download the blender plugin from https://blendermarket.com/products/humgen3d
Clone the GitHub repository by running the following command :
git clone git@github.com:VFitSeniorDesign/VFiT-Codebase.git
Switch to the branch aryaman_testing: git checkout aryaman_testing
The repository can be found at https://github.com/VFitSeniorDesign/VFiT-Codebase/tree/main
Setup:
Once all the software is installed, the project can be setup by running the following commands:
Switch to the repo: cd VFiT-Codebase
Make a virtual environment: python3 -m venv venv
Activate venv: (mac) source venv/bin/activate (windows) venv/Scripts/activate.bat (or activate.ps1 for powershell)
Install requirements: pip install -r r.txt
Initialize Database: python3 manage.py makemigrations && python3 manage.py migrate
Activate backend server: cd backend && python3 manage.py runserver
Activate frontend server (new terminal): a. cd frontend b. npm install c. npm start
Create a directory for the 3D Models: cd backend && mkdir media/savedModels
This will launch the web application at port 3000 and also run a local server. Afterwards, the user can login and create their model. The model will be created in Blender, which will be displayed on the website. The user’s latest model will be saved and ready to view upon another login.
The web application will also alert the user to any errors and ways to fix them.
Software Report
Our project can be divided into three components that are displayed below as a block diagram (Fig. 2.1). The first component is the web app that the user interacts with. The frontend of the web app is created using ReactJS and has multiple subcomponents. The web app provides the user with a signup and login page. It also interacts with the database using JWT Tokens to authenticate the user.
The user can create a model by submitting a form containing fields that describe how the model should look including height, age, muscularity, skin color, clothing option etc. This makes an API call to the local server which will initialize a local instance of Blender and run a python script with all the parameters to create the model.
In Blender, the python script will use the parameters and the Humangen library to create a human model as per the specifications. Then it will rig the clothing onto the models and apply physical properties to them.
The model is exported as a GLB file. We also bake the textures and export them as PNGs. These files are then sent to the web app which uses three.js to display the 3D model to the user.
2.1. Overview block diagram
Fig. 2.1 An overview of the system design
Overview of Each Software Module
Django (Backend Server)
Functionality: Django serves as the backend server in this setup. It handles API requests from the React frontend, processes them, and manages the interaction with Blender.
Responsibilities: Managing the API endpoints, receiving body parameter inputs from React, invoking Blender operations, and handling the output (baked and exported models) to be sent back to the client.
React (Frontend)
Functionality: React is used for building the user interface where users input body parameters and view the rendered models.
Responsibilities: Capturing user inputs, sending API requests to the Django server, and displaying the models received from the backend.
Blender with Human Generator Add-On
Functionality: Blender, equipped with the Human Generator add-on, is responsible for creating 3D human models based on parameters received from the Django server.
Responsibilities: Generating, baking, and exporting 3D models as per the specifications received from the Django backend.
React Components Overview
AttributeHelpModal.js
Description: This component provides a user interface for displaying help or information about the different attributes that can be set for a humanoid model.
CreateModel.js and CreateModel.css
Description: These files together make up the component that includes the form or interface where users can input parameters to create a new model.
Humanoid.js and HumanoidModel.js
Description: These components manage the display and the interaction with the 3D humanoid models in the frontend.
LoginPage.js and LoginPage.css
Description: These files make up the component that handles user login functionality.
PresetSelector.js
Description: A component that allows users to select from preset configurations for quickly generating models.
Blender Script Overview
create_human
Description: This function creates a human model in Blender using specified attributes and the Human Generator add-on.
customize_body_settings
Description: Returns a dictionary of body settings based on provided parameters like muscularity, skinniness, and overweight.
main
Description: The main function of the Blender script. It processes command line arguments (which would be sent from the Django backend), generates the human model using the create_human function, saves baked images, and exports the final model in GLB format.
Package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000/",
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.14",
"@mui/material": "^5.15.14",
"@react-three/fiber": "^8.15.16",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.8",
"bootstrap": "^5.3.2",
"jwt-decode": "^4.0.0",
"react": "^18.2.0",
"react-bootstrap": "^2.10.1",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.22.0",
"react-scripts": "5.0.1",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1",
"three": "^0.135.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Copy Of Old Reports
User Manual : User Manual Senior Design Team 17
Final Testing Plan: Final Testing Plan
Final Testing Report: Final Testing Report Team 17
Second Prototype Testing Report: Second Prototype Testing Report