Module to draw Vectors and CFrames

(Perhaps this module suits you better, mine is poorly tested and lacks a lot of features, it was made in a matter of minutes and just thought would be cool to share, didn’t know a not so bad number of people were going to use it. So yeah!)

With the help of this module, you can draw Vector3 and CFrame values, by literally visualizing them as parts. This can be very helpful for debugging, and even trying to understand some stuff concerning these two. Vectors are visualized as lines, CFrames have their position visualized as a line, but also displays the three rotational vectors (lookVector (-Z) is the green one, upVector (+Y) is the blue one, rightVector (+X) is the red one). You can acquire the module here, the source code is here.

Visualize(vector, origin, color, thickness, transparency)
Draws vector starting from origin. The default value for origin is Vector3.new(0, 0, 0). Optional color, thickness and transparency arguments exist. The function also returns the created part. The created part is named “Vector”, parented to workaspace, and has its Locked property set to true.

local visualizer = require(game:GetService("ServerScriptService").VectorVisualizer)

local a, b = Vector3.new(5, 8, 6), Vector3.new(6, 2, 3)

visualizer.Visualize(a)
visualizer.Visualize(b)

image

visualizer.Visualize(a-b, a)

image

VisualizeCF(cframe)
Draws cframe. Draws its cframe.Position, its cframe.lookVector as the green vector, its cframe.upVector as the blue vector, its cframe.rightVector as the red vector. It’s fun to see how the last three vectors are affected by a rotated CFrame. All these are named accordingly and put inside a model called “CFrame”.

local visualizer = require(game:GetService("ServerScriptService").VectorVisualizer)

local a, b = CFrame.new(5, 8, 6), CFrame.new(6, 2, 3) * CFrame.Angles(math.pi, 0, math.pi/3)

visualizer.VisualizeCF(a)
visualizer.VisualizeCF(b)
visualizer.VisualizeCF(a*b)

image

VisualizeRay(origin, direction, params)
Draws a ray starting from origin towards origin+direction with params as RaycastParams.

ShowOrigin()
Simply displays the world’s origin, showing the +X, +Z, and +Y.

image

ClearAll()
Clears all CFrames and Vectors drawn.

42 Likes

Wow, this is fun to play with especially when experimenting with CFrames. I remember wanting to have such a resource when I was starting with how CFrames and vectors work. It’d be amazing if there was a plugin version to see the vectors/CFrames live in Studio without playtesting.

Thank you, and continue your amazing work!

5 Likes

Not a bad idea! I might do that very quickly when I’m back tomorrow.

2 Likes

If I recall correctly, the Y axis is green and the Z axis is blue. If you can change that for consistency that would be great!

2 Likes

Ah true! I actually struggled to find the colors to use, because Roblox uses that coloring pattern, while other things use a different combination. There doesn’t seem to be a universal coloring scheme. But I think I should’ve picked what Roblox used.

1 Like

This is pretty cool! This could help me visualize camera tweening so I know the path it’s gonna take

Keep up the good work

1 Like

Soo! I ended up making this into a plugin as well, here.

It has an interface and everything, the option to choose between positions and CFrames, and the option to choose a specific part to draw the position/CFrame of. It also has this percentage feature where it only draws a certain amount of parts depending on a percentage (although it broke somehow, I’m gonna fix it soon pretty tired!)

image

1 Like

Hey there! Great module. I think you misplaced the +Z and the +Y. The Z should be the blue axis to prevent confusion with all the modelerers that use Blender around here

1 Like

No, they aren’t misplaced. +Y shows how up/down the vector is from the origin while +Z shows how back/forward the vector is relative to the origin.

1 Like

I wasn’t referring to their position, but to their color. On Blender and many other 3d softwares (including studio itself) the Z axis is blue and the Y axis is green, wich is way it may be confusing.

Screenshot_2021-03-18-00-12-26-853_com.twitter.android

Yeah I quickly noticed this too! I did fix this straight away, but I never updated the picture, nor the source code available.

Thank you for noticing!

I think this confusion may have stemmed from me remembering the Pokemon XYZ series which has the colors switched
image

1 Like