ViewportFrame Release


#1

Hi developers,

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!

scroll-gif

couch

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

  1. 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.

  1. Add a model that you want to show in the ViewportFrame into Workspace. Target your camera towards the model.

  1. Set ViewportFrame.CurrentCamera to Workspace.Camera. Drag the model into the ViewportFrame. The model should show up there.

  1. 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.

Through Scripts

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)

We will be providing documentation and more information in the coming weeks. Let us know what you think!


Is this a good UI design?
Putting objects in front of camera
How would I use ClipsDescendants for circular GUI?
ViewportFrame not showing on mobile(?)
November 2018 Recap: Keeping Up With the Developer Community
[Open Sourced!] "Dual Render" Scope System
Inventory Safety/Accessibility Suggestions?
#2

Awesome, this is a much-needed feature!


#3

:heart: !


#4

I’ve done some neat stuff with this already and oh man it feels so good to know it’s available now without changing fflags


#5

Ooh, yes! Thank you for this feature as it h as been suggested many times. Much love to you all! <3


#6

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! :smiley:


#7

Love it! How well is the performance on mobile?


#8

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.


#9

It’s similar to an ImageLabel if it’s static. Updating ViewportFrame is more expensive and requires switching render targets.


#10

Yay I love this :smiley:

I would also just like to pay respects to @CloneTrooper1019’s Module3D which still very much impresses me


#11

Can’t wait for it to work ingame instead of just studio!


#12

I have an unreleaseed version that uses ViewportFrames. I will create a post about it today.


#13

Anyone else in for reduxing camera systems? Being able to sit in a chair and watch things happen from a computer screen. Even, “live television” sets. :thinking:

I know I’m going to abuse this feature and use it everywhere…


#14

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?


#15

We’ve seen demos of this feature working on SurfaceGUIs. Why the regression?


split this topic #16

A post was merged into an existing topic: Off-topic and bump posts


#17

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. :heart:


#18

This is cool! I tried it out on Solaris: https://twitter.com/Emerald_Slash/status/1068604902195122176

I did notice that the anti-aliasing is causing a noticeable outline around the items, though. I assume this’ll be fixed?


#19

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.


#20

Can’t wait to be able to use it for my games, this opens up a lot of cool possibilities!