Custom Menu | Example


Configurator	Integrate configurators into your website.	/files/QZU091soTqV4il5HJbIt		/pages/W1cri26jmNYwSAYwV31L
Data Exporter	Integrate automatic outputs into your website.	/files/RT6MKOqoLsVl2UKLIudZ		/pages/YBo8QV1EAmG6LOZOIHc7

Name	Type	Description	Default
`parameters`	string	Initial list of parameters formatted as query parameters, e.g, param(<input-identifier>)=<input-type>(<input-value>). Example: `"param(123)=material(123)&param(987)=number(10)"`	`undefined`
`show-ui`	boolean	Show or hide the action menu UI layer.	`true`
`template-uuid`	string	The id (UUID) of the template to load. Mutually exclusive with the `organization-uuid`/`article-id` pair (if both are supplied, `template-uuid` takes precedence).	`undefined`
`organization-uuid`	string	The id (UUID) of the organization used together with `article-id` to resolve a template by its article identifier. Required when `article-id` is provided and `template-uuid` is omitted.	`undefined`
`article-id`	string	The optional article identifier used (together with `organization-uuid`) to load a template without knowing its template UUID. If both `template-uuid` and `article-id` are present, the component uses `template-uuid`.	`undefined`
`use-external-menu`	boolean	Set to `true` if a separate menu is being provided.	`false`
`pixel-ratio`	number	Override the device pixel ratio used for rendering to trade off image sharpness versus performance. Higher values increase clarity at additional GPU cost.	`undefined`

", "resolution": "High", "fileType": "exr", "assignmentType": "MaterialThumbnail_20x20" } ``` {% endcode %} The required link is the `downloadUrl` field of the first `dataObject` of the first `dataObjectAsssignment` returned, unless additional filter criteria apply (for example, you might want to filter by `mediaType` to exclude zip files and only offer download links to images). # Welcome colormass is the first robust 3D Content Management System that can be operated **entirely from your browser**. Here, you will find the documentation for the colormass platform. Whether you want to upload data, set up a 3D configurator, render images, tile materials, or integrate components into your website, this guide will provide all the information you need to get started and make the most of our online 3D CMS. The tutorials are divided into the following two main chapters. **Building Blocks:** * [Products](/building-blocks/products): combinations of 3D geometry and materials * [Materials](/building-blocks/materials): 3D materials * [Scenes](/building-blocks/scenes): setups where 3D assets, cameras, and lights come together These are **reusable building blocks**, not outputs themselves. You don’t generate final results (such as images or configurators) from these directly. Instead, they exist to be reused across multiple outputs. If reuse is not required, you can skip building blocks and create outputs directly from scratch. However, anything created this way will not be reusable later. **Outputs:** * [Configurator](/configurator/introduction): interactive 3D views built from the building blocks that you can integrate into any website * [Rendering Platform](/rendering-platform/introduction): images generated from the building blocks

And additionally there is a chapter about scanning and tiling materials: * [Scanning and Tiling](/scanning-and-tiling/scanning): Digitize and process scans. Please watch the video to get an initial impression of the platform. {% embed url="" %}


Upload and Manage Data	3D CMS	/files/bp568V9foHiKcEgqvOuj	/pages/PpvIoLVJ8ZOEBwPTxDxm
Set-up 3D Viewers	Configurator	/files/4pOdpcKPDkOSw7oK5QjL	/pages/JBzdfOW885T0hFYg67TQ
Render Images	Rendering Platform	/files/XzrqRuqvNfA8YXV7i1u5	/pages/ZdzgPpeyqjyTJ4VMJcA9
Scan Materials	Scanning & Tiling	/files/TWTwwNPrFx7Evl78cfmx	/pages/xwbzaM7zgR0AdB7h0k4S
Developer Docs	Integrations	/files/TnnVXBEFIZpbzKrDZtJb	/spaces/upRNMrLmfdavpTEehRQn

# Products {% embed url="" %} Products are a powerful way to store 3D assets online. This does not have an offline analog so it is a somewhat new concept that you will have to familiarize yourself with. Offline tools like Maya, 3ds Max, Blender etc. are very limited when it comes to storing and using product logic/variations, because these tools are not really meant for that. At colormass we refer to this as Content Engine (or Templates) which refers to the way how atomic data (meshes and materials) can be used and combined in a smart way. Templates are the backbone of storing 3D assets online. ## Introduction - What is a Product? {% embed url="" %} ## Adding a Product The video below shows how to upload products from your 3D software. {% embed url="" %} Find more details on the following pages: [Upload to Existing Product](/building-blocks/products/add-a-product/upload-to-existing-product). ## Assigning Materials In the video below, you can see how to assign materials to your uploaded products. {% embed url="" %} Find more details about assigning materials here: [Assign Materials](/building-blocks/products/assign-materials) and about inputs here: [Inputs and Outputs](/building-blocks/products/advanced/inputs-and-outputs). ## Creating Variants Watch the video below to learn how to create simple variants of your products. {% embed url="" %} Find more details on the following pages: [Create Variants](/building-blocks/products/create-variants) and [Create Material Variants](/building-blocks/products/create-material-variants). ## Creating Your First Configurator Once you have created your first product, you are ready to create your first configurator as well, go to [Create Your First Configurator](/configurator/create-your-first-configurator). # Add a Product Press the *+Create* button and then click on *Product*:

Next there will be a prompt that will ask for the name of the product:

Furthermore you can choose between uploading a file, or starting from scratch. If you would like to upload a file you can upload a model by using one of the following supported formats: * .obj * .ply * .fbx {% hint style="info" %} Looking to upload a **CAD** file? Check out this page: [Upload CAD File](/building-blocks/products/add-a-product/upload-cad-file). {% endhint %} {% hint style="warning" %} If you upload a file, make sure to select the scale of your file correctly, and in case the UV is not World Space UV then we would also strongly recommend setting that. {% endhint %} Once you hit *Create* you should be navigated to an empty Product editor (or if you uploaded a file then the elements of your file should be available there). # Upload CAD File To upload CAD file to the platform please follow the steps below. For these steps you would need to download and use [**Rhino 3D**](https://www.rhino3d.com/)**.** ## 1. Document Unit Setup Make sure that Rhino’s units are set to *cm*. To do this, click on the *Properties/Options* button to open up the options.

Select *Units* under the *Document Properties*. If needed, you can open up the drop-down menu for *Model units* and select *cm*. Hit enter to close the window.

## 2. Import Import the CAD file into Rhino by navigating to *File > Import* and selecting your reference file. To set the correct unit settings for your model within the import options, ideally you would need to know what unit settings were used during the export of the model’s file. You can also try different values and measure the resulting model’s scale to check if it’s correct.

With this particular example we set the units to mm. ### Warnings The warnings displayed below can commonly appear during importing. For the first warning click *Yes:*

And for the second warning click *Ok*:

## 3. Positioning (as needed) After the import is finished, check if the model is centered to the origin. If yes, then you don't need to do anything in this step. If the views look empty at this point, that could mean that the model is placed far off from the center, and out of view. To find the model hit *CTRL + A*, then click on the zoom to selected tool. This will zoom in on the object on the viewport which is active.

{% hint style="info" %} Tip: If you like, you can repeat the above command on the rest of the views, to center the object, by simply right clicking inside the area of each of the remaining views {% endhint %} Selected objects will be highlighted with bright yellow wireframe. When you located your object, you can group the individual parts together by pressing *CTRL + G* (For ungroup hit *CTRL + Shift + G*). This will keep the parts of your model holding their position relative to each other during transforms. Finally, while the model is grouped and selected, look for the align tool on the left side toolbar, click on the small triangle on the bottom right corner of the tool to make all the align options visible, and activate the align center option by clicking on it.

You can see that the tool is active when the model starts to follow the position of your cursor. To center the object to the world origo, hit the 0 on your keyboard or numpad, and then enter. The model is still selected. If it disappears from your view you can use zoom to selected tool again to locate it. ## 4. Remove Unnecessary Parts In order to make the resulting file size more manageable, it is recommended to remove some parts of the product that are not visible from the outside (e.g. bolts, drawer rails). To better see if there are any such parts within the model, you can click to the dropdown icon next to the Perspective viewport, and change the mode to *ghosted*. (edited)

To select the smaller parts inside the model, you can click and drag a selection box (starting from an empty area outside the object), dragging from Right to Left. This way the selection will only apply to parts that are completely included in the selected area.

When you have the unwanted parts selected, press DEL to delete them from the scene. ## 5. Meshing To create a mesh, select the object, type “Mesh” in the upper command line, and press Enter.

The dialog box appears. You can choose between two types of dialog boxes: simplified or detailed.

Most of the time, the simple mesh options are enough to create the mesh model. Press Enter to generate the mesh model. If you press the *Detailed Controls* you can also see the more detailed dialog:

The detailed mesh option is an advanced meshing dialog. You can define various parameters before meshing, such as density, simple planes, and jagged seams. The resulting mesh would look something like this:

## 6. Export In this case, the mesh and the NURBS model are in the same position. Go to the Selection menu and choose the “Mesh Select” tool

Then go to the *File menu > Export Selected* option, and export the model in your preferred file format. In order to make the file work on the platform please make sure to select *.obj* or *.fbx.* ## 7. Upload When uploading to the colormass platform, make sure to select *Convert to World Space UVs* on the dialog that appears after upload:

This will make sure to correct the mapping issues the CAD file has. # Upload to Existing Product In the product editor you can simply select

Once you selected your .obj, .fbx or .cmm file you should see the uploads starting and then also a folder where your meshes are now grouped. If you press the *Edit* and then the *Dissolve group* option you should see all the elements listed in the main tree.

# Assign Materials First you have to add the material to your template editor. You can do that clicking on the *Materials* button in the top bar:

Once its added to your product tree, you can assign the material in two simple steps: 1. Selecting the mesh where you want to apply your material 2. And then dragging & dropping our material to a slot like so:

Alternatively you can also directly drag the material into the 3D viewer onto the part of the mesh that you would like to assign it to:

## Remove Assignment To remove the assignment simply click on the bin icon on the top left corner of the material assignment:

# Pattern Placement When a material is assigned, you can easily adjust the pattern placement. You can move the material along both the **X** and **Y** axes, and you can also **rotate** it. To change the placement you would need to click on the arrow button in the top right corner and change the values in the dialog window that appears:

# Create Variants Configuration Groups are used to define variations (any kind of variation: product feature, finish or fabric variations) within a template. In order to show you how it works lets add a variation to the ***chair for showing and hiding the seating pad***. First you need to add a new *Config(uration) Group*:

This will add a new *Config Group* to the product tree on the left. If you expand it you will see two options: *Add variant* and *Add switch*. In order to add more variants to the product we need to press the *Add variant* button, as many times as many variations you need. In this case we will add two and name them: * With seating pad * Without seating pad Once the variants are done we only need to drag & drop the seating mesh into the *With seating pad* option, so that when that variant is selected the mesh is shown and when the other option (*Without seating pad*) is selected then nothing is shown. You can see all these steps in the little screenrecording below:

{% hint style="info" %} You can think of config variants as options that can be activated. The options you see below config group are possible options to active and every option that is not selected is deactivated (i.e. hidden/removed). {% endhint %} # Create Material Variants ## Simple Material Variants To better demonstrate how to add material variations to your product, we'll walk through the process of adding two fabrics to our seating pad. The first step is to add a new *Config Group* with two options to our product (if you're unsure how to do this, refer to the first step in the [Create Variants](/building-blocks/products/create-variants) page) and then add your two fabrics as well. The first steps would look something like this (assuming you would only want to add two fabric options):

Add the Config Group and the two materials

Once these initial steps are done you, you'll need to do three additional steps: * Move the right materials to the corresponding *Config Variant* * Create a *Material Switch* (this will be the item that will act as a combined material) * Select the materials under your *Config Variants* and add them to the switch You can see these same steps below in the screenrecording.

Now you can use the *Material Switch* that you created in the step above as a regular material and assign it to whichever mesh you would like.

You can create as many separate Material Variants as you want. You can create a group of options for the leg (finish options) and for seating pad (fabric options) but you can of course create even more depending on your real life product. These ## Advanced Material Variants In some cases it is necessary to change the finish *in the same time* as you would change the fabric, meaning that a specific fabric option comes with a specific leg finish (and they are not independent options). To illustrate this, let's assume that the two fabric options we created initially each have a corresponding wood finish. *Fabric 01* should always be paired with *Wood 01*, and *Fabric 02* should always be paired with *Wood 02* finish. To do this, we need to: * Add the two wood options * Move them under the original variants * Create a new *Material Switch* * Add the selected wood finishes under the new *Material Switch*

At the end of the video you can see that the fabric and the finish changes in the same time and what is displayed when an option is selected is determined by what is listed under that option. # Copy a Product To copy a product you simply need to hover over the card of the product and then press *Copy:*

# Advanced # Decals ## Adding a Decal First of all, we would need to add the decal. Go to the *Other* button in the top bar and select Mesh Decal.

Once the *Decal* appears in your product tree, you will need to select an overlay image. To do this simply click on the *Overlay Image* area:

Once you have uploaded your decal you would need to do three important steps: * Assign the base mesh (by dragging and dropping it into the *Base Mesh* field): this is the mesh where the decal will be applied. * Assign a base material (by dragging and dropping it into the *Material* field): this serves as the substrate material for applying the image. * Choose a point: Select a point on the mesh where the decal should be placed. You can see all these three points in the screenrecording below.

Assign the base mesh and the base material

## Move the Decal Once you uploaded your decal, you also have various options to * Change the size of the decal with *Size U* and *Size V,* just make sure to keep your aspect ratio match to your original image (to avoid distortion) * Change the exact position of the decal with *Offset U* and *Offset V* * Rotate your decal with the *Rotation* field

## Overview Below you can see a small overview of the Decal options.

# LOD Management In general the colormass system handles dynamic compression (on the server side) and decompression (on the client side) so that you don't have to absolutely minimize your 3D assets. But in some cases it is good to have an extra tool to manually adjust LOD details and decide what to show where. The colormass platform offers three distinct usecases: * **Web**: displaying the asset in a configurator * **AR**: displaying the asset in app-less AR way * **Path-traced**: using assets in path-traced image rendering In practice it is usually the best to define two: **Web** and **Path-traced**. To set these first add a group to your product:

and name then based on what use case will be inside that folder. Move the elements that you would only like to display for that use case under this folder, like so:

Once all this is done we only have to do one more step, click on the *Other* button and select *LOD Type*:

Then select the use case that you would like to set for your folder:

and assign it the *Active* field of your folder:

this will make the folder active (visible) during image rendering and inactive (hidden) for any other use case (web, AR). You can confirm if this is the case if you click on the bottom right corner (in the viewer settings) and switch between the toggle buttons at the very top. You will see that the items which were moved under a folder called *Path-traced* is only shown during *Path-traced* use case:

# Review Products Once a product is prepared you have the possibility to review the final product using wireframe and UV tools. To bring up these tools you simply have to click on the bottom right corner (viewer settings) and click on one of the three options: * Wireframe * UV * UV2

{% hint style="info" %} It is not part of the current tutorial series to describe how you can use these tools to review a model but in case you are interested please write to your contact person at colormass. {% endhint %} # Review Products - Performance On the colormass platform, you can also review a product’s performance by clicking *Performance* under *View*:

This allows you to evaluate your product’s performance across several key metrics. You can review the following for your 3D scene: * Memory usage * Download size * Number of triangles

Next to each item, you can view its individual footprint based on the selected performance factor.

# Create Template from Selection In some instances you already have a product created but you realize that maybe a small part needs to be saved out as a reusable 3D element to be used in other products as well. In this case you would need to first select part of the templates that you would like to save out, like the seat is selected in the screenshot below:

then press Create Template from Selection using the *Other* menu:

then you would need to name the product.

This creates an internal template, but after you click *Edit* you can promote it to a reusable element that appears in the library.

# Inputs and Outputs *Inputs* and *Outputs* are very powerful features of the platform. When you create a product they are basically black boxes when they are used in other products or scenes. Meaning, that if you include them in a scene you basically can not change anything about them - unless you add *Inputs*. This design ensures that when you embed multiple product layers within each other, they update correctly without overwriting existing modifications or causing errors. {% hint style="warning" %} Inputs and Outputs are a bit more advanced 3D editing features of the platform, therefore we recommend only starting to explore this section if in general you are familiar with the other 3D management concepts of the colormass platform. {% endhint %} # Inputs Inside a product you can add an input using the *Other* button:

You have various options for the type of input you want to add (depending on what kind of influence you want to give to the scene where this product will be included). For example you can add a *Material Input,* which will allow the parent scene (the scene where it will be included) to assign material to this input that we you have just created. This material input you can use as a regular material and assign the areas of the product that you want to allow to override in any parent scene. When you now add your product to the a scene, you will see a new input appear:

where you can now use to drag and drop a regular material to override:

Notice that in the parent scene you re not able to edit anything else other than assigning a material to the input. An input always contains a *Default* field:

This is the value that will be used if nothing is assigned to the input in the parent template. {% hint style="info" %} The color of inputs is always blue and the color of outputs is always red. This way you can always quickly see what fields you can assign values to (*Inputs*) and what fields you can use as values that you can assign to other areas (*Outputs*). {% endhint %} # Outputs *Outputs* are the opposite of *Inputs*: these fields can be created to supply values to the parent scene, rather than being used to override elements within the product itself. Inside a product you can add an output using the *Other* button:

To demonstrate one way to use outputs, lets say that you want to create a group of finish options that can be reused inside many products. For this we first create a new product and add the options as described in the [Create Material Variants](/building-blocks/products/create-material-variants)page. Then we add a new *Material Output.* Once we have both the options and the *Output* then we need to simply assign the *Switch (this is the combined material)* of the material options to the *Output.*

Assign the material switch to the output

This way, wherever this product is included, the output (the finish options) can be used by the parent scene. This makes it possible to create dedicated finish-option-products that are specifically designed to be used in products and assigned as finish options. As a result, you can avoid duplicating finish options and simply create reusable configurations. You can see how this new *finish-option-product* can be used inside another product below:

{% hint style="info" %} The color of outputs is always red and the color of inputs is always blue. This way you can always quickly see what fields you can assign values to (*Inputs*) and what fields you can use as values that you can assign to other areas (*Outputs*). {% endhint %} # Convert Element to a Reusable Template At any time during your work, you may want to turn part of an existing scene or product into a reusable element. To do this, simply select the elements you want to reuse - just the top-level elements are enough; there's no need to dig into folders or config groups to select the children - like this:

This only created a template in your local editor. You can duplicate the instance (the item with the blue icon) as many times as you like. However, to make this template available in your library, you also need to publish it. You can do this by clicking on the template that you just created and press *Promote to library*:

# Remove a Product On the platform, products that are in use or have associated data cannot be removed easily by design. This prevents users from accidentally deleting work that may have taken days to create with a single click. Additionally, if a product is already used in a scene, the system restricts its removal to avoid errors when the scene is opened later. To remove a product, you need to that the product doesn't have any revisions (see [#remove-product-revisions](#remove-product-revisions "mention")). ## Remove Product Revisions In order to remove a product first you would need to remove all of its revisions. You can do this by clicking on the *Show version history* and removing each history item, or you can also just simply click on *Discard last revision* until there is no revision left.

If you see that a product revision cannot be removed, it means that it is currently referenced in a scene or in another product. At this point, removing the product becomes intentionally more restricted, because it has already been used in one or more scenes. If the product was removed, those scenes would produce an error every time they were opened. You can view the list of scenes where the product is used in the following section in the dialog window:

You would need to open each scene and manually remove the product. The system will not remove it automatically, since doing so could potentially damage the many scenes at once. Once you removed it from the scenes, you should be able to remove the product revision as well. ## Remove Product To delete the product once there are no associated revision, you just have to click on the three dots and press *Delete product.*

# Documentation Review Using the [Products](/building-blocks/products) documentation please create a new product in the *Products* tab named *\[YOUR NAME] – Test*. After opening the editor, upload the file below: {% file src="/files/uWtIe4tGba4iVXSiuQn4" %} Using this 3D file, please complete the following tasks: * Following the [Create Variants](/building-blocks/products/create-variants) page create two configuration variations: * One where the seating pad is visible * One where the seating pad is hidden * Following the [Create Material Variants](/building-blocks/products/create-material-variants) create two wood finish variations and apply it to all parts except the seating pad * Assign a fabric (any selection from the library) to the seating pad Once the product setup is complete, create a render (following the [Render Your First Image](/rendering-platform/render-your-first-image) page) by selecting a 3D scene from the library and placing your newly created chair into the scene. You will need to create a new folder (Project) and sub-folder (Set) please use your own name for the folder (Project) and for the sub-folder (Set). Once all of this is done, create a new picture and batch render (following the [Batch Rendering](/rendering-platform/batch-rendering) page) all the variations of the product (4 in total). # Materials {% embed url="" %} ## Intro In the **Materials** tab, you can manage and process your existing scans or upload new materials. The video below provides a quick introduction to creating and working with different types of materials on the platform. {% embed url="" %} {% hint style="info" %} The tiling of materials is discussed in a separate chapter: [Scanning and Tiling](/scanning-and-tiling/scanning) {% endhint %} # Add a Material Press the *+Create* button and then click on *Material*:

Next there will be a prompt that will ask for the name of the material:

Next you should select how you would like to create a new material: * **Blank:** Choose this if you are scanning with the colormass scanner (see [Scanning](/scanning-and-tiling/scanning)) * **From Image:** Choose this if you would like to create the material using a single image (see [Upload Image as a Material](/building-blocks/materials/add-a-material/upload-image-as-a-material)) * **From Image (AI):** Choose this if you would like to create the material using a single image but would like to enhance it with the colormass AI material creation (see [Upload Image as a Material (AI)](/building-blocks/materials/add-a-material/upload-image-as-a-material-ai)). Please note that this AI technology is still experimental. Check for more details about the technology. * **From PBR Files:** Choose this if you would like to upload your own maps (see [Upload PBR Materials (Custom)](/building-blocks/materials/add-a-material/upload-pbr-materials-custom)) # Upload Image as a Material To create a new material from an image follow the [Add a Material](/building-blocks/materials/add-a-material)page and select the *From Image* option. In the dialog drag and drop your image that you would like to use like so and type in the width and height (in cm) like so:

The click on *Create*. Tis should now prepare the basis of your material and the last step to do is to click on *New material:*

and then *Save* the material, like so:

# Upload Image as a Material (AI) When you click on the [Add a Material](/building-blocks/materials/add-a-material) button please select *From Image (AI):*

Here, you’ll need to fill out: * The name * The size (please make sure it is accurate) * Any relevant tags you find applicable (these help the AI algorithm categorize the material more effectively) Once you press *Create*, the algorithm will start processing and will take approximately 10–15 minutes to complete. After the process is finished, you will find the maps listed under your item, like this:

# Upload PBR Materials (Vizoo, AXF) {% hint style="info" %} colormass offers an automated solution for integrating **Vizoo** and **AXF** scans into the system. Currently, this conversion is handled by colormass staff, but if your team needs to perform individual conversions rather than processing a large batch at once, please contact your colormass account manager to see how this can be added to your account as an individual feature. {% endhint %} # Upload PBR Materials (Custom) To create a new material from an image follow the [Add a Material](/building-blocks/materials/add-a-material)page and select the *From PBR Files* option.

The click on *Create*. This will open a new material dialog, where the texture set, with the placeholder maps are already created, where you will be able to drag and drop your maps:

Drag and drop your maps to the slots that best describe the map you are trying to upload and then also enter the **physical size** of the maps, like so:

then click on *Save*. After these steps now there is only one step left to do, which is to click on *New material:*

and then save the material:

# Copy a Material To copy a material you simply need to hover over the card of the material and then press *Copy:*

Once you press the icon the new material with the exact same material graph will be created. The name will be the same as the original material with a "(Copy)" added to the end of the title.

# Recolor a Material It happens often that you want to use an existing scan or material and copy it multiple times (see [Copy a Material](/building-blocks/materials/copy-a-material)) and then recolor it or that you need to simply adjust the color of an existing scan. In either case as a first step we would need go to your copied or original material and open the material editor by clicking on the *Edit material* button.

This will open up the material editor. In the material editor the Base color is simply taken from the scan or uploaded image and plugged in to the material definition (node on the right), so to change the color we would need to break this line and add an adjustment node.

In the recording below you can see how you can add a [RGB Curve](/building-blocks/materials/recolor-a-material/rgb-curves) node that you can then use to adjust the color. Just as in Photoshop, you can add multiple different adjustment nodes RGB Curve is just one option you can also use [HSV](/building-blocks/materials/recolor-a-material/hue-saturation-value) node.

The only step left to do is to adjust the curve (or HSV values) depending on which node you chose in the end, like so:

Once you are done do **not** forget to *Save* your material. # RGB Curves The RGB Curves Node allows color corrections for each color channel and levels adjustments in the compositing context.

Clicking on one of the channels displays the curve for each. * RGB (Combined RGB) * R (Red) * G (Green) * B (Blue) # Hue Saturation Value The Hue Saturation Value Node applies a color transformation in the [HSV Color Model](https://en.wikipedia.org/wiki/HSL_and_HSV).

### Hue Specifies the hue rotation of the image. 360° are mapped to (0 to 1). The hue shifts of 0 (-180°) and 1 (+180°) have the same result. ### Saturation A saturation of 0 removes hues from the image, resulting in a grayscale image. A shift greater than 1.0 increases saturation. ### Value Value is the overall brightness of the image. De/Increasing values shift an image darker/lighter. # Adjust Reflectivity In order to adjust the reflectivity of a material on the platform you would first need to navigate to the specific material that you would like to change and click on the *Edit material* button.

This will open up the material editor. In the material editor the reflectivity is mostly controlled by the Roughness map, so to change the reflectivity we would need to break this line and add an adjustment node.

In the recording below you can see how you can add a [RGB Curve](/building-blocks/materials/recolor-a-material/rgb-curves) node that you can then use to adjust the reflectivity.

The [RGB Curve ](/building-blocks/materials/recolor-a-material/rgb-curves)works the same way as in photoshop. The RGB Curve in this case simply adjusts the brightness of the roughness (the brighter it becomes the less reflective, the darker it becomes the more reflective). So in order to decrease the reflectivity simply drag the bottom left point more to the top, like so:

or drag the top-right point and drag it down, like so:

# Adjust Opacity # Materials with Transmission You can determine if a material belongs to this category by checking for a node called Scanned Transmission. To adjust the opacity, simply modify the *Opaque Threshold* (see below).

If you decrease this value then the material becomes more and more see through, see below:

# Materials without Transmission In order to adjust the reflectivity of a material on the platform you would first need to navigate to the specific material that you would like to change and click on the *Edit material* button.

This will open up the material editor. In the material editor the reflectivity is mostly controlled by the Alpha map, so to change the opacity we would need to break this line (see highlighted in red below) and add an adjustment node.

In the recording below you can see how you can add a [RGB Curve](/building-blocks/materials/recolor-a-material/rgb-curves) node that you can then use to adjust the opacity.

The [RGB Curve ](/building-blocks/materials/recolor-a-material/rgb-curves)works the same way as in photoshop. The RGB Curve in this case simply adjusts the brightness of the alpha (the brighter it becomes the less see-through, the darker it becomes the more see-through it becomes). So in order to decrease the see-through simply drag the bottom left point more to the top, like so:

or drag the top-right point and drag it down, like so:

# Change a Map (Substrate) In some cases, it’s necessary to replace a map of a scanned or finished material. Most often, this involves swapping the diffuse map to introduce a new pattern while preserving the other captured reflection details. {% hint style="warning" %} Please note that this is an advanced change. If you are not sure what this option does, we recommend not using it. {% endhint %} The best way to start is by copying an existing material, such as a substrate scan (see [Copy a Material](/building-blocks/materials/copy-a-material)). Once you open the copied material, you will see the original set of textures displayed. Next you would need to add a new Texture Set:

Inside the new Texture Set, upload your new map (in this case, the Diffuse Map) by simply dragging and dropping it, as shown below:

{% hint style="warning" %} Do not upload the texture into the existing Texture Set, because the system will interpret the newly uploaded texture set as an updated version of the original and overwrite it. {% endhint %} You will also need to specify the size of the new map. Make sure the physical dimensions match the real-world size represented by the newly uploaded texture:

and then press *Save*. Once it is saved, copy or remember the Texture Set ID (in this case 61012) and navigate to *Edit Material:*

Then click *+ Add a new node* and select a new *Texture Set* from the menu.

and add the *Texture Set* ID here:

As a final step, connect the UV output to the X-Y-Z input, and plug the Base Color into the Base Color input of the Principled BSDF node like so:

Once you are finished, save the material. # Material Explorer The *Material Explorer* is a tool that you can use to explore how your graphics (regular images) would look on furniture pieces, without having to manufacture the fabric or patter. To use the *Material Explorer*, first navigate to the *Materials* tab:

{% hint style="info" %} In case you don't see this button that means your account doesn't have this feature turned on, please contact colormass staff to enable this feature. {% endhint %} Once you click on the button it will bring up a dialog window that should look something like this:

Click on folder icon in the bottom right corner and select your image. Next you will be asked to enter the dimensions of the uploaded image:

These are basically the physical size of the picture you just uploaded, these are important to make sure that the graphic is applied to the furniture pieces in the right size (if you get it wrong don't worry, you can change this later as well). Once your image is uploaded you can start adjusting the size and the rotation of the material, just like in this screenrecording below:

Changing width and height of the pattern

Furthermore in the bottom left corner you will be able to select furniture pieces to try for your pattern. {% hint style="info" %} Please ignore the *Material Explorer Material* button on the left (just above the furniture selection). That button is meant for a specific use case that most probably will not be used in your account. If you are unsure please ask your contact person at colormass. {% endhint %} # Rotate Material {% hint style="warning" %} Before rotating a material, make sure you understand whether the issue is limited to a **single material** with incorrect orientation or if **all materials** appear incorrectly on the mesh. If it’s the latter, you should adjust the [Pattern Placement](/building-blocks/products/pattern-placement) not the material itself. The easiest way to determine this is to open the texture editor (see below) and check whether the orientation shown there is the same as you would expect the orientation to be. {% endhint %} Navigate to the Materials tab and click on the material that you would like to change, and then click on the texture of the material:

Then in the operators add the *Rotate* operator to rotate:

{% hint style="info" %} In case you only see a Tiling operator, then please click on Tiling operator first (without modifications and then apply the Rotate operator). {% endhint %} If you don't see a way to add an operator then please follow the [I Can't Add an Operator](/scanning-and-tiling/texture-editor/i-cant-add-an-operator) page apply your rotation after the copy and then update your material. In case you are looking to edit the textures more, please look at the [Texture Editor](/scanning-and-tiling/texture-editor) section. {% hint style="info" %} Although materials can also be rotated directly in the material editor, we recommend performing rotations only in the texture editor. Some maps (such as normal maps) require additional adjustments when rotated, and rotating them solely in the material node editor can lead to incorrect visual results. {% endhint %} # Displacement It happens often that you want to increase the intensity of the surface geometry of a scanned sample. The first step we would need go to your copied or original material and open the material editor by clicking on the *Edit material* button.

Once you’re editing the material, you simply need to enable Displacement and save a new revision, as shown below.

This will enable a default strength for the surface geometry. If you want to increase the intensity of the surface detail, go to the Texture Editor by clicking on any texture in the scanned set, then select Adjust size and set a value between 0 and 2 cm, as shown below.

To increase the intensity, simply raise the value above the default setting and press *Ok*. # Scan Materials This is described in detail in the [Scanning and Tiling](/scanning-and-tiling/scanning) chapter. # Remove a Material On the platform, materials that are in use or have associated data cannot be removed easily by design. This prevents users from accidentally deleting work that may have taken days to create with a single click. Additionally, if a material or texture is already used in a scene, the system restricts its removal to avoid errors when the scene is opened later. To remove a material, you need to ensure two things: * The material doesn't have any revisions (see [#remove-material-revisions](#remove-material-revisions "mention")) * The material doesn't have any textures (see [#remove-textures](#remove-textures "mention")) ## Remove Material Revisions {% hint style="info" %} If you don't see any revisions under your material (and you only see a *New Material* button), then you can skip this step. {% endhint %} In order to remove the materail revisions, you would need to click on *Show version history*

And then on the bin icon to remove each revision:

If you see that a material revision cannot be removed, it means that it is currently referenced in a scene. At this point, removing the material becomes intentionally more restricted, because it has already been used in one or more scenes. If the material were removed, those scenes would produce an error every time they were opened. You can view the list of scenes where the material is used in the following section in the dialog window:

You would need to open each scene and manually remove the material. The system will not remove it automatically, since doing so could potentially damage the scene. ## Remove Textures {% hint style="info" %} If you don't see any textures under your material, you can skip this step. {% endhint %} Removing revisions is only one part of the process. You also need to explicitly remove the textures associated with the material under *Texture Sets.* Click on any of your textures:

Once you are in the texture editor, you can remove all of your texture revisions like so:

And once those are removed, you still need to go back to the material and remove the complete *Texture Set* by clicking on the bin icon:

## Remove Material To delete the material once there are no associated data, you just have to click on the three dots and press *Delete material.*

# Download PBR Materials In order to download the PBR maps of the material first navigate to the publicly available list, so go to *Materials* and then to *Public Library*.

There click on the material of your choice. In the dialog if you see an Upgrade to Download button that means that you would need to upgrade your plan before being able to download the material. {% hint style="info" %} You can only download a material with a paid account. If you see a "Upgrade to Download" button, that means that you will need to upgrade your account before being able to download a material. {% endhint %} If you see a download icon, then just click on that and your material should begin downloading. # Scenes # Camera ## Add a Camera You can add a camera by clicking on the *Camera* *& Lights* button and then clicking on *Camera.*

When you click on the camera, you'll see various options in the inspector area (middle column). Among these, you'll notice the Preview section. Furthermore a blue rectangle will appear in the 3D editor, which represents the focus plane.

## Changing the Target and Focus If you click on the camera target (or if you click on the camera again while it is selected) you can also move the target of the camera around.

You will notice that the blue rectangle is changing while you are changing the target. This is because by default there is an *Autofocus* set and the camera is adjusting the focus depending on what you select as the target. But it is possible to **turn off** the *Autofocus* and set it manually. To do this press the *Autofocus* toggle and then either: * Choose a point or * Set the focus plane distance manually in the *Focal distance* field as you can see in the recording below:

{% hint style="danger" %} Please always make sure the focus plane intersect the area where you want your camera to focus, otherwise the image will be blurry. {% endhint %} ## Focal Length

The focal length controls the level of zoom, determining how much of the scene is visible at once. A longer focal length results in a narrower field of view (more zoom), while a shorter focal length provides a wider field of view, allowing more of the scene to be visible at once (less zoom). ## Set Depth of Field To achieve a DOF, you have to set your *Focal distance* to the right point and then increase or decrease the *F-stop* (see the second arrow on the top screenshot). The lower *F-stop* is the narrower the depth of field will be and the higher the *F-stop* the larger the depth of field will be. Therefore if you would like your image to be sharp everywhere set it to a high number (like 500) and if you would like your image to be blurry except

# Light ## Add a Light At the moment there are two ways to add a light source in the editor: * Area light * HDRI light You can add an area light by clicking on the *Camera* *& Lights* button and then clicking on *Lights* and then *Area Light.*

Which will add a rectangle like object in the middle:

## Targeted vs Non-Targeted If you click on the target you can also adjust where the target of the light is. The light by default will move around a fixed point in space:

If you change the *Targeted* toggle*:*

you will have a *Non-Targeted Light* that is not fixated on any point in space.

## Width and Height You can change the width and height of the light:

## Intentisty and Color furthermore you can also adjust the intensity and the color of the light. If you change the intensity it is good to keep in mind that the intensity of the light will depend on which type of light you chose.

You can choose between the two types of *Area Light*: * Blender: The luminous flux (the intensity of the whole light) remains constant, meaning that increasing the surface area (width and height) will not affect the overall intensity. * Corona: The luminance of the light (the intensity in a given unit area) is constant so if you increase the size of the light it will increase the intensity of the whole light as well To change the color of the light, you simply have to pick a color from the color picker.

## Visibility In some cases it is important to adjust whether the light is visible to the camera or various reflections, and this you can change in the visiblity settings:

# HDRI In 3D design and rendering, HDRI is a technique that uses a special 360-degree panoramic photograph to light a virtual scene. HDRI stores a massive amount of real-world light data. Imagine taking your 3D object and placing it inside a giant, glowing sphere that is painted with a real-world environment. Wherever there is a light source painted on that sphere, actual light shines down onto your object from that exact direction. ## Changing HDRI Lighting When you are working in the platform, you have the ability to rotate this HDRI environment in three different directions (the X, Y, and Z axes). Because the HDRI is a full 360-degree map of light and color, adjusting these rotations changes exactly where the light sources and shadows fall on your object. By simply tweaking these three rotation values, you essentially produce completely new light settings from the exact same file, without ever having to manually add or adjust artificial lamps. See the recording below.

# Render Node In the render node you are able to set the resolution and the rendering accuracy.

* W: width of the image in pixels * H: height of the image in pixels * Samples: The number of paths traced for each pixel in the final render. Increasing the number of samples reduces noise and improves accuracy. Usually for a regular white background image you can set 50-100 for a quick preview and set 100-300 for room images or for a less noisy white background image. Please note that increasing the number will take the image a longer time to finish rendering. # Post Processing If you already generated an image you can adjust the final look by applying various affects. All these effects can be controlled in the *Post Processing* node. If you click on the *Post Processing* node and the *Render Image* button:

then you can see how the changes that you apply to the *Post Processing* node will affect your image. You can see a quick overview of the various options and their effect on the final render below.

The main options of post processing are: * **Exposure**: Adjusts the exposure (brightness) of the image, with negative values making the image darker and positive values making it brighter. * **White Balance (White B.)**: Adjusts the color temperature of the image to achieve accurate colors, where lower values make the image cooler and higher values make it warmer. * **Tone Mapping**: * **Tone Mapping Type**: You can select the algorithm to use when adjusting the tonal values of an image. * **LUT (Look-Up Table)**: Applies a specific color grading to the image for visual style. * **Background**: * **Transparent**: Makes the background of the image transparent. * **Composite**: Adds a background color to the image. * **Background Color**: Here you can select the background color that is used in compositing. # Process Shadows In some cases it can happen that shadows continue for way to long until the edge of the picture. Especially if you need the shadows to be uniform on many images (i.e. you would need a way to consistently cut the shadow for all images). To easily change this without having to change the light and the camera, there is a *Post Processing* option called *Process Shadows*. With it you can control how quickly the shadows disappear as they approach the edge of the image. Options:

Option	Description	Range	Default
Shadow Inner	Mostly you will not need to use option, but this option pulls away shadows from the object. Unless you need something specific (e.g. increase the strength of the shadow that extends under the product) please skip this option.	0-1	0
Shadow Outer	Controls how far from the object the shadow disappears. The higher the value the more it tries to suppress the shadows that are not directly under the product.	0-1	0
Shadow Falloff	Controls the falloff of the shadow (how quickly, how soft the shadow gets). The lower the value quicker it gets softer away from the product.	0-1	1
Shadow Opacity	Controls the transparency and overall darkness of the generated shadows. The higher the value the less transparent it is.	0-1	1

Take for example the following image:

When turning on the option we can see already that with the default values we see that much of the shadow disappears around the product:

If we increase the **Shadow Outer** to 1 it will not let any shadow be casted away from the product (other than the shadow right under the product):

If we decrease the **Falloff** to 0 it will make the shadows much softer much quicker away from the product. So you see the bit stronger shadow right under the product but going away the shadow gets much softer.

If you take a look at the last image (Falloff 0) we might want to make the shadow extend a bit more under the product and this is where **Shadow Inner** comes in. Increasing a value a bit, we can see that the shadow extends but the Falloff doesn't change.

# Material Range On the colormass platform, you can add an entire range of materials for renders and for configurators, allowing you to generate many variations of materials within the same range or pattern with a few clicks. To do this please click on *Other* and then *Material Ranges.*

Once you click on your *Material Range* it will add a *Config Group* with your materials added as variants. {% hint style="info" %} To learn more about what a Config Group is check out the [Create Variants](/building-blocks/products/create-variants) and [Create Material Variants](/building-blocks/products/create-material-variants)pages. {% endhint %} To apply these variants, simply drag and drop the last item in the group (indicated by the small arrows) into the desired material slot (see below).

# Introduction {% hint style="warning" %} This tutorial builds on the [Building Blocks](/building-blocks/products) tutorials. It assumes you already have some **products prepared** (either by colormass staff or by yourself), as they are required to create configurators. {% endhint %} In this chapter, we'll start using the 3D assets we created previously in the [Building Blocks](/building-blocks/products) chapter, focusing on **generating configurators** of an existing product. {% embed url="" %} In this section, we'll show you how to create new configurators that you can publish on your website. With the colormass Single Asset System, you can use the same assets for rendering images as you do for creating configurators or AR, eliminating the need to create different assets for each use case. In this chapter, we will use a simple product to create a configurator, adjust its lighting settings, and upload icons to be used in the UI of the configurator. It's important to note that the tutorial will demonstrate the default UI of the configurator, which you can use to get started quickly. However, the colormass Configurator also offers an API that allows you to connect configurator functions to your own custom UI. I hope you find these upcoming tutorials exciting as we begin to use the products created in the first chapter. {% hint style="info" %} It is possible to seamlessly integrate the configurators into your website. For more information check out the [Configurator](/dev/configurator/introduction) developer documentation. {% endhint %} # Create Your First Configurator # Add a New Configurator First navigate to the Pictures tab on the platform and there switch to the Projects tab:

If you already see various folders (projects) and sub-folders (sets) then please select a subfolder (set) where you would like to put your configurator. If the folder doesn't exist yet, please create it, by adding a new project and then set:

Once you selected the set you would like to place it in then press the *+ Create* button and click on *Configurator* like so:

# Add a Real-Time Scene and a Product In order to create a configurator first we need to add a real time scene that can serve as a starting point. Therefore got to the *Scenes* button of the top bar and select a real-time scene:

{% hint style="info" %} If no such a real-time scene exists in your library, please ask your colormass contact person to add one to your library. {% endhint %} Once you added the scene please also go to the *Products* button in the top bar and add a

{% hint style="warning" %} It's very important to note that in these Configurator tutorials we are only showing how to embed a product in an environment and then publish it in a website. Creating variations and product logic is part of the [Products](/building-blocks/products) tutorials and not part of the Configurator tutorials. {% endhint %} # Adjust Camera and Lights If you followed the previous two steps then now you should have the basic setup of a configurator: a real-time scene and a product. You can adjust many things in the configurator to match your exact needs, in this page we will adjust the *Camera* and the *Lights.* ## Adjust the Camera You can freely move around the camera and adjust both the position of the camera and its target. The preview that you can see in the inspector area (left) will be the actual starting point of the published configurator.

## Adjust the Lights The same way as adjusting camera you can also move and adjust the lights to achieve the final light setting that you would like to have for your configurator.

# Change Basic UI Settings If you click on the Scene Properties node in your configurator there are various options that you can do. For the purpose of this tutorial lets simply change the UI style to *Icons:*

and also lets change the *Icon Size* to a bigger size:

# Publish the Configurator Once you saved your scene you can easily publish your scene using the *Publish 3D* button:

in the top right corner and click on *Copy configurator URL*. If you’ve followed these steps correctly, opening the link should display a 3D viewer similar to the one shown below, which can easily be embedded into your website.

You’ll notice that several elements are missing (e.g., the options don’t have icons uploaded yet), but we’ll cover these details in separate tutorials. # Upload Icons As you probably noticed in the [Publish the Configurator](/configurator/create-your-first-configurator/publish-the-configurator) page the configurator by default doesn't include any icons and this would be something that you would need to upload for your own product. To do this you would first need to locate the product whose icon you would like to change. If you only know the scene of your configurator, you can also find the product by finding your product inside the tree and clicking on its link:

Once you are in the product that you would like to change, simply click on a config variant like so:

and click on the blue Icon field. This will open up a window where you can select a new icon. # Limit Camera Movements {% hint style="info" %} This setting is for configurators only: to limit the angles and zoom levels the user able to explore in the configurator. {% endhint %} You can limit the camera movement in the configurators by setting the properties of the camera in the editor. You can set the following two aspect: * Distance: how far or how close the camera can go * Angle: how much rotation is allowed ## Distance You can set the minimum and maximum distance the camera can take if you click on the camera and set the following two values:

## Angle Camera movement in the configurator settings can be limited by setting vertical min/max angles (min and max angle (v)) and horizontal min/max angles (min and max angle (h)). Please note that these angles are in degrees and defined in the spherical coordinate system as the following figure implies:

To define possible values for the horizontal rotation, the user can set the minimum value of phi by the field *min angle (h)* and the maximum value by the field *max angle (h)*. In the same manner, the set of the possible values for the vertical rotation can be set by the field *min angle (v)* and *max angle (v)*. In this way, the possible viewing angles for those who uses configurator can be defined. If you click on the camera than you can find these settings here:

The minimum and maximum vertical angles are from 0 to 180. The screenshot below shows roughly what these values mean:

Values above 180 and below 0 will be clipped. For example you set the maximum vertical angle to 190 degrees, it will be set to 180. Likewise, if you set it to -10 degrees, it will be set to 0. The horizontal angle goes from 0 to 360 (without any clipping). See screenshot below:

The horizontal angle for the camera is 0 degree. If it were 360 degrees, the camera would still be in the same position. {% hint style="info" %} Since there is no clipping both setting *min angle (h)* to *0* and *max angle (h)* to 360 and *min angle (h)* to *-180* and *max angle (h)* to 180 will work. {% endhint %} # Viewer Settings There are many other options that you can change in your configurator settings, if you click on the Scene Properties: * **Features**: Here you can turn on and off features for your configurator. Before turning on features please discuss with your colormass contact person whether your plan includes a certain option to ensure that it will work correctly. * **Configurator UI Settings:** Here you can select the UI style (unless you connect to the configurator through the API) and also adjust other visual settings like the *Background Color* or the *Icon Size*. * **Shadow Catcher:** You can adjust how much shadow you would allow in the configurator (so that you can adjust the amount of shadow regardless of your light settings).

# Integrations # Webflow Adding an interactive 3D product configurator to your Webflow site is one of the best ways to increase user engagement. The step-by-step documentation will show you how to embed interactive 3D viewers In this quick guide, we will walk you through how to embed your configurator `iframe` code into your Webflow project.

### Step 1: Open your project Open your project in the Webflow Designer. Select the existing site or page where you want to integrate the 3D viewer directly.

### Step 2: Add an Embed element Next, you need to add a custom embed block to hold the configurator. 1. Click the Add Elements icon (`+`) in the top left panel or press `A` on your keyboard. 2. Scroll down to the Components section. 3. Drag the Embed element onto your page canvas where you want the 3D viewer to appear. {% embed url="" %} ### Step 3: Paste the iFrame snippet Start out by putting this basic iframe code snippet into the code editor of your new Embed element: ```html ``` #### Get your Configurator URL Next, open your 3D configurator setup in the colormass platform. 1. Navigate to your project. 2. Click Publish 3D. 3. Select Copy Configurator URL.

#### Add the URL to Webflow Copy the URL and paste it into the `src=""` attribute of the iframe code in Webflow. Your final code should look something like this: ```html ``` See the parts of this 3rd step recorded in the video below. {% embed url="" %} ### Step 4: Save and Publish Once your code is pasted and you are happy with the placement of the embed element, click Save & Close on the embed editor. Finally, click Publish in the top right corner of Webflow to push your site live with the new 3D configurator. # Notion Learn how to integrate 3D models into your Notion workspace. Our step-by-step documentation will show you how to embed interactive 3D viewers into your pages

### Step 1: Open your Notion Page Start by logging into Notion and opening the specific page or board where you want to showcase your 3D model. Navigate to the exact spot on your canvas where you want the viewer to be placed.

### Step 2: Copy the Link from colormass Next, you need to get the specific URL for your 3D model. Open your 3D configurator setup in the colormass platform: 1. Navigate to your project. 2. Click Publish 3D. 3. Select Copy Configurator URL.

### Step 3: Embed 3D Viewer Back in Notion, go to your page and type `/embed`, then press Enter to create an embed block.

Paste your copied colormass link into the field and click Embed link. Once it loads, you can drag the edges to resize the 3D viewer to fit your layout perfectly. See the screen recording below to see all of these steps together. {% embed url="" %} # Miro Learn how to integrate 3D models into your Miro workspace. Our step-by-step documentation will show you how to embed interactive 3D viewers into your whiteboards.

### Step 1: Open your whiteboard Open the specific Miro board where you want to showcase your 3D model and navigate to the exact spot on your canvas where you want the viewer to be placed.

### Step 2: Copy the Link from colormass Open your 3D configurator setup in the colormass platform: 1. Navigate to your project. 2. Click Publish 3D. 3. Select Copy Configurator URL.

### Step 3: Embed iFrame Back in Miro, use the following steps to bring your 3D viewer onto your board: 1. Locate the Embed tool from the left-hand toolbar (if you don't see it, click the `...` "More tools" icon). 2. Insert your copied colormass link into the embed field. 3. Your interactive 3D viewer will instantly load onto the canvas.

See the screen recording below to see all of these steps together. {% embed url="" %} # Shopify Learn how to integrate 3D models into your Shopify store. Our step-by-step documentation will show you how to embed interactive 3D viewers directly into your product pages to boost customer engagement

### Step 1: Copy the Link from colormass First, you need to get the specific URL for your 3D model. Open your 3D configurator setup in the colormass platform: 1. Navigate to your project. 2. Click Publish 3D. 3. Select Copy Configurator URL.

### Step 2: Open your Shopify Product Log into your Shopify Admin dashboard. 1. Click on Products in the left-hand navigation menu. 2. Select the specific product where you want to add the 3D viewer (for example, a "Bose Headphone"). ### Step 3: Embed the iFrame in the Description Once you are on the product edit page, locate the Description text box. 1. Click the Show HTML button (the `` icon) located on the far right of the description formatting toolbar. 2. Paste your iframe code snippet into the code editor, placing your copied colormass link inside the `src=""` attribute. It should look similar to this: ```html ```

### Step 4: Save and Preview Once you have pasted the code: 1. Click the Save button at the top right of the page to apply your changes. 2. Click the Preview button (or navigate directly to your live storefront) to see the result. The 3D viewer will now seamlessly load alongside or in place of your traditional product media, allowing your customers to interact with the 3D model in real-time!

# Introduction {% hint style="warning" %} This tutorial builds on the [Building Blocks](/building-blocks/products) tutorials. It assumes you already have some **products and scenes prepared** (either by colormass staff or by yourself), as they are required to create images. {% endhint %} In this chapter, we'll start using the 3D assets we created previously in the [Building Blocks](/building-blocks/products) chapter, focusing on **generating images** of an existing product. {% embed url="" %} Please note, that everything shown here can be done entirely from your browser, making it significantly easier to scale your 3D operations or share scenes with colleagues or clients. This is a key advantage of our system compared to traditional 3D systems, where the 3D scene is typically accessible only to its creator. While we'll be working with simpler scenes, you can imagine applying the same steps to any type of room or studio scene you prefer. In fact many of our customers create a lot of various environments that are reused for various purposes. Generating images is just one way to utilize an existing product. With the colormass Single Asset System, the same product can also be used in a configurator and in AR. For more details, refer to the [Configurator](/configurator/introduction) chapter. # Render Your First Image # Add a New Picture First navigate to the Hpme tab on the platform and there switch to the Projects tab:

In there you will find that there are various folders (projects) and sub-folders (sets). Please select a subfolder (set) where you would like to put your image. If the folder doesn't exist yet, please create it, by adding a new set:

Once you selected the set you would like to place it in then press the *+ Create* button and click on *Image* like so:

This will open up a new image scene (which was added to the folder that you had selected). # Add a Scene In order to create a new image first we need to add scene that can serve as a starting point. Therefore got to the *Scenes* button of the top bar and select a scene:

{% hint style="info" %} If no scene exists in your library, please ask your colormass contact person to add one to your library. {% endhint %} Depending on how the scene was prepared it might already include a product but in case it doesn't then don't hesitate to go to the *Products* button and select any of your products:

# Render Image There are many things that you can change on the scene of course (swap out products, assign new materials, change camera and light settings) but for now we would render out an image as is. To do that click on the *Render Image* button in the top right corner

This should exchange the *3D Editor* that you have seen so far into the image view:

where you can press the *Render this variation* button to submit the image to be rendered on the colormass servers. # Batch Rendering Rendering a single image only captures the currently selected variant. To generate all variations simultaneously, you must use specific editor views. The following pages explain the batch generation process. # View All Variations In the 3D editor the active view is called *Structure* that shows the structure of the scene, and the currently selected variation that would appear in your render.

In the above screenshot you can see that currently a variation called *Romo* is selected, which will be used in the render. If we wanted to generate all variations we would need to click on the *Structure* and change to *All Variations.* In this view all of your variations will be listed (as a flat list), like so:

If you click on each variation on the left side, it will show that specific variation on the right side as well in the 3D viewer.

# Render All Variations Once you are in the *All Variations* view (check the [View All Variations](/rendering-platform/batch-rendering/view-all-variations) page for more details) you can render all of the variations at once.

To render all of the images at once, press *Render All* and then click *Submit jobs* if the number in the dialog corresponds with the number of images that you would like to have in the end:

Once you submitted the render jobs on the right side of each list item you will see a progress icon:

Please see below which icon corresponds to which render status: * Hourglass: The job is preparing to render. * Blue Circle: Rendering is currently in progress. * Green Icon: The render is complete. # Download All Variations In order to download all renders, you can press the Download All option here:

then select the right file format:

and press submit:

After submitting, a progress window will appear in the bottom-left corner while the images are zipped. When finished, a dialog will open allowing you to save the file.

# Delete All Variations To delete all your images you would need to click on the *Delete All* button:

and then press *Submit jobs:*

# Re-render a Variation If there is a specific variation that you would like to re-render click on the variation you need and then change to the *Render Image* view on the right side. When you click on each variation the corresponding image will be displayed, like so:

In order to re-render one, please select the variation that you would need to re-render and then press the little bin button and *Re-render,* like you can see below:

# Scanning SVBRDF Scanner developed by colormass

The colormass Scanner is an advanced device designed to capture flat surfaces with exceptional quality, covering a wide range of materials such as fabrics, leathers, woods, plastics, vinyls, and wallpapers, among others. The scanner's primary function is to generate highly accurate texture maps, which are essential for rendering realistic 3D models. The measurements it takes are used to produce texture maps that align with the Disney Principled BSDF (Bidirectional Scattering Distribution Function) model. By using this method, the colormass scanner ensures that the materials it processes retain a lifelike appearance when rendered in 3D environments, making it a powerful tool for industries like interior design, e-commerce, fashion, and product visualization. The integration with the Disney BSDF model also allows for seamless compatibility with most modern rendering engines, enabling high-quality visuals in real-time applications or pre-rendered imagery. To learn more about the surface digitization process, feel free to read our blog article [here](https://www.colormass.com/resources/blog/the-colormass-textile-scanning-process).

## Features and Specification * **Maximum capture area:** approximately 1.8 x 1.8 meters (6 x 6 feet). * **Maximum resolution:** approximately 800 DPI. For a sample size of 40 x 40 cm (16 x 16 in), this produces texture maps of around 13,000 x 13,000 pixels. * **Speed:** Approximately 1 minute for every 10 x 10 cm (4 x 4 in) area. Capturing a 40 x 40 cm (16 x 16 in) sample takes about 15 minutes. * **Color accuracy (Delta E):** 2.49 * **Batch capture:** This feature allows multiple samples to be placed on the scanning table simultaneously, significantly reducing manual effort and optimizing workflow efficiency. * **Calculated maps:** diffuse, normal, roughness, specular, metalness, anisotropy strength, anisotropy rotation, displacement and transmission (optional). For more details, click [here](broken://pages/qXfSSrSreM7D2Hnztb5w). {% hint style="info" %} colormass provides two options for utilizing their scanner technology: you can either use our scanning service, where we handle everything for you, or we can build and supply a scanner for in-house use, allowing you to capture high-quality material textures directly. To see real-life examples of how our customers are using the colormass Scanner, please click [here](https://www.colormass.com/technology/scanning). {% endhint %} # PBR Maps Technical specification of the maps generated by the colormass Scanner. To better understand the final quality of the maps, download one of the example scans: * [Leaves - Winter Creeper](https://storage.googleapis.com/cm-platform-prod-media/dfdae760-d2ff-4f84-9c17-d712976047ca) * [Fabric - Jacquard Woven](https://storage.googleapis.com/cm-platform-prod-media/85ef293a-dd16-4829-9703-57d472cdfb95) * [Wood Veneer - Dark](https://storage.googleapis.com/cm-platform-prod-media/4f1437e2-e94a-47dd-95d5-2db5cb7c8e4f) * [Wood Veneer - Light](https://storage.googleapis.com/cm-platform-prod-media/4c2d0cf4-92f5-422c-b36b-fab4e0e3bd75) Below, you can see the technical specifications demonstrated on the *Fabric - Jacquard Woven* scan. {% embed url="" %}

Name	Type	Colorspace	Description
Diffuse	RGB	sRGB (except EXR: linear)	RGB map that can contain two types of data: diffuse reflected color for dielectrics and reflectance values for metals. It is devoid of any lighting information such as ambient occlusion.	/files/bwwl3g9RXiItdRTwkOMm
Normal	RGB	linear	A map describing the surface orientation by an RGB encoding. It uses the standard tangent space format, identified by the dominant purple color, corresponding to a vector facing directly away from the surface. Rendering engines differentiate between 2 types of formats: OpenGL (Y+ up) and DirectX (-Y down). We normally provide the OpenGL (Y+ up) format. It can be transformed to DirectX (-Y down) by simply inverting / flipping the green color channel if required.	/files/xcateYh6mRQpuolXRlED
Roughness	Grayscale	linear	Describes the surface irregularities that cause light diffusion. Black represents a completely smooth / shiny surface and white represents a completely rough / diffuse surface. In-between grayscale values allow for different roughness values.	/files/gRGUOWm58ApQ81iQJW5c
Specular	Grayscale	linear	Describes Fresnel reflectance for dielectric materials. Black represents 0% reflectance and white represents 8% reflectance. Most real-world dielectrics have around 4% reflectance, so the values of this map will mostly be around mid-gray.	/files/tRSTqQcSwsvRQYzfZy5H
Metalness	Grayscale	linear	Describes which parts of the surface are metallic (represented as white) or non-metallic/dielectric (represented as black). Also grayscale values in-between are possible, representing mixtures of metallic and dielectric surfaces.	/files/eKYdyMPFzoQumZuz96DR
Anisotropy Strength	Grayscale	linear	Describes the strength of the anisotropic highlight. Black represents a completely isotropic surface (circular, directionally independent highlight), white represents a completely anisotropic surface (elongated, directionally dependent highlight). In-between values define different levels of anisotropy.	/files/RMv3TOgZQIrhwdhqC9cD
Anisotropy Rotation	Grayscale	linear	Describes the orientation of the anisotropic highlight. It uses a clockwise encoding where black represents a 0°, mid-gray represents a 180° and white represents a 360° rotation of the anisotropic highlight.	/files/ho7epPFGz3Gjri3Lz4ij
Displacement	Grayscale	linear	Describes small-scale geometric detail of the surface. Black represents zero modification, white represents the surface being fully pulled "outwards". In-between values allows different levels of displacement. The (metric) value of how far the surface should be displaced outwards for a white color value is currently not made available and up to artistic control.	/files/61lsLnqvCLmoocV9a1FH
Mask/Alpha (optional)	Grayscale	linear	Describes a simplified version of transparency. Black represents a completely transparent region of the surface, where light passes through unperturbed. White represents a (usually opaque) region where the rest of the maps have full influence over the behavior, and no blending occurs. Intermediate values result in a blending between the shaded surface and full transparency.
Transmission (optional)	RGB	sRGB (except EXR: linear)	Describes the amount and color of light transmitted through the surface of a material. When this originates from the colormass scanner, this is assumed to represent diffuse (scattering) transmission. (Since the scanner cannot distinguish between areas that are fully transparent and areas that have very high scattering transmission, this usually needs to be combined with a mask. The mask may be derived from the transmission map by picking a threshold which identifies high-transmission areas as fully transparent.)

## Frequently Asked Questions (FAQ)

What is the maximum scan area and resolution?

Please find the scanner specifications [here](/scanning-and-tiling/scanning#features-and-specification).

What is the recommended sample size for scanning?

If the material has a repeating pattern, we require a sample that includes the full pattern in both horizontal and vertical directions, plus an additional 25%. This ensures that the scan can be made tileable. For solid textures with minimal or no pattern, we recommend samples approximately 60 x 60 cm (24 in x 24 in). Although the repeat may be smaller, scanning this larger area allows for a more natural texture, provided there is sufficient variation across the surface. We understand that larger samples may not always be available or cost-effective, especially when dealing with standard swatch sizes that are only a few centimeters or inches. Therefore, we can accommodate smaller samples if necessary. For leathers, woods, and other natural materials that do not have a repeat due to their organic nature but still possess distinct patterns, please [contact us](https://www.colormass.com/contact) for a consultation. We can help determine the most appropriate sample sizes for scanning. You can find information about shipping samples [here](/scanning-and-tiling/scanning/shipping-material-samples).

Why is there value in the metalness? This looks like a fabric sample.

The maps we provide are parameters according to the standard Disney principled BSDF model that were fitted to the observed images captured under different illumination directions. We optimize for all the channels, even though some samples (materials) do not contain metal or are isotropic in a physical sense. However, the fitted model gets closer to what is being observed in the captured images when these maps are also optimized, as the algorithm has more degrees of freedom to tweak its appearance. Depending on the specific material we could also easily constrain these maps to be zero. However, this would yield a slightly larger fitting error (it is never possible to fit the model to the observations 100%). Our goal is to get as close as possible to the visible/observed appearance of the captured sample. Normally the primary goal is to obtain the most realistic and accurate scans of real-world materials. This aligns perfectly with our approach. Our fitting process employs all available degrees of freedom (PBR maps) to capture the true essence of each sample. While we provide individual PBR maps for convenience (easy use in different rendering tools), analyzing them in isolation within a traditional 3D workflow might be misleading. Instead, consider the entire set of maps as a unified entity. You should assess the final, rendered results for a comprehensive understanding of the material's appearance by directly plugging the fitted maps into your shader.

Color accuracy is very important for us. Why do you have lighting/shadows/specular components baked into the diffuse map?

Color accuracy is also one of our top concerns, and we take great care to ensure that we get the best possible data from our scanning system. This is a very deep topic, and there are a huge number of factors to consider when discussing how accuracy is measured and evaluated. Ultimately, what should be judged is the final render, rather than the isolated maps, since there are numerous shading effects that can influence color perception. Shadows can occur in the diffuse map due to self-occlusions within the 3D structure of the surface. While it may seem strange that these are present in the diffuse/albedo map, they must be accounted for by some parameter in order for the rendered results to match the original sample. In a typical top-down 3D workflow, an artist would have these separated out into different maps for ease of editing, but the final rendered result would be very similar once all the maps are combined in a shader.

Why do you have anisotropy maps for isotropic materials?

Many seemingly isotropic materials are actually anisotropic when viewed at a small enough scale, and our scanner is able to resolve this. When viewed at a distance, the various anisotropies will average out to give the appearance of isotropy. Rather than have special cases for different types of surfaces, we always calculate anisotropy-related parameters, since their inclusion almost always increases the accuracy of the final render. (It should be noted that if a sample has particularly high roughness or low specularity, then high anisotropy values will contribute less of an effect towards the end result. Therefore, a high anisotropy value should not immediately imply that the material is highly anisotropic—it needs to be taken in context with the other parameters.)

# Shipping Material Samples Guidelines for preparing and shipping material samples * **Sample sizes** should be 60 x 60 cm (24 x 24 in). If the material has a larger pattern, the sample should be the full repeat size in both directions (vertical and horizontal) plus 25%. * **Never fold** the samples to prevent wrinkles or creases. Please send them either: * Rolled, or * Laid flat in a 60 x 60 cm (24 x 24 in) box. Ensure the box is fully packed to prevent the samples from moving during transit. * Clearly **label** each sample you send. We will use the names and article numbers you provide on the colormass Platform. Please mind the following: * Indicate the front (or back) side of the sample * The direction of the sample (top/bottom) * If your labels are 10 x 10 cm (4 x 4 inches) or smaller, place them on the front of the sample * If your labels are larger than this, place them on the back to avoid covering a significant portion of the sample, which could interfere with the scanning process * For transparent materials, use small labels and place them on the front * Use the [shipping address](#shipping-address-and-contact-details) provided below. {% hint style="info" %} If shipping from outside the European Union, please include a customs declaration (i.e., a pro forma invoice—not an actual invoice) attached to the outside of the package, detailing: * Your company name and address * colormass’s company name and address (see below) * A description of the contents (e.g., "Material samples (textile, fabric, vinyl, etc.) for upholstery furniture") * The value of the package (ensure the declared value is more than 0 € but under 100 €). {% endhint %} ## Shipping Address colormass GmbH\ Tas Sóti (+49 30 6920 6200)\ Fasanenstr. 7-8\ 10623 Berlin\ Germany # Exports {% hint style="info" %} It is possible to integrate exports directly into your website, so that you don't have to manually download and upload files. For more information check out the [Data Exporter](/dev/data-exporter/generating-exports) developer documentation. {% endhint %} A big advantage of an online 3D system like colormass is that since you are only storing a single source of truth, you can generate various kinds of export without having to store all those variations separately in the database. ## Types of Exports On the right side of the screenshot below under *Material outputs* you can see four main outputs.

For fall materials that have an online revision, various outputs can be generated: * **Flat thumbnails** are images that are generated with a fixed dimension that is visible on the image. On the platform the following predefined sizes are available to be generated:

* **Tileable image** is an image that can be placed next to itself (above, below, or side-by-side) without creating an obvious seam. The size of the repeat (and hence the physical size visible on the image) is included in the name of the file. * **Map exports** are the PBR exports where the maps can be exported based on the last material revision or texture set. This can mean standard PBR exports but you are also able to change between render engines (Vray, Corona, Cycles), workflows (Metallness/Roughness, Specular/Glossiness), file type and many other settings.

--- [Next Page](/llms-full.txt/1)

${parameter.name}