lukaprijatelj / UNIVERSITY-Diploma-Assignment

Distributed rendering (Ray-tracing and Path-Tracing) with SocketIO, ThreeJS, WebGL and NodeJS

UNIVERSITY-Diploma-Assignment

Distributed rendering with ray tracing in web browsers

The main objective of our graduation thesis is to present development of the 3D scenes rendering system by using distributed devices that require only web browser for their functioning. The system we developed enables new devices to integrate in the system during the rendering process itself. Client taking part in rendering can monitor progress of other clients. When rendering is completed, every client sees entire rendered image. We will present implementation plan and initial conditions that guided us during planning. We will describe server operations and its role in the system. We will represent various types of communications among the server and clients. In the client’s scope, we will describe their operations and method used to render 3D scene. Further, we will also present problems we encountered during implementation of scene rendering. We will describe results obtained by rendering the two test scenes. Results will be represented in graphs which also present time complexity of rendering cells. At the end, we will describe our findings and potential improvements for system’s acceleration.

Screenshots

Technologies used (libraries/NPM packages)

• Javascript ES6
• Sass 1.22
• ThreeJS 0.103
• WebGL 2.0        (OpenGL es 2.0 - glsl)
• WebSockets        (SocketIO 2.2.0)
• ExpressJS 4.16
• glMatrix        (vector and matrix operations)
• uuidv1           (for GUID key generation for database tables)

Browser compatibility

• Internet Explorer 11     (not supported)
• Microsoft Edge 79
• Mozilla Firefox 24
• Google Chrome 33
• Opera 19

Compiling project with NPM

npm run build         (Compiling task will be read from scripts property of the package.json file)

How to open ADMIN webpage

• Open Web browser and type address:  http://localhost:30003/admin
• Load desired 3D scene file like *.obj
• Set up options for scene
• Press START button to send signal to client to start rendering

How to open CLIENT webpage

• Open Web browser and type address:  http://localhost:30003/client
• Browser will automatically start rendering part of the 3D scene
• You can open as many clients/tabs as you like (every client will receive a portion of scene to render)

Used ports

HTTP protocol uses port 30003.
SocketIO library uses port 30004.

How to connect Chrome browser with Android mobile phone

• Use command prompt to run ADB, in cmd go to the install directory of the ADB tools and type:
  adb.exe (starts program)
  adb start-server (or "adb kill-server")
  
• Connect phone and browse to about:inspect in Chrome on desktop, ensuring a Chrome browser is open on your device