ViewportFrame Masking

Hello 6mikael6, this is the most coolest thing I ever seen in my entire life and I want to say, keep up the good work bro!! :grin:

I have a question or perhaps a request to ask. On Portal1, is it possible to make it where if the player get inside the portal bubble, it will get you into other place? Like for example, portal2 same thing, same function but the entrance will be the bubbles (portal1) instead.

3 Likes

Thank you! I think it’s definitely doable but there’s a lot of things that have to be taken to consideration. Also I’m really struggling to figure out how the portal logic should work, for example what happens when both the player and the camera is inside the portal.

One glaring problem is that the portal only supports pre-made characters as in-game mask creation is not yet possible (EditableMeshes might be supported in ViewportFrames at some point which would make in-game mask creation possible). Additionally the portal requires the surrounding map to have a mask which further complicates things.

I got the camera somewhat working with the portal but I’m not sure how to make it traversable for the player:

It definitely needs a lot more work but I think it has potential.

13 Likes

my stroke is having a brian

but this looks awesome

7 Likes

Ah cheers mate! I am looking forward to this. Keep up good work!! :brown_heart:

4 Likes

I made this wormhole with it combining billboard GUI’s and image texture masking.

Thank you for sharing such an in depth article on this mechanic.

Also, I was wondering if they increased studio’s transparency sampling for textures. I noticed it looks alot better than when I first made it, but I cant find any update confirming this. I also switched from Windows to Mac in the meantime, so it could be that.

2 Likes

That looks really cool! I’m glad to share this so others can use it to make cool effects like the one you made.

The different transparency sampling qualities could also be because of different graphics quality. Graphics quality determines how many transparency levels SurfaceAppearances have (2 levels on 1-8 graphics and 5 on 9-10). So on 1-8 graphics level the texture is either fully transparent or fully opaque.

1 Like

Hey, so I was amazed by the text example, so I want to customize it for my own use.

So In doing so, I read how you made it. So I went to blender, made my own text, then brought it into roblox studio and set the glass and transparency and etc. But theres one thing that I cant fix, which is the orintation of the text. No matter how I rotate it and stuff, it always is to the side. (well I was able to get it to THIS point by changing the orintation and position, but I cant get pass this part.)


Anyways I appreciate your help!

3 Likes

Never mind, I found out the issue, I’m a idiot.

Apparently, In blender, the text was rotated to the side when I exported it. So I rotated it right-side-up and now its working nicley!

Anyways, crazy tutorial! Probably my favorite post!

2 Likes

omg i love you so much buddy
i wish i could see more pro post like this

4 Likes

One of the coolest applications of ViewportFrames, for sure. Recently saw a horror game incorporate this idea and I’m a fan.

6 Likes

Could you post a screenshot or link of the game? I’d love to see this technology in action

3 Likes

Love seeing amazing stuff like this when creators show the cool things you can make in roblox

Surprise surprise, ViewportFrames have a IsMirrored property. Surprise again! It’s locked to CoreScripts.

4 Likes

I am not surprised honestly… its like roblox’s engine is trying to be “forcibly” simple which could explain why they lock useful features such as Curved surface guis or mirrored viewportframes to core scripts. Most likely to prevent us creative developers from creating something so complex which roblox’s engine “shouldn’t be” capable of. It’s sad honestly

8 Likes

Hello! This is a very useful technique, thanks. I wanted to know if it is possible to do the opposite: to only render things that are behind a specific part?

1 Like

Thank you for the reply! Yea, you can do so to some degree with transparent glass. That’s actually how the “Text example” works.

However, there are some limitations when using this method:

  • You can only use 0 alpha meshes for a desired result
    → The 0 alpha meshes have to be opaque (0 transparency)
  • The 0 alpha meshes cannot have Decals or Textures
    SurfaceAppearances however can be used
  • The ViewportFrame's BackgroundColor is visible behind the glass

Alternatively if the shape, which you want to render stuff behind, is simple, you can use the “Wavy text example”. Making a hole for moving / rotating 3D objects would be a really difficult task though, if not even impossible.

Thanks! The thing that makes it difficult is that there are parts that are positioned right near the camera, making it impossible to align something between those object and the player’s camera.