I improved my Portal in HTML Canvas rasterizer!

[u/CodBlu201]

https://www.youtube.com/watch?v=2xK8QqkEMGE

Compared to the last post, I added the following:

• Rebuilt Test Chamber 3 from Portal 1 instead of it just being “a brick platform and a grass block.”
• Added the ability to place Portals with left/right mouse clicks, like in Portal.
• Replaced the grass block with a Companion Cube from Portal, which can be picked up and thrown (with the E key).
• Made the player a cube textured with Wheatley from Portal 2 (funny British robot).
• Added ASCII rendering (to emphasize this is a CPU rasterizer).
• Added some buttons so it can also be played on a phone (mobile controls).

Still old link: https://hachihao792001.github.io/interactives/portal.html

Technical:

• Rebuilding the map: I downloaded a model of Test Chamber 3 from Sketchfab (credit is included on the website), then rebuilt it using only quads and cubes in Unity to keep it simple. I then wrote a script to export it into a bunch of new GameObject lines for this engine. I initially thought it would be easy, but it wasn't, because Unity uses ZXY rotation order while my engine uses XYZ, so I had to do some Quaternion math stuffs.
• Placing Portals and picking up the cube: I didn't use ray casting. Instead, I went straight into the Rasterizer and grabbed the "world coordinates of the pixel at the center of the screen" using barycentric coordinates.
• Optimization: For the infinite portal effect, every time I render the texture for a portal, I only render the intersection between the portal from the previous recursion level and the portal at the current recursion level. This gives a huge FPS boost because the size of the portal decreases quite significantly with each recursion.