# Image Creation
In order to understand, what data you're dealing with to build the ImageStack and what data you would need to provide to an automated render plugin, you need to understand how the images get rendered.

Accompanying to reading this document, you should open a complete dataset that the renderer exports. You can ask an Artists to give you access to one. (only the Structured folder of the export, which is uploaded to the FTP server will not be enough!)

## Image Creation Concepts
 - In Unreal, the images are created based on a data structure with relations between Viewpoints, Options and assets.
 - During the rendering, the Assets are controled based on the data structure to generate a set of images that can display every possible Configuration.
 
``` plantuml
@startuml
!define STYLE_RG
!includeurl https://raw.githubusercontent.com/raumgleiter/PlantUML-Style/master/PlantUML_Style.puml
!include <tupadr3/common>
!include <tupadr3/font-awesome/rocket>
!include <tupadr3/font-awesome-5/user>

' All Skinparams: https://plantuml-documentation.readthedocs.io/en/latest/formatting/all-skin-params.html
' skinparam defaultTextAlignment center

' allowmixing
' skinparam ClassAttributeIconSize 0.1
' skinparam CircledCharacterRadius 0
' skinparam CircledCharacterFontSize 0

'-----------------------------------------------------------------------------

'left to right direction

'******************************************************************************

'-----------------------------------------------------------------------------

package core {
  class Viewpoint {
    A camera position at the location.
  }
  class Option {
    Something users can choose.
  }
  class VariantComponent {
    A set of all Variants a particular Asset is concerned with.
    + price
  }
}
class Layer {
  An image in the ImageStack.
}
class Merge {
  Interdependency between Options.
}

Viewpoint "*" --> "*" Option
Option "1" ..> "*" VariantComponent
Viewpoint "1" --o "*" Layer
Viewpoint "1" --o "*" Merge

Option "*" <-- "*" Merge
Option "*" <-- "*" Layer

'-----------------------------------------------------------------------------

'******************************************************************************

@enduml
```

### Initial Rendering
 - The simplest case of rendering renders everything in parallel.
 - E.g. the first frame shows the first Variant for each Option. The second frame shows the second Variant for each Option. etc.
 - This produces files like this:
   - SomeViewpoint/SomeOption_*Black*Variant*Natural*Variant.png
   - SomeViewpoint/SomeOption_*White*Variant*Artificial*Variant.png
 - Or visualized with a syntax:
   - A1 B1
   - A2 B2


### Neutral Variants (does not affect Frontend)
 - At some point in the rendering process, an Option won't have any more Variants, while other Options still have Variants left.
 - Since the 3D scene still needs to show something during rendering, the Neutral Variant is chosen.
 - By default, the first Variant is used as the Neutral Variant. But it can be adjusted within Unreal.
 - This produces files like this:
   - SomeViewpoint/SomeOption_*Black*Variant*Natural*Variant.png
   - SomeViewpoint/SomeOption_*White*Variant*Artificial*Variant.png
   - SomeViewpoint/SomeOption_*Grey*Variant*Neutral*Variant.png
 - Or visualized with a syntax:
   - A1 B1
   - A2 B2
   - A3 NN

### Render Cleanup
 - After the rendering, a lot of work is required to clean up the generated files.
 - The rendered images will need to be split into different layers.
 - Unused layers will be discarded.
 - Files are renamed to allow the server to match image files to the displayed Variants.
 - This produces files like this:
   - SomeViewpoint/SomeOption/BlackVariant.png
   - SomeViewpoint/SomeOption/WhiteVariant.png
   - SomeViewpoint/SomeOption/GreyVariant.png
   - SomeViewpoint/NextOption/NaturalVariant.png
   - SomeViewpoint/NextOption/ArtificialVariant.png
 - Or visualized with a syntax:
   - A1, A2, A3
   - B1, B2

### Merges
 - Some assets influence eachother. E.g. a dark floor will cause a dark light situation that affects the front of the kitchen. 
 - To render all combinations of these assets, artists can create a Merge of Options.
 - Merges can be created for each Viewpoint separately.
 - Merges only need to exist in strapi, if it should act as a data source for the Unreal Editor. The frontend does not need to know about Merges.
 - This produces files like this:
   - SomeViewpoint/SomeOptionNextOption/BlackVariantNaturalVariant.png
   - SomeViewpoint/SomeOptionNextOption/BlackVariantArtificialVariant.png
   - SomeViewpoint/SomeOptionNextOption/WhiteVariantNaturalVariant.png
   - SomeViewpoint/SomeOptionNextOption/WhiteVariantArtificialVariant.png
 - Or visualized with a syntax:
   - A1B1, A1B2, A2B1, A2B2

### Layers
 - Some assets change their shape in the image and can therefore cover each other during the rendering process. 
 - E.g. a large oven will cover more surface of the kitchen than a smaller one. Since the surface of the kitchen is available in multiple colors, the full surface needs to be rendered in all colors.
 - During the rendering, the layers will be rendered sequentially and only the Options on the Layer will be iterated. All other Options show theur Neutral Variant. (these will be discarded)
 - This produces files like this:
   - SomeViewpoint/SomeOption_*Black*
   - SomeViewpoint/SomeOption_*White*
   - SomeViewpoint/NextOption_*Natural*
   - SomeViewpoint/NextOption_*Artificial*
 - Or visualized with a syntax:
   - A1
   - A2
   - B1
   - B2  

 - In the frontend, we will need to know, to what Layer each Option belongs and therefore in which Order the Images should be stacked.
 - For Example:
   - SomeViewpoint/NextOption_*Natural*
   - SomeViewpoint/SomeOption_*Black*
 - Or visualized with a syntax:
   - B1
   - A1

### Merged on Layers
 - Merging and Layering are connected: Each Merge can only contain Options on the same Layer.
 - E.g. if Options A and B are merged, A and B need to be on the same Layer.
 - This is caused due to simple logic. The easiest example is that the color and size of an oven can't possibly be split into two images. The same applies to all merges: When we decide that something needs to be merged, it makes no sense that we split it into multiple images.
 - Please note that double-standards like this are not always that obvious due to human nature.