Viewport frames make shockingly good reflections

So I recently figured out a way of making really nice reflections that are basically cube maps.

a cube map is to put it simply what an object can use to render its surroundings in a way that looks like natural reflection. This process takes pictures of the scene in the exact same way I do in the following portions of the tutorial. they then project that texture onto the geometry that is in the scene that needs reflections.

Roblox currently has this implemented weirdly. Currently, Roblox has an algorithm that figures out the best place to put a cube map, normally around the center of the room or area. You can see this if you have a PBR texture with an all-black image as the roughness map. It’s hard to see though, so you have to look, if you can’t see it that’s also a possibility there might not even be one there in the first place.

Sadly there is no way to control where these cube maps actually are. So I took the challenge of making them myself.

I started by making the viewport frame always use the player camera for its camera so it would turn kinda into the main viewport but not really, This is where it gets weird. To make sure I didn’t have to use any image editors I made a device in the Device emulator that had a 1:1 aspect ratio. Then I used a plugin I made specifically for this to move my camera so I could take images of my surroundings. I took the images and uploaded them onto Roblox and used them inside of a skybox. I put the skybox under the viewport frame and I also put a ball that had the reflectivity property set to 1 in the viewport and got this.

The only problem with this currently is that you can see them anywhere on the map

this photo was taken from under the floor of this area
image

Thankfully a really weird “bug” called Viewport masking exists, This requires a mesh that has to be painted to have vertex colors with the alpha of the color being zero. This basically cuts a hole in the image

I put a part in this photo to demonstrate where the actual masking part is because it is entirely invisible in viewport frames

if you then make the value of the viewport frame displaying more transparent, you can get all sorts of cool effects.

Here is the final result of a window I have in this room

In final words, This is an amazing use of viewports and gives me a little bit more hope in the viewport frames not being as bad as some people say.

Viewport masking tutorial: ViewportFrame Masking
Skybox making plugin: https://create.roblox.com/store/asset/85266847802309/Skybox-Maker
Zero alpha mesh pack: https://create.roblox.com/store/asset/71254819594671

if you make a game with this method please comment it here under this post. I really want to see some of the things people do with this.

38 Likes

if source could have this in 2004, why has roblox not done it in 2024?

11 Likes

This is such an awesome tutorial! I am suprised not alot of people have talked, or commented about it here. If I ever do decide to use this technique in my projects I will let you know! :+1:

1 Like

Would you mind sharing the studio file for this? This would be PERFECT for a project I’m planning! Also, would it be possible to; Instead of manually creating the skybox for this with a device emulator, just use another camera that’s in the center of the object and pivot it as needed?

This is incredible! I’ve been looking into Viewport Frames recently and have been amazed with what they can do.

No sorry as of right now that game is a project I would like to keep as my own. I would be willing to make a template place for this example though.

The reason i used the device emulator was to capture a screenshot of that direction. as of right now I don’t believe there is a way to use a camera’s output as an image other than viewport frames. and due to me using skyboxes for reflections on the parts that’s the only way that we can do it.