Skip to content

INSTALL.md

Latest commit

 

History

History
296 lines (197 loc) · 6.67 KB

INSTALL.md

File metadata and controls

296 lines (197 loc) · 6.67 KB

UNIWA

UNIVERSITY OF WEST ATTICA
SCHOOL OF ENGINEERING
DEPARTMENT OF COMPUTER ENGINEERING AND INFORMATICS

University of West Attica · Department of Computer Engineering and Informatics

Computer Graphics

Building a 3D Graphics Scene Using WebGL

Vasileios Evangelos Athanasiou
Student ID: 19390005

GitHub · LinkedIn

Antonios Kokkinos
Student ID: 20390107

GitHub

Pantelis Tatsis
Student ID: 20390226

GitHub · LinkedIn

Supervision

Supervisor: Georgios Bardis, Assistant Professor

UNIWA Profile

Athens, July 2024

INSTALL

Building a 3D Graphics Scene Using WebGL

This project is a pure WebGL (HTML + JavaScript) application and does not require compilation or external build tools.
It runs directly in a modern web browser with WebGL support.

1. Prerequisites

Before running the project, ensure the following requirements are met.

1.1 Software Requirements

  • Modern Web Browser with WebGL enabled:
    • Google Chrome
    • Mozilla Firefox (recommended)
    • Microsoft Edge
  • Local HTTP Server (required for texture loading)

Important
Due to browser security restrictions, WebGL cannot load textures correctly when HTML files are opened directly (file://).
A local web server is mandatory.

2. Repository Setup

2.1 Clone the Repository

git clone https://github.com/Computer-Graphics-aka-Uniwa/Table-Chair.git

Alternatively, download the repository as a ZIP archive and extract it locally.

2.2 Running the Project

Option 1: Using VS Code Live Server (Recommended)

  1. Open the project folder in Visual Studio Code
  2. Install the Live Server extension
  3. Navigate to:
src/*_scene.html
  1. Right-click the file and select "Open with Live Server"
  2. The scene you chose will open automatically in your default browser

2.3 Using Node.js HTTP Server

If Node.js is installed:

npm install -g http-server
cd Table-Chair/src
http-server

Open the displayed local URL and load the scene you desire.

3. Controls and Interaction

3.1 Scene 1

Camera Controls

  • View Angle
    Adjusts the camera’s field of view (degrees)

  • Orthogonal Distance
    Controls the distance of the camera from the scene center

  • Camera Position (Radio Buttons)
    Select predefined camera viewpoints around the object

  • Redraw
    Re-renders the scene with the selected parameters

Interaction Notes

  • Scene 1 is static and does not support animation
  • No mouse interaction is required
  • Camera changes apply immediately after redraw

3.2 Scene 2

Camera Controls

  • View Angle
    Adjusts the camera’s field of view (degrees)

  • Orthogonal Distance
    Controls the distance of the camera from the scene center

  • Camera Position (Radio Buttons)
    Select predefined camera viewpoints

  • Redraw
    Re-renders the scene with the selected parameters

Interaction Notes

  • Scene 2 remains static
  • The table and chair are positioned using fixed transformations
  • No real-time interaction or animation is present

3.3 Scene 3

Camera Controls

  • View Angle
    Adjusts the camera’s field of view (degrees)

  • Orthogonal Distance
    Controls the distance of the camera from the scene center

  • Camera Position (Radio Buttons)
    Select predefined camera viewpoints

  • Redraw
    Re-renders the scene with the selected parameters

Interaction Notes

  • Scene 3 introduces textured objects but remains static
  • No mouse-based interaction is required
  • Texture changes are loaded automatically on scene initialization

3.3 Scene 4

Camera Controls

  • Mouse Drag Horizontal movement → Rotate camera around the scene Vertical movement → Move camera height (Z-axis)

  • Mouse Wheel Tilt the chair forward and backward (0°–90°)

  • UI Controls View Angle: Adjusts the camera’s field of view (degrees) Orthogonal Distance: Controls camera distance from the scene center Camera Position (Radio Buttons): Select predefined camera viewpoints Redraw: Re-renders the scene with the selected parameters Start / Stop: Enables or disables automatic camera rotation

4. Textures

4.1 Texture and Asset Notes

All textures are located in:

src/textures/

Texture characteristics:

  • JPEG format
  • Power-of-two dimensions (e.g., 512×512)

These constraints ensure:

  • Correct mipmap generation
  • Prevention of black-texture rendering issues in WebGL

5. Issues and Evaluation

5.1 Scene appears black or textures do not load

  • Ensure the project is served via HTTP, not opened directly as a file.

5.2 Mouse interaction not responding

  • Click inside the canvas first to activate mouse focus.

5.3 WebGL not supported error

  • Verify WebGL is enabled in your browser:
    • Chrome: chrome://gpu
    • Firefox: about:support

5.4 Tested Successfully On

  • Mozilla Firefox

5.5 Notes for Academic Evaluation

  • No external frameworks were used
  • All transformations, animations, textures, and interactions are implemented using:
    • Raw WebGL API
    • glMatrix library

The project fully complies with the Computer Graphics course requirements at UNIWA

6. Open the Documentation

  1. Navigate to the docs/ directory
  2. Open the report corresponding to your preferred language:
    • English: 3D-Graphics-Scene-using-WebGL.pdf
    • Greek: 3D-Σκηνή-με-WebGL.pdf