3D Tetris WebGL

-> Click here to get möllered. 🤡

This little game has been developed for the course "GFX - Foundations of Computer Graphics" at the University of Vienna. The goal of this assignment was to create a simple 3D game so that students can get familiar with the basic concepts of Computer Graphics (Vector & Matrix Calculation, 3D Modelling, Shading, etc.) and WebGL.

For Controls, please see below. ⬇️

Screenshots

Perspective View

Orthogonal View

Controls ⌨️

• cw - clockwise
• ccw - counter clockwise

Game Settings

Key	Description
P	Pause / Unpause the game
G	Toggle 3D grid
F	Switch between Gouraud & Phong Shading
V	Switch between Orthographic & Perspective View

Camera 🎥

Movement

Key	Description
I	Rotate the camera ccw on the X-Axis around the center of the grid
K	Rotate the camera cw on the X-Axis around the center of the grid
J	Rotate the camera ccw on the Y-Axis around the center of the grid
L	Rotate the camera cw on the Y-Axis around the center of the grid
U	Rotate the camera ccw on the Z-Axis around the center of the grid
O	Rotate the camera cw on the Z-Axis around the center of the grid

Zooming

Only works with Perspective View!

Key	Description
+	Zoom In
-	Zoom Out

Mouse Control

The mouse needs to be moved over the Canvas element!

Movement	Description
←🖱️	Rotate the camera cw on the Y-Axis around the center of the grid
🖱️→	Rotate the camera ccw on the Y-Axis around the center of the grid

Tetracubes 🧊

Movement

Key	Description
🡅	Move the cube in the negative Z direction
🡇	Move the cube in the positive Z direction
🡄	Move the cube in the negative X direction
🡆	Move the cube in the positive X direction
Space	Let the cube drop down

Rotation

Key	Description
X	Rotate the cube ccw around the X-Axis
⇧ + X	Rotate the cube cw around the X-Axis
Y	Rotate the cube ccw around the Y-Axis
⇧ + Y	Rotate the cube cw around the Y-Axis
Z	Rotate the cube ccw around the Z-Axis
⇧ + Z	Rotate the cube cw around the Z-Axis