Screen3D - A 3D UI framework that just works

Resources Community Resources
, , , ,
#104

.this is fixed in the latest version of screen3d!!!

this is cause we used renderstepped instead of bindtorenderstep and that had a bunch of weird side effects

edit: nevermind

#105

:pleading_face: :broken_heart:

The issue is caused inside the pivotAroundPoint method in Component3D. Even when the rotation from self.offset is a blank CFrame, it returns incorrect results when it should have returned the original point. All of the frames experience the glitch, but it adds up and becomes visible around 8 frames in.

Continue to consider using BindToRenderstep though. Iā€™m surprised it doesnā€™t stutter when you turn your camera without this, but thatā€™s not important right now.

3 Likes
#106

grrr the new version switched to BindToRenderstep!!!

iā€™ll fix the pivotAroundPoint method eventually

2 Likes
#107

Cool, but would this actually fix the issue? It wouldnā€™t make sense to me if it did.

2 Likes
#108

update: seems to be a floating point precision issue

2 Likes
#109

Itā€™s more complicated than it seems. There are floating point issues that get scaled dramatically, to the point where thereā€™s shaking caused by minute changes in how the CPU does math on small numbers over time. Using Quaternions may or may not fix the issue, but it may be too imperformant.

Anyways, if this is not possible to fix, itā€™s not a huge deal. I doubt anybody needs that many frames nested for their UI. Iā€™m trying to refine this module and add more features that it missed, like accounting for frame.Visible.

2 Likes
#110

These are actually used in the VR UI apparently.

Where were you finding that these were supposedly beta features at one point?

#111

Hello, I canā€™t wait to start using this resource in my games! The module was quite messy though, so I felt the need to improve it first. Iā€™m sharing my improved version here!

CHANGES:

  • Fixes OOP approach
  • Cleans entire codebase
  • Adds better type definitions
  • All public fields are PascalCase
  • Adds screen:BindToRenderStep
  • Adds component.ZOffsetBehavior [0]
  • Reduces unnecessary methods and code
  • Screen3D instances can now be destroyed
  • component.Offset.Position behavior change [1]
  • Condenses wasted space in code (excessive new lines)
  • A ScreenGui cannot be controlled by two Screen3D at once
  • Errors when calling methods of a destroyed Screen3D instance
  • Layers render in the correct order even when parts are far back [2]
  • SurfaceGui becomes invisible when an ancestor GuiObject is invisible
Footnote 0

You may now choose how the ZOffset is calculated. When set to Ancestory, it determines the offset based on the hierarchy. When set to Position, the ZOffset is 0, leaving the UIā€™s 3D position to determine the rendering order.

Footnote 1

offset.X and offset.Y are scales to the componentā€™s part stud size. offset.Z is a scale to the display distance. This ensures that the 3D UI looks the same at all distances, making it more intuitive to use.

Screen3D.rbxl (64.9 KB) 

local time = 0

screen:BindToRenderStep(function(dt)
	for i, v in screen.Components do
		if i == 1 then continue end
		v.Offset = CFrame.new(math.sin(time) / 2, 0, 0)
	end

	time += dt
end)
Footnote 2

The previous ZOffset calculation was correct, but it didnā€™t account for the depth of each surfacePart. When one part had a higher offset than another, it would render above it. However, if it was further back, it will render behind it. The ZOffset is in studs, not a ZIndex. These values are now multiplied by a high number to undo this behavior.

Hereā€™s the original example using this version.

Screen3D.rbxl (64.5 KB)

Source Code 
local Replicated = game:GetService("ReplicatedStorage")

--\\ Modules

local Screen3D = require(Replicated:WaitForChild("Screen3D"))

--\\ Private Fields

local screen = Screen3D.new(script.Parent,5)

--\\ Connections

for _, component in screen.Components do
	component:Enable()
end

screen:BindToRenderStep(function()
	local angle = -(math.sin(tick() * 2) * 0.5 + 0.5) * 0.1

	for _, component in screen.Components do
		component.Offset = CFrame.Angles(angle, angle, angle)
	end
end)

The floating-point issue is not fixed here. Donā€™t nest too many components and you wonā€™t see it! :3

4 Likes
#112

that is a REALLY cool improved version

it be perfect if it had the 2.0 screen3dā€™s features like support for 2D UI modifiers (this is toggleable on my version since it comes with the tradeoff of the descendant tree looking a little weird) and fov independence for component.Offset.Rotation, kinda like what you did with the component.Offset.Position behavior change

3 Likes
#113

May you explain these with a bit more detail? I wouldnā€™t mind adding anything since I want to use this module for my own game!

2 Likes
#114

Added a RotationBehavior enum to this module! The videos below show the different behaviors on the button.

Local

Screen

World

for _, component in screen.Components do
	if component.Object:IsA("TextButton") then
		component.RotationBehavior = Screen3D.RotationBehavior.Screen
	end
	
	component:Enable()
end

Screen3D Rev 2.rbxl (68.4 KB)

(edit 4/16/2025): Hereā€™s another version with a small change.

It adds ZOffsetBehavior.ZIndex to predictably fix layering issues without needing to restructure your hierarchy. Could have sworn I added this before, but that change must have gotten lost when I was trying and failing to do the rotation behaviorā€¦! The SurfaceGuiā€™s ZOffset will be the objectā€™s ZIndex. Who knew!

Screen3D Rev 3.rbxm (6.2 KB)

5 Likes
#115

On the original screen3d you can enable UI elements in ā€œcompatibility modeā€:

When a 2d element gets turned 3d using :EnableCompatibility(), screen3d creates a new frame in the place of that old 2d element to keep stuff like UIListLayout and UIPadding from completely falling apart

2 Likes
#116

This workflow isnā€™t intuitive to me. Canā€™t you just nest the 3D component with a frame yourself? It would be much more predictable this way, and it doesnā€™t change the UI hierarchy further. You would have to manually code to get AutomaticSize behavior this way, but thatā€™s not a big deal.

1 Like