We are proud to announce the release of the ViewportFrame object in Studio! This object enables you to display 3D objects within 2D UI – particularly useful for things like in-game stores, 3D previews, modeling plugins, and much more!
For this beta release, the object can only be used in Studio. We plan to open this up for in-game use too.
Caveats:
Currently 3D objects can only be displayed on ScreenGuis or PluginGuis. We will investigate expanding this to work in the 3D environment too.
Objects inside ViewportFrames are rendered using a fixed lighting setting. More light settings may be released in the future. No shadow or post effects are available. Neon and Glass materials will be rendered on lowest quality.
Using ViewportFrames
Through Studio UI
Add a ViewportFrame into a GuiLayerCollector, such as a ScreenGui or SurfaceGui. This will cause a blank UI element to appear in the main window.
Add a model that you want to show in the ViewportFrame into Workspace. Target your camera towards the model.
Set ViewportFrame.CurrentCamera to Workspace.Camera. Drag the model into the ViewportFrame. The model should show up there.
You can change the size, position or other properties of ViewportFrame like other GuiObjects. Now the CurrentCamera is a reference to the main camera in Workspace, so if you move the camera in the main scene, it will also affect ViewportFrame. When you find a good position, duplicate the camera and make sure it is not the one Workspace is using. Then set it to ViewportFrame.CurrentCamera so the camera won’t be changed by Workspace operations.
You can also set up a ViewportFrame using scripts. Add the following LocalScript into a ScreenGui (or other proper Guis), run the game and you will get a Part rendered inside a ViewportFrame.
local vf = Instance.new("ViewportFrame", script.Parent)
vf.Size = UDim2.new(0.5, 0, 0.5, 0)
vf.Position = UDim2.new(0.25, 0, 0.25, 0)
vf.BackgroundColor3 = Color3.new(1, 1, 1)
local part = Instance.new("Part", vf)
part.Position = Vector3.new(0, 0, 0)
local camera = Instance.new("Camera", vf)
vf.CurrentCamera = camera
local cameraPosition = Vector3.new(3, 3, 3)
camera.CFrame = CFrame.new(cameraPosition, part.Position)
I made a square ViewportFrame, put some objects in it, and then made it into a 16:9 format. All of the objects look stretched now. Guessing thats a known bug. Other than that, this is AWESOME!
From what I’ve observed, the size of the ViewportFrame’s Camera viewport is capped to 1024x1024. If it goes above this value on either axis, the view will be stretched.
I think this size limit would work better if it maintained the aspect ratio.
For example, if the ViewportFrame’s size is 1920x1080, it should instead downscale itself to 1024x576. That would allow it to maintain the aspect ratio without lowering the framerate.
Of course, in an ideal world this size limit wouldn’t be necessary in the first place.
Can we get a property like ImageLabel’s ImageColor3? Or perhaps instead of parenting models to ViewportFrame we can set an object whose descendants shall be rendered?
This is the first thing I see on a Friday after coming home from school. This is amazing and can’t wait for this to be used in-game and not just Studio.
Rotating the objects(that are rotated) inside the frame act weird… Notice how the part rises up and down a bit due to perspective. Don’t have any quick ideas on how to sort this.