Upload glb/gltf models for the 3D Preview

Printess supports the upload of 3D models that are stored in the GLTF (GL Transmission format) format. Nowadays most 3D modelers support export of GLTF models. There are 2 common flavors of GLFT files that are both supported by the upload. A GLTF export consists typically of a .gltf file that is basically an index of all resources that are stored seperately on the file system like texture image files and binary files containing all the 3D meshes. In order to upload such GLTF file along with its resources, all files need to be added to the root folder of a compressed ZIP file. This zip file can then be uploaded on the Printess Accoun- Portal. Then, most 3D modeleres also support the export of GLB (GLTF Binary) files. In this format, the model and all its resopurces is stored inside one “big” binary file that acts as a container for the gltf file itself and all the other resources that are referenced inside the GLTF file. These GLB files can be uploaded directly without the need to pack them inside an addational ZIP file.

##Model Upload

1. Open the printess account portal (Printess account portal) and switch to the 3D section.

   

2. Provide a name like “Coffee Mug”

3. Copy the json below and paste it into the json text field.

{
    "format": "glb",
    "textures": [
        {
            "textureName": "",
            "fileUrl": "",
            "materialName": "",
            "faces": [
                {
                    "key": "",
                    "x": 0,
                    "y": 0,
                    "width": 100,
                    "height": 100
                }
            ]
        }
    ]
}

3. Click on “Choose File” and select either the ZIP file that contains your GLTF file and all its referenced resources or, if you have, your GLB file. Then click on “Create Model”.

##Json Configuration

1. After the model was created, you will see a folder url as well as the json that you provided on upload. Copy the URL and append /modelMaterials.json at the end so that the url looks like this: (https://printess-prod.s3.eu-central-1.amazonaws.com/uploads/f7236f763c594afe247feabecb9ea4d1c94a486e/3d/3ce18953f9491d7fe04491bcfeef0e92a9eb86c4/modelMaterials.json). This file contains all the materials that are referenced inside the model:

[
   {
       "name":"Coffee-Mug",
       "baseColorTexture":"coffee_c.jpg",
       "metallicRoughnessTexture":"coffee1_c.jpg",
       "normalTexture":"","occlusionTexture":"",
       "emissiveTexture":""
   },
   {
       "name":"Coffee",
       "baseColorTexture":"coffee_c.jpg",
       "metallicRoughnessTexture":"coffee2_c.jpg",
       "normalTexture":"",
       "occlusionTexture":"",
       "emissiveTexture":""
   }
]

2. Open the url that has been put together by yourself. The example file above shows that the uploaded coffee mug has 2 materials (Coffee-Mug and Coffee). Additionally you can see that each material can contain 4 texture files (baseColorTexture, metallicRoughnessTexture, normalTexture, emissiveTexture). For each texture that is used, a file name is provided. You will have to choose which of these textures and their images should be merged with the printess preview document. It is possible to have a look at each of these textures by coping the file name and appening it at the end of the directory url and open it in a browser. It should look like (https://printess-prod.s3.eu-central-1.amazonaws.com/uploads/f7236f763c594afe247feabecb9ea4d1c94a486e/3d/3ce18953f9491d7fe04491bcfeef0e92a9eb86c4/coffee_c.jpg)

3. Typically only sections (“faces”) of the whole texture are replaced by printess preview documents. Inside the model json definition on the printess account portal, you will have to tell the system into which texture file and at which locations the printess preview can be merged. For this open the texture URL that you put together in the last step, and open that file in a graphical program. In our example you can already see some marks where the logo can be placed on the 3d model. Write down the top left position of that rectangle (x, y) and the width and height. In our example, it is x = 1184; y = 2301; width = 1739; and height = 1283 (Everything needs to be provided in pixels)

Now, go back to the account portal and fill in the missing information using the information of the modelMaterials.json and the image coordinates:

The last thing to do is to provide a name to the face that will be shown inside the designer:

It is possible to specify more than one face so that several preview documents can be merged on the final 3D model.

It is also possible to specify blend modes for each of these faces. Possible blend modes are:

• source-over
• source-in
• source-out
• source-atop
• destination-over
• destination-in
• destination-out
• destination-atop
• lighter
• copy
• xor
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

(Html canvas blend modes)

To specify a blend mode, add a blendMode property to your face definition:

4. Internally, Printess uses the Google™ Model Viewer. It is possible to further configure the preview component by adding settings for additional html tags that are forwarded from the model definition to the 3D component. To do this, add a new json sub node called “viewerSettings” to thze model definition. Each HTML tag that is supported by the google viewer can be added here as key alongside its value:

Model Viewer documentation

5. Click on the “Save” button to save your changes