Group 3 of CSIT6000L Digital Design, 2022 Spring
./test_all.sh
Thin-lens Camera used to simulate the lens in physical camera, which the focus length can be manually control to focus on a range of focus distance. The related formula is:
1/f = 1/s + 1/i, where f, s, i are focus length, distance between image panel and lens, distance between lens and focal panel respectively.
In our implementation, s remain constant, so f is depend only on the given i (focus length).
| Distant object burring | Close object burring |
|---|---|
 |
 |
 |
 |
Normal output
Blurred with focus_length=6.5
Blurred with focus_length=3.5
-blurry [focus_length]
git clone https://github.com/yaindrop/6000lproj.git
cd 6000lproj
python -m http.serverThe Web UI is powered by WebAssembly and Emscripten, which can run the C++ renderer entirely inside the browser, without the need for any backend
A progress bar is provided for better user experience. The rendering can also be manually stopped in case it's too slow with some arguments
The feedback frequency indicates how many times in a second to interrupt the rendering and report progress or receive stop instruction. It can be used as a trade-off between rendering time and UI responsiveness
The arguments settings panel can control all the rendering arguments intuitively
The input scene file is entered through a cascading selector
The CLI command can also be generated with the settings panel
The Web UI also provides a file system sandbox based on the Emscripten FS API, allowing easy access to scene definition files and output files
The file system sandbox comes with a scene definition editor powered by the Monaco Editor
To improve the editing experience, the scene definition DSL is parsed using the Chevrotain Parser Building Toolkit. The Concrete Syntax Tree (CST) is visualized as the following rail diagram
The parsed scene CST is then converted and binded to corresponding Abstract Syntax Tree (AST) (defined here), which is used to generate a series of functionality providers used by the Monaco Editor
The tokens in the scene definition files are colored according to their corresponding AST type
Upon a failed AST parsing, the failed token is located and an error message is displayed
- Unexpected Name
- Unexpected Value
- Misplaced Block
- Missing Argument
The auto-fromatter is also built with the AST and can be invoked using Shift+Alt+F
- Linux environment preferred (Arch Linux / Ubuntu)
- Windows Subsystem of Linux is recommended
# For Arch Linux
sudo pacman -S nodejs npm
# For Ubuntu
sudo apt-get install nodejsnpm install --global yarn- Emscripten SDK (in ~/emsdk by default)
cd ~
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git
# Enter that directory
cd emsdk
# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull
# Download and install the latest SDK tools.
./emsdk install latest
# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest- In the project directory, build the web module using Emscripten SDK
# Activate PATH and other environment variables in the current terminal
source ~/emsdk/emsdk_env.sh
# Build the project
emmake make web- Install node modules
# Enter the front directory
cd front
# Install node modules
yarn- Host the frontend
-
Start the development server
yarn start
-
or build packaged frontend
yarn build # If you have python installed, start HTTP server to view results python -m http.server -d dist/