Skip to content

fini03/3D-Tetris-WebGL

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3D Tetris WebGL

This is a game developed for the course "GFX - Foundations of Computer Graphics" at the University of Vienna. The objectives of this task was to create a 3D tetris game to understand 3D transforms, 3D viewing pipelines, collision detection and try out WebGL. By default the VAO_CUBE is selected which means the tetraminos are cubes.

Usage and additional remarks

Please serve from a webserver: python -m http.server For the shadow maps this tutorial. The unpackDepth method and also the basic.frag shader were also taken from this tutorial. Certain shadow artifacts don't show up in the phong shading because of the bias calculation. There is also a "cheating mode" which has been added to make testing easier. If activated (click on the checkbox) you can pause the game (gravity) and translate/rotate your object easier to the desired position. Please note that pressing 'Spacebar' won't work in this mode so you will need to unpause the game.

🎮 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
G Switch between Orthographic & Perspective View
+ Zoom In
- Zoom Out

🎥 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

🖱️ Mouse Control

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

🎭 Shapes

Please note: if you don't switch back to tetracubes afterwards (pressing the same key), you might need to press the key n twice to switch to the among-us mode

Key Description
B Switch to rendering cylinder instead of tetracubes
N Switch to rendering among-us instead of tetracubes