Composites
Composite assets allow us to split a 2D render into multiple different layers.
Overview
The Composite Asset is a key element in most Virtual Photographer-based configuration setups. These assets allow us to separate the rendering process into multiple layers, which will then get composited back together by the 2D player to form the final image.
The layering workflow is necessary in order to reduce the total amount of unique renders that need to be generated. For configurations that result in hundreds of thousands or millions of configurations, generating every single permutation as a unique image can become very impractical from a cost, performance, and time perspective.
Using layers we are able to reduce the total amount of renders by rendering separate images for the different configurable components.
The composite asset is intended to be used as a layering template which can be shared by multiple products.
Layers Overview
Layers are the core feature of the composite asset. They are designed to work as a combination of Adobe AfterEffects layers plus Autodesk Maya render layers.
The composite asset is used by the 2D player to create the final image. The 2D Player will request from Threekit the individual layer images, and then it will composite them together on the client browser. When the configuration changes, the 2D player will only request the layer images for the attributes that have changed.
The layers can be created using the buttons on the toolbar, as well as the right-click menu on the top Comp asset node.
Layer Order
The layer order is important for the compositing process, just like in AfterEffects.
In ThreeKit, the order is reversed from the Adobe tools. Layers at the top of the list in the UI represent layers that are at the bottom of the stack (in the background), while layers at the bottom of the list represent layers at the top of the stack (foreground). Each additional layer added to the bottom of the list will actually appear on top of the layer stack during the compositing process. This will therefore affect how the blending modes work.
Common Properties
Visibility
Each layer has a Visibility option, represented by the "Render Layer" checkbox. This checkbox simply turns the visibility of the layer ON or OFF in the player.
Opacity
Layer opacity can be controlled with a slider and text box. This will affect the alpha channel of the layer during compositing by the 2D player.
Blending Modes
Each layer can be blended by the 2D player with the layers below, using the following list of blending modes. These blending modes work the same as their Adobe Photoshop/AfterEffects counterparts.
Normal
Additive
Multiply
Screen
Overlay
Lighten
Darken
Hue
Saturation
Color
Luminosity
Masking
For certain compositing tasks you may need to perform some masking of a layer using another layer. Examples of this could be the separation of refractions into multiple layers, or tinting a layer using a solid color layer with a mask.
To mask a layer, simply use the Mask with Layer dropdown on that layer, and choose another layer as the source of masking information.
From there you have a set of four options for the Mask Mode:
Alpha Mask - mask using the alpha channel of the source layer
Invert Alpha Mask - mask using the inverted alpha channel of the source layer
Luminance Mask - mask using the luminosity level of the averaged color channels on the source layer
Invert Luminance Mask - mask using the inverted luminosity level of the averaged color channels in the source layer
Render Layers
This layer type is the workhorse of the composite asset. They can be associated with given attributes, so that a sequence of images can be rendered for every unique permutation of those given attributes.
Attributes Targets
This is the list of attributes associated with the render layer. This dropdown will only display global attributes that have been added to the composite asset in the LOGIC editor.
Associating attributes to the render layer will enable us to produce a sequence of renders for every permutation of these attributes.
Example:
Let's say we have a layer associated with two attributes - Fabric and Product.
The attribute Fabric has 100 options and the attribute Product has 10 options.
In this scenario, the render layer will be able to produce a total of 1000 renders, which is the result of Fabric Options multiplied by the Product Options.
When not associated with any attributes, the render layer will produce a single image with the default configuration of the item.
Override Groups
We need to be able to direct render layers with specific information in order for the renders to isolate only a specific portion of the final image.
We do this through the use of Override Groups, which allow us to accomplish two tasks:
Specify which lights and geometry to be included in the render for this layer
Specify any overrides to the render properties of these objects, such as replacing materials, setting matting options, or turning off Primary Visibility so that they only cast shadows, bounced light and reflections.
Targets
The Group targets allow us to specify which meshes or lights are to be included in the current override group. This is done through the use of Node Tags. Simply type in the Node Tags you wish to include (without the use of the # symbol). You can specify as many tags as you wish.
This is a big portion of how we can build a composite asset as a template that can be reused with multiple products.
Example:
We may be working with multiple scenes, and multiple furniture products. If we use generic node tags like LIGHTS, FABRIC, LEGS, and FLOOR throughout all the product meshes and scene nodes, then it won't matter which scene or product gets loaded with this comp asset. The renders will still work as expected.
Performing An Override
We can use Group Operators in order to override the appearance and properties of the included nodes.
Example:
The Reference Operator can be used to override the material assigned to the meshes referenced by the target node tags. This can be handy when we need to create a mask layer with specific colors.
AOVs - Additional Render Passes
It is possible to generate additional render passes for each image generated on a render layer, through the use of Layer Operators. These operators include the following set of Render Passes:
V-Ray AOV Properties - generates a Dirt/Occlusion pass
V-Ray Normal Properties - generates a Normals pass
V-Ray Bump Normal Properties - generates a Bump Normals pass
The pass output will not have any effect on the composite asset or the 2D player. The generated file for each pass is only available currently for download purposes from the Renders page.
Rendering
The rendering process is handled through the Renders UI.
Ensure that all your render layers are rendered with the same matching render resolution, for a perfect fit when they get composited by the 2D player.
If some of the layers are rendered at a different resolution, the 2D player will reflect mismatched size.
You can generate renders for Render Layers using either the Vray or WebgGL render engines.
Image Layers
Image layers enable us to use texture assets from the Asset Library as a layer in the 2D player. You can add multiple Image Layers in a Composite asset as needed.
A comp asset requires at least one existing Render Layer to be present with a render in order to display Image Layers.
These image layers come in handy when we need to combine in-platform rendered images with external images that were uploaded into the asset library. Examples of this include background plates for a car or architectural renders, or photography of a model's body for apparel renders.
Ensure the image resolution matches the render resolution for the other render layers to get a perfect match in the 2D player.
Solid Color Layers
The solid color layer enables custom color support for products using the 2D player. Some products may allow the customer to choose their own custom color for paint, fabric, or plastic components. Since the possible number of variations can be nearly infinite, it is practically impossible to pre-render all the permutations.
The Color property of this layer can therefore be configured to allow for this kind of customization, as described in the Logic section below. Common compositing techniques are possible through the use of masking and blending modes to achieve a variety of looks.
Logic
The LOGIC editor enables us to add attributes and rules to the composite asset.
The attribute section only allows the addition of global attributes.
In terms of rules, there are several scenarios where rules are necessary:
Exposing layer properties for configuration on the front-end:
In this scenario we may want to expose some of the general or specific layer properties, such as Opacity, Solid Color, or Layer Visibility (Render Layer). For this purpose we need to create a global attribute of the corresponding type (ie. Number attribute in the case of Opacity), and then use a Set Property action in a rule on the Comp asset to tie the property to this attribute.
Using an image sequence in an Image Layer
In this scenario we need to swap the texture asset used by an Image layer to display different images depending on some logic. For example, we may have renders of a suit in a turntable style, and we are using photography of the head and hands overlapped with the renders. Every time we increase the rotation attribute we need the head and hands images to switch to the next image in the sequence.
This can be accomplished by using Metadata Asset Queries to fetch the appropriate image in the sequence, based on the value of the Rotation attribute.
Usage
Last updated
