Hollow Box

From 3.73DLightingMembers-OnlyRasterShape

Renders a faux-3D hollow box, using the layer as a surface texture, with sides that can be turned on or off, punched out with preset shapes, or offset outward.

Properties
Orientation

The orientation of the 3D object. This is similar to Rotation, but is interpreted differently when animated using Keyframes. /Orientation animates along the nearest path between different poses, and is useful for posing an object or animating an object between poses. Orientation values can't go out of range, so you can't use Orientation to "spin" an object (for that, use Orientation without animation to pose the object, and animate Rotation to create the spin)

Default: 0.000000,0.000000,0.000000
Rotation

The rotation of the 3D object. This is similar to Orientation, but the X, Y and Z components are interpreted independently when animated and can go out of range. This makes Rotation very handy for animating spinning motion, but not as convenient for creating arbitrary poses or animation between specific positions (for that, use Orientation).

Default: 0, 0, 0
Width

The width of the object (the size along the x-axis) in proportional layer coordinates.

Range: 1 to 1000; Default: 100
Height

The height of the object (the size along the y-axis) in proportional layer coordinates.

Range: 1 to 1000; Default: 100
Depth

The depth of the object (the size along the z-axis, away from the viewer, into the screen) in proportional layer coordinates.

Range: 1 to 1000; Default: 100
Thickness

The thickness of the sides of the box in proportional layer coordinates.

Range: 1 to 1000; Default: 5
Outset

The amount by which the sides of the box are outset from their original positions, in proportional layer coordinates. Setting this to values greater than zero pushes the sides outwards, creating gaps at the seams and "opening" the box.

Range: 0 to 1000; Default: 0
Smoothing

Smooths the edges and corners of the shape, resulting in round points and bevels. Use zero to render the shape without any smoothing, resulting in sharp edges and corners. Higher values specify the smoothing radius in the same coordinates used to define the size and position of the shape.

Range: 0 to 500; Default: 0
Position

The position of the shape in 3D space in proportional layer coordinates.

Default: 0, 100, 600
Scale

A scaling factor to apply to the 3D shape after it has been projected onto the 2D layer. This makes the shape larger or smaller without affecting the perspective in 3D space.

Range: 0 to 10; Default: 1
Front Side
Style

Controls the style of the front side of the box.

  • Normal: The side is displayed normally.
  • Hidden: The side is hidden (leaving the interior of the box visible)
  • Circular Cutout: A circle is cut out from the center of the side (the Progress property determines the size of the circle).
  • Circular Crop: The side is cropped from the corners with a circular shape (the Progress property determines the size of the circle).
  • Square Cutout: A square is cut out from the center of the side (the Progress property determines the size of the square).
  • Square Crop: The side is cropped from the corners with a square shape (the Progress property determines the size of the square).
Default: Normal
Progress

For styles such as Circular Cutout, Square Crop and so on, the progress determines how much of the cutout or crop defined by that style is applied (for Normal and Hidden sides, this is not used).

Range: 0% to 100%; Default: 50%
Outset

Controls the outset of the front side, as a percentage of the box size. Values over 50% move the side outwards; values under 50% move the side inwards. Use 50% for no outset. This outset is in addition to any outset from the overall Outset property.

Range: 0% to 100%; Default: 50%
Top Side
Style

Controls the style of the top side of the box.

  • Normal: The side is displayed normally.
  • Hidden: The side is hidden (leaving the interior of the box visible)
  • Circular Cutout: A circle is cut out from the center of the side (the Progress property determines the size of the circle).
  • Circular Crop: The side is cropped from the corners with a circular shape (the Progress property determines the size of the circle).
  • Square Cutout: A square is cut out from the center of the side (the Progress property determines the size of the square).
  • Square Crop: The side is cropped from the corners with a square shape (the Progress property determines the size of the square).
Default: Normal
Progress

For styles such as Circular Cutout, Square Crop and so on, the progress determines how much of the cutout or crop defined by that style is applied (for Normal and Hidden sides, this is not used).

Range: 0% to 100%; Default: 50%
Outset

Controls the outset of the top side, as a percentage of the box size. Values over 50% move the side outwards; values under 50% move the side inwards. Use 50% for no outset. This outset is in addition to any outset from the overall Outset property.

Range: 0% to 100%; Default: 50%
Left Side
Style

Controls the style of the left side of the box.

  • Normal: The side is displayed normally.
  • Hidden: The side is hidden (leaving the interior of the box visible)
  • Circular Cutout: A circle is cut out from the center of the side (the Progress property determines the size of the circle).
  • Circular Crop: The side is cropped from the corners with a circular shape (the Progress property determines the size of the circle).
  • Square Cutout: A square is cut out from the center of the side (the Progress property determines the size of the square).
  • Square Crop: The side is cropped from the corners with a square shape (the Progress property determines the size of the square).
Default: Normal
Progress

For styles such as Circular Cutout, Square Crop and so on, the progress determines how much of the cutout or crop defined by that style is applied (for Normal and Hidden sides, this is not used).

Range: 0% to 100%; Default: 50%
Outset

Controls the outset of the left side, as a percentage of the box size. Values over 50% move the side outwards; values under 50% move the side inwards. Use 50% for no outset. This outset is in addition to any outset from the overall Outset property.

Range: 0% to 100%; Default: 50%
Right Side
Style

Controls the style of the right side of the box.

  • Normal: The side is displayed normally.
  • Hidden: The side is hidden (leaving the interior of the box visible)
  • Circular Cutout: A circle is cut out from the center of the side (the Progress property determines the size of the circle).
  • Circular Crop: The side is cropped from the corners with a circular shape (the Progress property determines the size of the circle).
  • Square Cutout: A square is cut out from the center of the side (the Progress property determines the size of the square).
  • Square Crop: The side is cropped from the corners with a square shape (the Progress property determines the size of the square).
Default: Normal
Progress

For styles such as Circular Cutout, Square Crop and so on, the progress determines how much of the cutout or crop defined by that style is applied (for Normal and Hidden sides, this is not used).

Range: 0% to 100%; Default: 50%
Outset

Controls the outset of the right side, as a percentage of the box size. Values over 50% move the side outwards; values under 50% move the side inwards. Use 50% for no outset. This outset is in addition to any outset from the overall Outset property.

Range: 0% to 100%; Default: 50%
Back Side
Style

Controls the style of the back side of the box.

  • Normal: The side is displayed normally.
  • Hidden: The side is hidden (leaving the interior of the box visible)
  • Circular Cutout: A circle is cut out from the center of the side (the Progress property determines the size of the circle).
  • Circular Crop: The side is cropped from the corners with a circular shape (the Progress property determines the size of the circle).
  • Square Cutout: A square is cut out from the center of the side (the Progress property determines the size of the square).
  • Square Crop: The side is cropped from the corners with a square shape (the Progress property determines the size of the square).
Default: Normal
Progress

For styles such as Circular Cutout, Square Crop and so on, the progress determines how much of the cutout or crop defined by that style is applied (for Normal and Hidden sides, this is not used).

Range: 0% to 100%; Default: 50%
Outset

Controls the outset of the back side, as a percentage of the box size. Values over 50% move the side outwards; values under 50% move the side inwards. Use 50% for no outset. This outset is in addition to any outset from the overall Outset property.

Range: 0% to 100%; Default: 50%
Bottom Side
Style

Controls the style of the bottom side of the box.

  • Normal: The side is displayed normally.
  • Hidden: The side is hidden (leaving the interior of the box visible)
  • Circular Cutout: A circle is cut out from the center of the side (the Progress property determines the size of the circle).
  • Circular Crop: The side is cropped from the corners with a circular shape (the Progress property determines the size of the circle).
  • Square Cutout: A square is cut out from the center of the side (the Progress property determines the size of the square).
  • Square Crop: The side is cropped from the corners with a square shape (the Progress property determines the size of the square).
Default: Normal
Progress

For styles such as Circular Cutout, Square Crop and so on, the progress determines how much of the cutout or crop defined by that style is applied (for Normal and Hidden sides, this is not used).

Range: 0% to 100%; Default: 50%
Outset

Controls the outset of the bottom side, as a percentage of the box size. Values over 50% move the side outwards; values under 50% move the side inwards. Use 50% for no outset. This outset is in addition to any outset from the overall Outset property.

Range: 0% to 100%; Default: 50%
Light Source
Shading

Controls how the surface of the 3D shape is shaded.

  • Flat - Shades the shape without applying any lighting. The original colors in the layer are used as they are.
  • Point Light - Shades the shape as though it were lit with a point light. Point lights have a particular position in 3D space and emit light in all directions from that position. A light bulb is a point light.
  • Directional Light - Shades the shape as though it were lit with a directional light. Directional lights have a particular direction in 3D space, but the distance is not used. Direction lights are assumed to be infinitely distant. Directional lights are typically used for light sources that are very far away, like the sun. The difference between directional and point light sources is easiest to see in specular reflections on shiny surfaces.
  • Depth Map - Shades the shape in grays, where the color of each pixel is based on the distance from the viewer. Lighter pixels are closer to the viewer, while darker pixels are further into the screen. No lighting is applied to the shape.
  • Normal Map - Shades the shape using a normal map where the RGB values of each pixel encode the XYZ direction of a surface normal at that location on the surface of the layer. In other words, for each pixel, the values of red, green, and blue represent the X, Y, and Z values of a vector pointing outwards, perpendicular to the surface of the shape. The length of the encoded vector is always 1.
  • Normal & Depth Map - Shades the shape with a normal map multiplied by a depth map. In other words, the RGB values are encoded XYZ values of surface normal vectors for the shape, but the length of each vector is based on the distance from the viewer, rather than being normalized to a length of 1.
Default: Point Light
Intensity

The brightness of the light source, used when Shading is set to Point Light or Directonal Light.

Range: 0% to 200%; Default: 100%
Shine

Controls how shiny the surface is. Higher values make the surface appear more metallic.

Range: 0 to 1; Default: 0.8
Specularity

The amount of specular reflectivity in the shape's surface material. Use lower values for a matte finish, and higher values for smooth, glossy surfaces.

Range: 1 to 150; Default: 30
Ambient

The amount of ambient light in the environment. Ambient light is light that comes from all around, without a particular direction, and is useful for shapes in scenes with lots of soft, scattered light. Lower values result in less ambient light, for a harsher lighting effect and more pronounced shadows. Higher values result in less pronounced, weaker shadows.

Range: 0 to 1; Default: 0.1
Color

The color of the light source.

Default:  
Direction

The direction of the light source, used when Shading is set to Point Light or Directional Light.

Default: 75, -75
Elevation

The distance of the light source from the shape (not from the screen). Positive values place the light source in front of the shape; negative values place the light source behind the shape. This is only used when Shading is set to Point Light or Directonal Light.

Range: -100 to 800; Default: 100
Texture Mapping
Mirror

Flips alternate copies of the surface texture so that the edges meet seamlessly.

Default: off
Stretch

Controls how textures are stretched when mapped to the surface of the shape.

When turned off, textures are mapped based on the size of the shape. For example, if the shape has a height of 300, the texture will be tiled 3 times vertically along the height of the shape. This is useful for textures that should repeat more as the shape gets larger (for example, stucco, wood grain, sand, and so on).

When turned on, textures are mapped so that one repetition of the texture exactly matches the size of the shape, which is useful if you want the texture to stretch or compress as the shape's size changes.

Note: The stretch setting is applied before Repeat X and Repeat Y, so for example, if stretch is turned on and Repeat Y is set to 2, there will always be 2 copies of the texture vertically along the hight of the shape, and those copies will stretch to match the height of the shape if it changes. Similarly if stretch is turned off and Repeat Y is set to 2, there will be two repetitions of the texture for each unit of height.

Default: off
Repeat X

Number of times to repeat the layer texture horizontally.

Range: 0.01 to 20; Default: 1
Repeat Y

Number of times to repeat the layer texture vertically.

Range: 0.01 to 20; Default: 1
Angle

Rotates the surface texture of the shape (to rotate the individual texture tiles, use Twirl instead.)

Range: -3600º to 3600º; Default: 0º
Crop

Controls cropping of the layer before it is used as a texture.

Values less than zero result in cropping of the layer, and values greater than zero add extra transparent space around the edges of the layer. Set this to zero for no cropping.

This is typically used to remove the transparent fringe or gap around layers that don't perfectly fill their bounding box, so that the layer tiles properly when used as a texture.

Range: 0.01 to 2; Default: 1
Twirl

Rotates texture instances before tiling (which is different to Angle, which rotates the surface texture as a whole).

Range: -3600º to 3600º; Default: 0º
Offset

Shifts the surface texture by the given amount. Use this to adjust the alignment of the texture on the surface of the object, or animate it for a moving surface.

Default: 0, 0
Ray Marching
Precision

Controls how precisely the 3D object is rendered by adjusting the number of iterations used when ray marching. More iterations will yield higher-quality results, especially for the edges of objects. Fewer iterations will give faster preview and export performance. For best results, a setting between 30 and 60 is recommended.

Range: 10 to 200; Default: 30

Usage

Adding Hollow Box to a layer causes the layer to replaced with a faux-3D box using the original layer as the surface texture of the box. This is similar to Box except that the sides are rendered separately, so they can be outside, turned on and off individually, or styled with circle or square cutouts.

Performance

Note that on older devices or devices with lower performance GPUs, this effect may cause preview lag. Avoiding cutout or crop side styles can improve performance, and on Android you can improve performance by turning on Low Quality Preview mode in the side menu on the project list screen.

Flat Projection

Note that although this effect produces a result that appears three-dimensional visually, the actual output is still a normal 2D layer, which interacts with other layers and effects as a normal flat layer.

Applying an effect such as Flip Layer or placing a layer containing a further object in front of a layer containing a nearer object will not behave as you might expect if the results of this effect were actually three-dimensional.

Tip: Distorted Textures

When the layer is used as a surface texture, it may be stretched to fit the 3D object being rendered, which can cause the texture to appear distorted.

To compensate for this, you can adjust the Repeat X and Repeat Y properties, or change the setting of the Stretch property.

Transparency Limitations

Due to limitations of the rendering algorithm used by this effect, the interior and back-facing parts of each individual side are not rendered. This is not normally a problem because the back-facing and interior faces are not normally visible. However, if you use a texture with transparent parts, the results may not be as you expect, as only forward-facing external surfaces are rendered.

Use Cases