42_INT_10_cube3d/README.md

# cube3D
---

This project is a 3D mini game, that uses raycasting to produce a FPP (first person perspective), just like in Wolfenstein3D or Doom.

![moving into the 3D](assets/cube3d_aller_retour.gif)

It creates a 3D view from a map in a text file, and move the view as if we were walking and looking around.

An example of a map :

```
$> cat -e map.cub
111111111111111111111111$
1......................1$
1......................1$
1......................1$
1.....11111....1.1.1...1$
1.....1...1............1$
1.....1...1....1...1...1$
1.....1...1....E.......1$
1.....11.11....1.1.1...1$
1......................1$
1......................1$
1......................1$
1......................1$
1......................1$
1.......11.............1$
1.......11.............1$
111111..11............11$
11.1....11.............1$
11....1.11............11$
11.1....11.............1$
11.1111111............11$
11...................111$
1111111111..........1111$
111111111111111111111111$
$>
```

This map will produce this 3D view :

![moving into the 3D](assets/cube3d_tour.gif)

You can change the images on the wall :

![change the images on the wall](assets/cube3d_image.gif)

And change the map itself :

![change the map](assets/cube3d_map.gif)


# raycasting
---

Raycasting is a technic that creates the illusion of 3D with very low computational power.

This technic has the hability to not show hidden area by design, which is a great simplification for rendering.

How it works :

1. first you determine the position and orientation of the viewer in a plan,

![](assets/raycast_step1.png)

2. then you cast a ray until it reaches a wall

![](assets/raycast_step2.png)

3. you can now trace the vertical line on the 3D view

![](assets/raycast_step3.png)

4. the height of the wall is inversely proportional to the length of the ray : the closer the wall, the heigher it is

![](assets/raycast_step4.png)

5. finally, if the rays scan the whole picture, you see the perspective appears

![](assets/raycast_steps.gif)

6. but you can also see that walls are rounded, like a fish eye effect. It's because rays change length while scanning the wall, so we must apply a correction to the angle

![](assets/raycast_steps_round.gif)

example of raycasting in action while construction of the project :

![example of raycasting during the construction of the project](assets/cube3d_raycasting.gif)



# ressources
---

- [tuto mlx](https://harm-smits.github.io/42docs/libs/minilibx/getting_started.html)
- [tuto raycasting js](http://www.playfuljs.com/a-first-person-engine-in-265-lines)
- [course about matrices and transformations in space (chapter 1 to 5)](https://www.youtube.com/watch?v=fNk_zzaMoSs&list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab)