How To Outline Objects [New Method] + Outlines Through Walls

So in this tutorial I will explain the methods I know for outlining objects, how to do them, and their pros and cons. I recently figured out two less known about methods to outlining objects one of which, I prefer to other methods. So I am posting this to share these methods which can look pretty cool.

Viewports&BillboardGuis(New Method)

Overview

Really Vague Description of How it Works

So how this method works is that you have a viewport under StarterGuis that is scaled to your players screen. In the viewport there is a camera that mimics your players camera and constantly updates your cameras CFrame to your players camera(workspace.CurrentCamera) with a localscript. Then you make a clone of a model in the workspace and put it under your viewport, also constantly updating it’s CFrame based of the CFrame of the original part in the workspace. This will make it appear to the player that there is a part in front of them even though it is just a UI. But wait, that isn’t all, we still need to make an outline and make the UI fit behind parts/layer it. To make the outline you create another viewport that looks like the first one, go through its children which are baseparts and change their color to white(or black, or whatever), material to neon, and their size to 1.1 to 1.2 times the size of the original part(the outline should actually be made first so that it is ordered right). So now we have an outline but there is another way to do it which uses billboardGuis. So basically you make BillboardGui that scales to the size of your screen and contains the viewport, with this and AlwaysOnTop to false the half of the object not facing the player is the color of the outline.

I created a model/package that you can download, use, and modify to make the following two types of methods.

How to use the LocalScript under the model
BaseTbl:new(UIInfo)

newtbl:Add(model,PartInfo)
newtbl:Run()
newtbl:DeleteModel(BooleanDestroyAll,ModelToDelete)

UIInfo = {
LightInfluence = number
MaxDistance = number --in studs
AlwaysOnTop = boolean
Zindex = number
}

PartInfo = {
Size = number --multiplied by orignial size to get resulting size
Color = Color3
Material = material
Transparency = number
}

BaseTbl:new(UIInfo)-Creates a new BillboardGui under outlines with the properties provided, not all of the properties must be in the table. Returns a new table that contains functions for managing the BillboardGui.
newtbl:Add(model,PartInfo)-Creates a copy of the model and parents it to the BillboardGui with the properties provided, if any.
newtbl:Run()-Calling this will make table update the CFrames of the models in the viewport to those the ones in the workspace on RenderStepped.
newtbl:DeleteModell(BooleanDestroyAll,ModelToDelete)-Deletes the ModelToDelete if BooleanDestroyAll is equal to false. If BooleanDestroyAll is true, then the table will destroy its corresponding BillboardGui and itself.

Make sure that your parts in your model are all named differently, if they are not, the parts will be in eachother’s positions and it will not look good.

SubMethod One

This submethod is my personal favorite, it creates a fake object and outline.

How To Script:
To script this, you make a Gui for your outline and then make a Gui for your part.

local outline = BaseTbl.new({LightInfluence = 0,MaxDistance = 50})
outline:Add(game.Workspace.Model,{
Size = 1.2,
Color = Color3.new(1, 1, 1),
Material = "Neon",
Transparency = 0
})
local model = BaseTbl.new({MaxDistance = 50})
model:Add(game.Workspace.Model)
outline:Run()
model:Run()

Pros:

  • The outline is smooth, uniform, and if behind all of the part
  • Uses MaxDistance so outline can be disabled when further away
  • Can be seen through walls

Cons:

  • Part may not look like original part because it doesn’t have the same lighting
  • Can be seen through walls
Image(s)

image

SubMethod Two

This submethod is okay and might look better in some cases
How To Script:

local Thingy = BaseTbl.new({LightInfluence = 0,MaxDistance = 50,AlwaysOnTop = false})
Thingy:Add(game.Workspace.Model,{Material = "Neon",Color = Color3.new(1, 1, 1),Size = 1.1})
Thingy:Run()

Pros:
-It keeps the original part and just frames around the part
-It would be more practical for something like a large sign in the distance that has ScreenGuis and decals on it.
-Cannot be seen through walls

Cons:
-Will clip through parts below it, inconsistent with a part the player is near all the time
-Will cover the half end of the part, you could find a way to move the BillboardGui backwards using StudsOffset so it will appear behind the part instead of in it
-Cannot be seen through walls

Image(s)

image

InvertedHull/InvertedNormals

This method uses a modeling software like blender to invert an objects normals. An object with inverted normals will appear as if it was chopped in half and always facing the render.

How To Make:
Go into a modeling software and pull up the mesh you want to make an outline of, it should be a single object. For blender users, go into edit mode and select all of the vertices and press Crlt+N and select Recalculate Inside, or search for Recalculate Inside and select it. Now the normals on your mesh are inverted. You should also probably also remove any materials from your mesh before you export it(obj or fbx). Now, insert your mesh into studio, scale it with the scale tool to a little bigger than your original mesh, and weld it to your original object(use a manualweld or weld to get them in the same position). Now, change the color of your outline mesh to the color you want it to be and it will work!

This can also be done with a SpecialMesh under a copy of a part that has a negative scale on one of its Scale values. However, I do not like using a Special Mesh outline because the shading is not consistent on all of the faces. (SpecialMeshes with negative sizes do not seem to work for me right now, they were working earlier though)

Pros:
-It has a nice shader effect
-Very easy to setup

Cons:
-Does not work well with non-rounded meshes(see pictures below)
-Overlaying parts with this type of shader can not look the best

Picture(s)

image
image
The picture above highlights one of the disadvantages Inverted Normals. This is why they are better for rounder meshes than objects with indented meshes.

Visible Through Walls! ↓

Neon&Semi-Transparent

This method creates outlines through walls using the Inverted Normals method above and a weird characteristic of the roblox rendering system(probably a glitch :grinning:)

So basically, you use the Inverted Normals Method, but make the outline Neon and have a transparency of .011(closest number to zero that roblox rendering engine doesn’t round to zero(I think)). Now make a wall and turn its transparency to .011 too, now the outline will glow through the wall.

Video(s)/Picture(s)


sorry about the video quality, my vids were too large

BEWARE OF THIS GLITCH:

glitch

When parts have transparencies not equal to 0 and have decals and textures on them, the images will start glitching over each other and look very trippy and bad. However, this can also be used to make decals show through walls. If you wanted to make the Minecraft character’s show through walls, you would change the wall transparencies and the parts in the Minecraft character to .11. Basically, this this glitch is a double edged sword.
Possibly unfortunately, if roblox patches this glitch it could also change the rendering system so this method won’t work(because this method probably uses a bug)

Video of Glitch:

Pros
-Can be seen through walls
-Same Pros as inverted normals method

Cons
-causes the decal glitch above
-same Cons as inverted normals method

If you want to use this method but you don’t want your object to be semi-transparent, then put decals or textures on your object. It may cause the decal glitch so be aware of that. If you find a way to make see-through-able walls without the decal glitch, it would be nice to share that.

At the end of the second video, the character rigs with inverted hulls were from @HeavenlyRadiance, here is the topic where you can find them.

If you have any suggestions, creations, or difficulties that you want to share, please do so. Also, this is my first tutorial so if I need to explain certain parts more in depth, or whatever, feedback is appreciated :grinning:.

62 Likes

After a bit of CFrames and math, ZIndex now works for a property of the billboardgui. The value for Zindex is passed in the UIInfo table. I would recommend using a number for ZIndex from 1-2, so that the billboardgui won’t glitch out and because the ZIndex number can be any real number(it doesn’t have to be a whole number).

1 Like