Portal 2 Editor clone

https://www.youtube.com/watch?v=Y3MjI_XsDHQ

I started this project 1 month ago, my goal is to create a clone of portal 2 editor chamber with three.js, these are the results I was able to emulate so far.

I am planning to release a stable version this year, next month I am planning to start doing some playtesting to get some feedback and test performance on different hardwares.

Portal 2 level editor: https://www.youtube.com/watch?v=b7rZO2ACP3A

Assets from: PC / Computer - Portal 2 - The Models Resource
Lightning on the gun: https://www.youtube.com/watch?v=fezzkdjHoiI
Physics: GitHub - schteppe/cannon.js: A lightweight 3D physics engine written in JavaScript.

These articles helped me with the portal rendering:
https://torinmr.github.io/cs148/
https://th0mas.nl/2013/05/19/rendering-recursive-portals-with-opengl/

Some Three.js examples that really helped me:
https://threejs.org/examples/#webgl_instancing_dynamic
https://threejs.org/examples/?q=fps#games_fps
https://threejs.org/examples/?q=audio#webaudio_orientationhttps://threejs.org/examples/?q=gltf#webgl_loader_gltf
https://threejs.org/examples/?q=spotl#webgl_lights_spotlight
https://threejs.org/examples/?q=rect#webgl_lights_rectarealight

11 Likes

Improved portal shader, and mobile tests.

I got the portal shader from Shader - Shadertoy BETA and reworked to fit my project, thanks to the user Chaser_Code on three.js forum that helped me with some problems I was having with the shader. Here is a link for the portal shader: https://codepen.io/rafadante/pen/ZEVoXWj

For the mobile controls, I copied the button layout from the gamecube controller, this example helped me with the joystick movement: https://codepen.io/ogames/pen/rNmYpdo

I was able to test the mobile version on 2 devices, on the video, the capture is from a samsumg galaxy s20 where I was able to get good performance with 1 recursive level portals, I was also able to test on an iphone 8 where I get good performance without portals but when placing portals the fps started to drop a lot, a solution I will implement for devices that can not keep 60 fps is a 30 fps option.

video showing the game running on an iphone 8: https://x.com/rafa14091996/status/1707518202551427506?s=20

experiment with gyro for the camera rotation: https://x.com/rafa14091996/status/1707519253484539950?s=20

4 Likes

I’ve been following this on twitter, it’s amazing to see your progress. Great stuff!

1 Like

I started to work on the laser emitters, but there is still some work to do to make the laser interact with multiple cubes and make the bloom on the laser more visually appealing.

3 Likes


Experimenting with adding the ability to recall objects in time, just like in Zelda TOTK, I think that could lead to interesting puzzles with portals.

3 Likes

Ending this year finally being able to create and test levels with my threejs portal project.

6 Likes

Threejs Portal Project early gameplay.

I tried to replicate some of the tutorial levels from Portal 2, I managed to pack 6 puzzle rooms in one big chamber without loads.

5 Likes

This is really amazing. The level editor seem very smooth and intuitive! Well done.

1 Like

This is awesome stuff dude! Very well done

1 Like

Repulsion and Propulsion gels.

4 Likes

This has to be one of the most impressive things I’ve seen built in a long time. Keep it up! :smile:

1 Like

Speedy thing goes in, speedy thing comes out.

2 Likes

Trailer 1

4 Likes

Doing some tests.

4 Likes

It’s beautiful to see the visuals come together, some great shader work on the liquids / the cylindrical force field kind of thing.

Thanks; I used the ocean example for the liquids. I will still work on the excursion funnel shader to be more in line with the game.

https://threejs.org/examples/?q=ocean#webgl_shaders_ocean

where is the link
rafael87326

I am still working on it.

ok rafael87326

It’s been a while since I worked on my web portal project. It’s time to go back and try to solve bugs and performance issues so I can make it public.

In this video, I made some basic puzzle chambers on the level editor.

4 Likes