Making a portal clone with Three.js

[jade granite]

I started this project some time ago with the objective to make a clone of the portal 2 editor with three.js, this is what I was able to emulate so far. I am having some ideas to turn this into my own game using the portal games mechanics which I have already implemented as well as some abilities from other games like zelda botw/totk and metroid prime.

[wet axle]

Once again, your work is immaculate. It's been awesome to see your progress over the last few weeks. Super cool!

[jade granite]

Thanks!

[jade granite]

Some updates of the portal clone made with three.js, now items can go through portals, I also started to work with gels.

[wet axle]

Awesome work, I love seeing your updates

[jade granite]

Thanks!

[jade granite]

Deadly goo option

[molten oasis]

This is cool, but do you want the public to be able to play with this eventually?
If so, you may want to change the design somewhat, so you don't have to worry about IP-related issues.
Doesn't mean the core mechanics can't stay the same, though.

[jade granite]

Yes I am aware of that, will definitelly change the assets when I get to a public release, for now I am focusing on the basics and making the level editor work so I can focus more on the level design part when things get to a stable point.

[jade granite]

Three.js portal project weekly update: light bridges now have collisions, go through portals, and there can be many in a level.

[wet axle]

Nice! Was adding their interaction with portals difficult?

[jade granite]

Not really, everytime a portal is created the light bridge source casts a ray to detect if it is hiting a portal and if true it creates another bridge using the other portal transforms.

[jade granite]

Whenever the player walks through a Tractor Beam they will float through the beam it emits.

[wet axle]

Are you doing your own shaders for the bridge and tractor beam?

[jade granite]

I am using this shader from shadertoy: https://www.shadertoy.com/view/MdlXz8

[jade granite]

The blue beam pushes the player forward, away from the receptacle, and the orange beam pulls the player in towards it.

[jade granite]

Making a portal clone with Three.js

[quasi quartz]

when goin thru portal you are resetting player's position right? how about the shoot?
how does it interact when i open portal to my back, and tryin to shoot the portal?

[brave trench]

Hi rafadante, you are great, I will continue to follow your progress

[jade granite]

Yes, I reset the player position, just like in the portal games you can not shoot portals through portals, but any interactable item can go through it as well as bridges, lasers and the tractor beam.

[jade granite]

thanks!

https://youtu.be/a551VAhjY0I?si=CClROfJ1Ca1mbYHo

[halcyon depot]

how do u make portals like that

[jade granite]

I am using screen-space shader, each portal mesh had a special screen-space shader and associated texture uniform which mapped each pixel to its screen-space coordinates, and then used those screen-space coordinates to get the pixel in its associated texture uniform. They also included screen dimension uniforms in order to keep rendering correctly even after screen resizes.

I am planning to release a resumed version of the portal rendering in the future, but this helped me a lot with it: https://github.com/barnabasbartha/Threejs-Portal

Implemented a sonar effect to scan the world while the player chooses which object to recall in time.

Here is the demo from @SketchpunkLabs: https://codesandbox.io/p/sandbox/prototypes-pygsc7?file=%2Fprototypes%2Ffx%2Fposteffects%2F002_sonar.html

[halcyon depot]

when u say shaders do u mean like those glsl shader things used with webgl

[jade granite]

Yes

[jade granite]

https://youtu.be/Kd8lQijtmqg?si=T7GFqgM0iA-8Harh

[terse tide]

Hello @jade granite

nice to meet u
i am looking for a senior three.js developer who can join our team

[wet axle]

@jade granite , you're on fire! Your consistent progress is super impressive.

[jade granite]

Thanks!

https://youtu.be/B_bihkdVSrE?si=-BBkXUupXRDJubmh

[jade granite]

Speedy thing goes in, speedy thing comes out.

[jade granite]

Testing Turrets

I got the laser code from here: https://codepen.io/prisoner849/pen/mdxQjeW?editors=0010

[jade granite]

https://youtu.be/xog5qxBweqo?si=CoPXzxNY1YR-2YgP