WebGL2 Mini Game Engine

A lightweight 3D game engine built with WebGL2 and JavaScript, featuring real-time rendering, dual viewport system, and an interactive object editor.

🎮 Features

Core Engine

• WebGL2 Rendering Pipeline - Modern graphics API with GLSL ES 3.0 shaders
• Dual Viewport System - Simultaneous engine view and game camera perspectives
• Multiple Camera Modes
  • First-person camera with mouse-look and WASD movement
  • Third-person orbital camera with adjustable distance
  • Switchable engine and game camera views

Graphics & Rendering

• Phong Lighting Model with ambient, diffuse, and specular components
• Multiple Light Types
  • Point lights with distance attenuation
  • Directional lights (sun-like lighting)
• Texture Mapping - Load and apply textures to any object
• Real-time Lighting Controls - Adjust light position, intensity, and attenuation

3D Geometry

• Built-in Primitives
  • Cubes
  • Spheres (parametric)
  • Cylinders
  • Prisms (n-sided)
• OBJ Model Loader - Import custom 3D models
• Dynamic Mesh Generation - All primitives generated with proper normals and UVs

Object Management

• Real-time Object Editor via dat.GUI
• Transform Controls
  • Position (X, Y, Z)
  • Rotation (Euler angles)
  • Scale (X, Y, Z)
• Multi-object Scene - Add, select, modify, and delete objects
• Automatic Grid Layout - Objects arranged in organized grid pattern

🚀 Getting Started

Prerequisites

• Modern web browser with WebGL2 support (Chrome, Firefox, Edge, Safari 15+)
• A local web server (required for ES6 modules)

Installation

1. Clone the repository:

git clone https://github.com/berkecore/WebGL2-Mini-Game-Engine.git
cd WebGL2-Mini-Game-Engine

2. Start a local server:

Using Python:

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Using Node.js (http-server):

npx http-server -p 8000

Using VS Code:

• Install "Live Server" extension
• Right-click index.html → "Open with Live Server"

3. Open your browser to http://localhost:8000

🎯 Usage

Camera Controls

Engine View (Editor Camera):

• Click canvas to enable mouse-look
• WASD - Move forward/left/backward/right
• Mouse - Look around

Game Camera:

• First Person Mode: Same as engine view
• Third Person Mode:
  • WASD - Orbit around target
  • W/S - Adjust pitch (up/down)
  • A/D - Adjust yaw (rotate around)

GUI Controls

Add Object Panel:

• Add Cube, Sphere, Cylinder, or Prism
• Load OBJ Model (custom 3D models)

Texture Panel:

• Load Texture for Selected - Apply image textures to objects

Camera & Viewport:

• View Mode: Switch between Engine View, Game Camera, or Dual Viewport
• Game Camera Mode: Toggle between First Person and Third Person
• 3rd Person Distance: Adjust camera distance from target
• Set 3rd Person Target: Choose which object to orbit

Lighting:

• Light Type: Point or Directional
• Light Position: X, Y, Z coordinates
• Ambient: Base illumination level
• Specular: Shininess/highlight intensity
• Attenuation: Light falloff (Point lights only)

Object Control:

• Select Object: Choose from scene objects
• Delete Selected: Remove selected object
• Position/Rotation/Scale: Transform selected object

📁 Project Structure

grafiks/
├── index.html              # Entry point
├── style.css              # Styling and layout
├── src/
│   ├── main.js            # Main application logic
│   ├── core/
│   │   ├── Camera.js      # Camera system with input handling
│   │   └── ShaderProgram.js  # WebGL shader management
│   ├── geometry/
│   │   └── Primitives.js  # Procedural geometry generation
│   ├── loaders/
│   │   └── OBJLoader.js   # Wavefront OBJ file parser
│   ├── shaders/
│   │   ├── vertex.glsl    # Vertex shader (GLSL ES 3.0)
│   │   └── fragment.glsl  # Fragment shader with Phong lighting
│   └── utils/
│       └── TextureLoader.js  # Texture loading and management

🛠️ Technical Details

Technologies Used

• WebGL2 - Hardware-accelerated 3D graphics
• GLSL ES 3.0 - Shader language
• gl-matrix (2.8.1) - Matrix and vector math
• dat.GUI (0.7.9) - Real-time GUI controls
• ES6 Modules - Modern JavaScript module system

Rendering Pipeline

1. Vertex shader transforms vertices to clip space
2. Proper normal transformation using inverse transpose matrix
3. Fragment shader implements Phong lighting model
4. Support for both point and directional lights
5. Optional texture mapping per object

Lighting Model

// Phong Lighting = Ambient + Diffuse + Specular
vec3 ambient = uAmbientStrength * lightColor;
vec3 diffuse = max(dot(normal, lightDir), 0.0) * lightColor * attenuation;
vec3 specular = pow(max(dot(viewDir, reflectDir), 0.0), 32.0) * specularStrength;

🎓 Academic Context

This project was developed as part of the BBM414 Computer Graphics course, demonstrating practical implementation of:

• 3D transformation matrices
• View and projection matrices
• Lighting models and shading
• Texture mapping
• Interactive 3D scene management
• Camera systems

🔧 Browser Compatibility

Browser	Version	Support
Chrome	56+	✅ Full
Firefox	51+	✅ Full
Safari	15+	✅ Full
Edge	79+	✅ Full

📝 Future Enhancements

• Shadow mapping
• Normal mapping
• Multiple light sources
• Scene save/load functionality
• Physics simulation
• Post-processing effects
• Skybox support
• Animation system

📄 License

This project is open source and available for educational purposes.

👤 Author

Berke - berkecore

---

Built with ❤️ using WebGL2