Skip to main content
Version: 5.x

Image

Images are 2D planes that can be added to your Lens. They can be added to the 3D scene, attached to the screen, attached to the face and more.

Add Texture Resource

To add an image to your Lens, you first need to add a Texture resource to the Asset Browser panel. To do this, drag and drop a PNG, JPG, GIF, PVR, TIFF, DDS, TGA, BMP to the Asset Browser panel from your computer. For information about adding animated textures, please refer to the 2D Animation guide.

You can alternatively add a new resource press "+" button at the Asset Browser panel and select Import Asset.

Add Image to Screen

Images can be added to the Screen as well. These images will exist in 2D space attached to the screen. Screen Images are great for UI elements, overlays, headers, footers, logos and more.

Add Screen Image

To add a new Image attached to the Screen, press "+" button at the Scene Hierarchy panel and select Screen Image

Set Texture

With the new Screen Image selected, open the inline editor in the Inspector panel for the material used by the Image component by pressing the button to the right of the material. Next, set the Texture field to your imported Texture resource.

In the Asset Browser you'll notice an Image material has been added when you added the Screen Image. The material asset is used to describe how something should look. The Image component automatically adds a material suitable for itself (e.g. unlit). Learn more in the materials guide.

Move, Scale and Rotate in Scene

Double click on the Screen Image, which will open up the 2D Editor panel. Click and drag the image in the panel to move the image. The Screen Image can be scaled by clicking and dragging the corners and edges of the bounding box. Finally, the Screen Image can be rotated by hovering your mouse over a corner until the rotation handle appears. With the rotation handle, click and drag your mouse to rotate the Screen Image.

Add Image to 3D Scene

Images can be added to the 3D Scene. This will allow you to position the 2D image in 3D space.

Add Image

To add a new Image to the 3D Scene, select + -> Image from the Scene Hierarchy panel.

Set Texture

With the new Image selected, set the Texture field in the Inspector panel to your imported Texture resource.

Move, Scale and Rotate in Scene

With the new Image selected, you can move the object in the 3D Scene in the Scene Panel. Press the W shortcut to enable the move handles on the object and then drag the handles to move in the X, Y and Z space. Similarly you can use the E shortcut for Scale and the R shortcut for Rotation.

Add Image to Face

Images can be attached to and track with the face. Please refer to the Face Image guide for details.

Adjusting Image

With an Image or Screen image selected in the Scene Hierarchy panel, you can modify the Image's settings in the Inspector panel.

  • Material: The material assigned to the image. Unless you're using your own custom material, use the Default material
    • Pass: The shader that describes how the material works.
    • Texture: The Texture Resource assigned to the image
    • Blend Mode: The blend mode of the image. Commonly used blend modes are Normal, Multiply, Overlay, Screen and Soft Light
    • Alpha: How transparent the image will be
    • Depth Test: Whether or not the image should test for depth for render order
    • Open Full Inspector: Open the Inspector panel for the material which this image is using.
  • Align to Camera: Whether or not the image should always face the camera
  • Flip: Allows you to flip the image either horizontally or vertically

Images that exists in the 3D Scene gives access to a Pivot Position field. Additionally, the Pivot Presets interface will automatically set the Pivot Position to commonly used pivots when clicked. These options will only appear when working with an Image without a Screen Transform.

Stretch Modes

Stretch Modes define how the image will fit to its bounding box. Below are the available Stretch Modes to choose from.

Fill

Fill will always fill the bounding box completely with the image. The image will extend pass the bounding box to maintain a complete fill. The image's aspect ratio is preserved.

Stretch

Stretch will always completely fill the bounding box with the image. It will stretch the image to fill the bounding box, distorting its aspect ratio.

Fit Width

Fit Width will always fit the image within the width space of the box. The image can extend beyond the bounding box on the top and bottom. The image's aspect ratio is preserved.

Fit Height

Fit Height will always fit the image within the height space of the box. The image can extend beyond the bounding box on the left and right. The image's aspect ratio is preserved.

Fill and Cut

Fill and Cut works exactly like Fill but instead of letting the image extend beyond the bounding box, it crops the image to the bounding box.

Screen Transform

Screen Images always come with a Screen Transform component. The Screen Transform allows you to adapt screen attached UI to device resolution changes. Please refer to the Screen Transform guide for a detailed walkthrough on the power of Screen Transform including some commonly used setups.

Scripting Image

Below are some common scripting use cases for modifying Image programmatically.

Set Texture

The script below will set the Image's texture.

// @input Component.Image image
// @input Asset.Texture texture
script.image.mainPass.baseTex = script.texture;

Set Alpha

The script below will set the Image's alpha via the color parameter (without changing its color).

// @input Component.Image image
// @input float alpha = 0.5 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
var currColor = script.image.mainPass.baseColor;
script.image.mainPass.baseColor = new vec4(
currColor.r,
currColor.g,
currColor.b,
script.alpha
);

Set Color

The script below will set the Image's color.

// @input Component.Image image
// @input vec4 color {"widget":"color"}
script.image.mainPass.baseColor = script.color;
Was this page helpful?
Yes
No

AI-Powered Search