ROBLOX Reflecting Mirror System?

Greetings Programmers!
I am attempting to achieve a system where your roblox avatar reflects the mirror, I’d assume using a ViewPorts, How would I go about actually making it function because I’ve searched throughout the ROBLOX Wiki and things but there is no related topics for such request. I have seen a similar system on a roblox game called ‘The Mirror Game’, It would be great if someone could provide me with some sort of tips or help for such request.

Thanks!

~xudet

6 Likes

Just tried the game, doesn’t look like a VPF , I am guessing it is an NPC replicating how YOU walk and the character is yours cloned and it walks opposite of how you walk. I’ll try making a system like this, it doesn’t look like the easiest in the world.

2 Likes

I’m pretty sure the mirror game doesn’t use viewportframes because it was made well before the release of viewportframes. I believe what it uses is copying and mirroring your character around a transparent plastic “mirror”, which also runs much faster than using a viewportframe. Because meshes can’t really be reflected (unless you use negative scaling, which visually begins to look a little weird), the hats aren’t copied over completely. It does seem a little weird though, that for example I have one shoulder hat but when i join the game I have two, one on each shoulder. There are plugins to mirror models with the press of a button (this), but I couldn’t find anything public that does it live.

2 Likes

Why do people automatically assume everything runs faster than a ViewportFrame?
I’ve done tests with the method done in The Mirror Game, and then the ViewportFrame method, and unsurprisingly enough, the non-ViewportFrame version runs extremely slower compared to the ViewportFrame one.

It honestly has to do if you code ViewportFrames properly or not.

I’m sorry, I didn’t use the word I meant to. I meant to say higher resolution. Here’s in viewportframe (bottom) versus outside of viewportframe (top):
image
This is graphics setting 1

You could do this with ViewportFrames.

The problem is this involves hacky solutions using glass over a BillboardGui as there is no way to shift the ViewportFrame in a way which will display properly.

You may think SurfaceGuis will work, but you can test this yourself and you’ll see this is impossible.

When objects are reflected on a mirror from a perspective (the camera), then the light is leaving objects, hitting the mirror, reflecting off of it at the same angle it hit, and going to the eye. The object appears to the eye as if the ray had come from behind the mirror, at exactly the same angle. Here is a diagram:

Since the angle of reflection is always the the same in the opposite direction, the distance from the mirror stays the same but appears as in the opposite direction. What this means is that every object in 3D space is reflected about the plane of the mirror (mathematical reflection, not how we usually think of reflection). Every point’s position is changed by twice its distance from the plane along the normal of the plane. If we were to imagine the rotation vectors of the object, they too would be their reflections. However, doing this would make the vectors reversed, essentially converting between a left-hand and right-handed coordinate system (although this isn’t to say mirrors reverse left and right. They actually reverse forward and backward relative to the mirror. left-handed and right-handed coordinate systems is just a nod to the slightly different orthogonality in mirror space and doesn’t care which way is actually right or left). To change it back, we would have to reverse one of the axis. Since parts and spheres are symmetric around every axis, flipping one axis wont cause any issues. However it does become a problem for some axis with wedges and becomes even more complicated for meshes.

Here is the basic code to reflect a symmetric object:

local function reflectVector(v, n)
    return v - 2 * n * n:Dot(v)
end

local function reflect(part, mirrorPos, mirrorNormal)
    local p = mirrorPos + reflectVector(part.Position - mirrorPos, mirrorNormal)
    local right = reflectVector(part.CFrame.RightVector, mirrorNormal)
    local up = reflectVector(part.CFrame.UpVector, mirrorNormal)
    local look = reflectVector(part.CFrame.LookVector, mirrorNormal)
    
    right = -right -- I'm not sure how to choose which vector to invert
    -- so I'll leave it to experimentation later if the thread author desires.

    part.CFrame = CFrame.fromMatrix(p, right, up, look)
end

The way that mirrors have been done in the past is by projecting all the points of a part into the plane of the mirror and using right triangles to fill in the shapes.

14 Likes

Heyo!
Here’s a script made by @boatbomber which may be useful!

Hope I helped! :slight_smile:

7 Likes

It is something that is well possible but possibly hard to do, I have seen it on a game called Universal Studios. It uses mirrors on one there attractions. But I have no idea on how you do it.