How to create a responsive invisibility?

Hey, I’m looking on how to create this type of invisibility:

I want to make it so that when a character or part enters a location, it gradually, smoothly, becomes invisible, just like in the image1, and not like in the following code1, where everything becomes invisible at once.

image1:
image

code1:

Part.Touched:Connect(function(part)
	for _, k in part.Parent:GetDescendants() do
		if k:IsA('BasePart') then
			pcall(function()
				k.Transparency = 1
			end)
		end
	end
end)

I took this video cut from a YouTube video (https://www.youtube.com/watch?v=DofH_fyHtU0&t=48s)
and in the comments someone says, “it could be an invisible and cancollide false part, with a viewportframe showing a camera on the other side, which will update locally depending on the player’s camera.”, but the author of the video says “by the way in the video it’s much simpler and takes advantage of a useful feature/glitch that might not be very well known”

I’m not looking for the entire code, if possible, ok, but rather the reasoning on how to do this. Let’s discuss this!

Do you have any idea how to implement this?
Thanks in advance.

2 Likes

I’m pretty sure they used Viewport Frame Masking here. If you put your character in a WorldModel in the viewport, you can get it to move around with animations. Then, you can have a solid cube of Erased Alpha, which will effectively make your character disappear just like how it does in Image1. Although, I can’t be absolutely positive this is how they did it, as it does have some key issues to work around with this method. This is definitely the glitch they are talking about btw

here look at this. This confirms the use of the technique i mentioned:
image

he just puts himself in a world models when he touches the cube, and Masks the character with Erased Alpha

2 Likes

Yes, I’m sure he used the Viewport Frame.
And yes, you helped me by showing me a way to do it, now I’m going to this post and see how to do it, thanks a lot, man.

1 Like

For sure! Do you want a cube with Erased Alpha, or are you planning on making that too? I can just upload it as a Dev Item since I already have one

1 Like

Oh man, I really appreciate it. Is Erared Alpha something I have to set up outside of Roblox studio? Like in Blender? If possible, send me that cube, thanks a lot!

Yes, you have to do it in something like Blender… And it’s a little confusing to get to actually work. Here is the cube: CubeErasedAlpha - Creator Store

In case you’re curious on how to make it in Blender, you have to erase alpha on all vertices of the mesh. Then you must export it as an FBX object or it won’t work.

1 Like

i think you can make a billboard that faces the camera and make it have the baseplate inside it ?

Again, thank you very much for your help! Is there any way to do this for all parts of the map, to use a for loop and copy all of them and make them look like this cube?

1 Like

Why would you need to do this for every part of the map? If you’re speaking about Erased Alpha, likely not. You can get a whole set of the basic Part Types, but meshes will simply not be possible unless you have another of the same mesh with Erased Alpha

2 Likes

I do have to say this was a very clever solution, and It does actually look amazing:

The visual artifacts are totally acceptable if you use the same logic of only applying the transparency when the player is touching the box. This is a really good solution for OP, since he was asking about how to do it for many parts, which my solution lacks flexibility in.

For anyone else wondering how this works: The cube has a transparency of 0.999, making it appear invisible. All BaseParts in the player except the HRP have transparency set to 0.001. Thats it! It’s much easier to do it this way rather than viewport masking

2 Likes

test script

--ServerScript in ServerScriptService

local Players = game:GetService("Players")
local tween, fade = game:GetService("TweenService"), nil
local info = TweenInfo.new(0.5, Enum.EasingStyle.Circular,
	Enum.EasingDirection.In)

function invisible(char, mode)	
	for _, object in ipairs(char:GetDescendants()) do
		if object:IsA("BasePart") or object:IsA("Decal") then
			if object.Name ~= "HumanoidRootPart" then			
				fade=tween:Create(object, info,{Transparency = mode})
				fade:Play()
			end
		end
	end
end

game.Players.PlayerAdded:Connect(function(player)
	player.CharacterAdded:Connect(function(char)
		char:WaitForChild("HumanoidRootPart")
		
		task.wait(3)
		invisible(char, 1)
		
		task.wait(3)
		invisible(char, 0)
		
	end)
end)

Yeah this is a pretty smart way to do it but how do you fix that bodyparts start fighting over transparency? Accecories also start to look weird and dynamic faces too, oof.
image


I want to make something like that

It is probably made using a trick with glass material parts and transparency just as the following exemple:

Using this trick, you can put invisible walls using parts of glass material with 0.9 transparency. Then, when entering the area, put all your character bodyparts and accessories to glass material with 0.02 transparency and you should disappear when walking behind these walls.

1 Like

I forgot that I had to also set the player parts transparency, which is why I deleted my original response.

Just so the quote makes sense, I will rephrase it with that correction in mind:

You create a part that acts as the invisible wall, set the part material to glass, then set the transparency of the wall to 1-t and the transparency of the parts you’re trying to hide(in this case the player parts) to t. t is a really small threshold that looks invisible to the naked eye but the engine considers it to create the illussion. For example if you set t = 0.001 you should set all character parts to that transparency and the wall transparency to 0.999.

Also this trick doesn’t get rid of the player shadow on the floor, you will need to figure out another way to hide that.

2 Likes

Sorry for the late response, I was finding the best way to do this. I found that you can use a special setup with Highlight instances. You just need two parts with highlights. The first highlight you add should be AlwaysOnTop, the second highlight you add should be Occluded. The result looks like this:

It doesn’t seem to work if you just use one part with two highlights, which is a drawback to this solution. But it does work really well, and it doesn’t require as much setup as any other solution I found. Let me know if you have questions! (you should make the duplicates and highlights on the client side if that isn’t clear)

I went ahead and got this working for the Player character via a local script because I think it looks cool, here is the place if anyone is interested:
OccludedChams.rbxl (56.7 KB)

1 Like

All of this solutions are crazy and each one can be used depending on the case, ty for your help!
Would you like to make a summary compilation of all these solutions with the mention of who brought it so that I can mark your answer as the solution?

Here’s a summary of the techniques that could solve OPs issue mentioned in this thread (how do I say something like that without sounding like ChatGPT??)

Highlight Occlusion
    

I found that you can use a special setup with Highlight instances to effectively mask a highlight when it is not occluded.

You just need two parts with highlights. The first highlight you add should be AlwaysOnTop, the second highlight you add should be Occluded. The result looks like this:

It doesn’t seem to work if you just use one part with two highlights; however, it does work really well and doesn’t require as much setup as any other solution I found for this use-case.

Here is the place seen above: OccludedChams.rbxl (56.7 KB)


Glass Transparency Masking
    

@NyrionDev mentioned the Glass Transparency Masking technique, which I had completely forgotten about. Apparently this issue arises due to the need for performance, as well as the mechanics of glass reflections.

Pretty much Glass parts will not render other transparent parts behind them at all (as far as I can tell):

In this image, the part on the left is transparent Glass (0.999 transparency), and the part on the right is transparent Plastic (0.001 transparency).

It looks different in-game, as you can see here:


ViewportFrame Masking
    

ViewportFrame Masking is the technique shown in OPs video. There is a whole thread on the topic which goes into much more detail than I could possibly do here:

ViewportFrame Masking - DevForum

The original video performs this by having an ErasedAlpha cube in that spot within a ViewportFrame, as well as another cube with the same dimensions and position in the workspace.

When he touches that cube, he clones his character into the viewport and manually updates it’s motion, while his real character remains transparent. The result is as you see in the video (the cube masks the character in the viewport)

2 Likes

Ty, @azavier123.
The image and the video isn’t working correctly.
bye!

1 Like