Minecraft-like Game Scene Renderer

Group 3 of CSIT6000L Digital Design, 2022 Spring

Web UI Entry

Project Report

Presentation Slides

Presentation Script

Test

./test_all.sh

Blurring Feature

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).

Illustration

Distant object burring	Close object burring

Rendering Result

Normal output

Blurred with focus_length=6.5

Blurred with focus_length=3.5

Flag

-blurry [focus_length]

Web UI

Online Preview

via GitHub Page

Serve from local (via Python 3)

git clone https://github.com/yaindrop/6000lproj.git

cd 6000lproj

python -m http.server

Features

In-Browser Rendering

The Web UI is powered by WebAssembly and Emscripten, which can run the C++ renderer entirely inside the browser, without the need for any backend

Progress Bar and Stop

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

Feedback frequency

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

Argument Settings Panel

The arguments settings panel can control all the rendering arguments intuitively

Input Scene File Selector

The input scene file is entered through a cascading selector

Command generating

The CLI command can also be generated with the settings panel

File System Sandbox

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

Scene Definition Editor

The file system sandbox comes with a scene definition editor powered by the Monaco Editor

Parsing the Scene Definition DSL

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

Semantic Highlighting

The tokens in the scene definition files are colored according to their corresponding AST type

Semantic Parsing & Error Suggestion

Upon a failed AST parsing, the failed token is located and an error message is displayed

• Unexpected Name
• Unexpected Value
• Misplaced Block
• Missing Argument

Auto-formatter

The auto-fromatter is also built with the AST and can be invoked using Shift+Alt+F

Build Prerequisites

1. Linux environment preferred (Arch Linux / Ubuntu)

• Windows Subsystem of Linux is recommended
  • Ubuntu WSL
  • Arch WSL

2. NodeJS (v17.9.0 or above) and NPM

# For Arch Linux
sudo pacman -S nodejs npm

# For Ubuntu
sudo apt-get install nodejs

3. Yarn Package Manager

npm install --global yarn

4. 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

Build

1. 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

2. Install node modules

# Enter the front directory
cd front

# Install node modules
yarn

3. 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/