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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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
- Box-shaped Objects: Use this effect to render or animate box-shaped objects with open sides. Start with a layer that looks like a single face of the object, then apply this effect.
- Award Reveal: Use this effect for an award or present reveal animation. To do this, create a layer, add the Hollow Box effect, and apply any animations you want. Then turn off the front-facing sides (set the style to hidden) and add whatever you want to show inside the box as a separate layer. Then duplicate the Hollow Box layer, re-enable the front-facing sides, and turn off the backward facing sides instead.