Computer Graphics

A collection of Computer Graphics projects built with JavaScript, WebGL, HTML, and Electron. The project demonstrates core real-time rendering concepts: 2D primitives, 3D object construction, transformations, camera/projection control, lighting, materials, textures, and loading external .obj models.

Why this project matters

This repository shows practical understanding of low-level graphics programming rather than relying on a high-level engine. The scenes are rendered directly with WebGL, using shaders, buffers, matrices, object transformations, and custom scene logic.

Tech Stack

• JavaScript
• WebGL
• HTML5 Canvas
• GLSL shaders
• Electron
• Matrix/vector utilities
• OBJ model files

Features

• Rendering basic 2D primitives: triangle, square, circle

• Building and displaying 3D objects such as spheres, cones, pyramids, cubes, and rooms

• Object transformations:

  • Translation
  • Rotation
  • Scaling

• Camera and projection control

• Perspective projection support

• Depth testing and back-face culling

• Multiple light sources

• Material and shininess control

• Color selection for objects and lights

• Texture experiments

• Loading external .obj models such as cube, Scrat, and Iron Man models

• Electron wrapper for running the WebGL labs as a desktop app

Repository Structure

CG/
├── main.js
├── package.json
├── labs/
│   ├── Common/
│   │   ├── MV.js
│   │   ├── MV2.js
│   │   ├── initShaders.js
│   │   ├── initShaders2.js
│   │   └── webgl-utils.js
│   │
│   ├── lab1/
│   │   ├── circle.html / circle.js
│   │   ├── square.html / square.js
│   │   └── triangle.html / triangle.js
│   │
│   ├── lab2/
│   │   ├── scene.html / scene.js
│   │   ├── GfObject.js
│   │   ├── sphereObj.js
│   │   ├── coneObj.js
│   │   └── pyramidObj.js
│   │
│   ├── lab3/
│   │   ├── scene.html
│   │   ├── Scene.js
│   │   ├── Room.js
│   │   ├── Light.js
│   │   ├── Sphere.js
│   │   ├── Cone.js
│   │   └── Pyramid.js
│   │
│   ├── lab4/
│   │   ├── scene.html
│   │   ├── Scene.js
│   │   ├── LoadedObject.js
│   │   ├── Light.js
│   │   ├── Room.js
│   │   ├── IronMan.obj
│   │   ├── _Cube.obj
│   │   └── _ScratModel.obj
│   │
│   └── work/
│       ├── cube.html / cube.js
│       ├── sphere.html / sphere.js
│       ├── rotatingSquare.html / rotatingSquare.js
│       ├── textureCubev2.html / textureCubev2.js
│       └── teapot5.html / teapot5.js

Lab Overview

Lab 1 — Basic WebGL Primitives

Introduces WebGL rendering through simple geometric shapes:

• Triangle
• Square
• Circle

This lab demonstrates the basic rendering pipeline: canvas setup, shaders, buffers, and drawing primitives.

Lab 2 — 3D Object Construction

Adds reusable object classes and renders more complex 3D shapes:

• Sphere
• Cone
• Pyramid

This lab focuses on procedural geometry generation and object-based scene organization.

Lab 3 — Scene, Camera, and Lighting

Expands the project into a more complete 3D scene system with:

• Scene management
• Room/object composition
• Light source logic
• Camera/view matrix setup
• Projection matrix handling
• Object transformation controls

Lab 4 — OBJ Model Loading

Adds support for external 3D models using .obj files. This lab demonstrates how custom geometry can be loaded and rendered inside the WebGL scene.

Included example models:

• Cube
• Scrat model
• Iron Man model

Work Folder — Experiments

Contains additional experiments with:

• Rotating shapes
• Cubes
• Spheres
• Textures
• Teapot rendering
• Texture-mapped cube experiments

Skills Demonstrated

• Low-level graphics programming with WebGL
• Understanding of the rendering pipeline
• GLSL shader usage
• 2D and 3D geometry generation
• Matrix transformations
• Camera and projection math
• Lighting and material handling
• Texture mapping experiments
• Loading and rendering external 3D assets
• Structuring graphics code into reusable classes
• Running browser-based WebGL projects inside Electron

Getting Started

Prerequisites

Install Node.js and npm.

Installation

git clone https://github.com/iondodon/CG.git
cd CG
npm install

Run with Electron

npm start

By default, the Electron entry point opens:

labs/lab1/circle.html

To run another lab, change the loaded file path inside main.js, for example:

pathname: path.join(__dirname, 'labs/lab4/scene.html')

Then run:

npm start

Recruiter Notes

This project is a strong academic graphics-programming showcase because it demonstrates how 3D scenes are built from the ground up. Instead of using Unity, Unreal Engine, or Three.js, the project works directly with WebGL concepts such as buffers, shaders, matrices, projections, lighting, and object geometry.

It is especially relevant for roles or internships involving:

• Frontend engineering
• Graphics programming
• WebGL development
• Game development fundamentals
• JavaScript engineering
• Visualization tools
• UI/interactive rendering systems

Author

Ion Dodon

License

MIT