3D Preview and Augmented Reality

The 3D preview allows you to provide your customers with a realistic 3D view of the product they are customizing. Augmented Reality allows them to see the product in their real-world by the mobile phone.

 

Summary:

 

1. Setting up a 3D preview for your product

Important before you start:

  1. Before enabling the 3D preview, your product must be configured as a customizable product.

  2. Use assets with the following characteristics:

    • Use light and low-poly 3D models in order to have good performance. We suggest models that do not exceed 200,000 polygons.

    • Supported formats:

      • Wavefront OBJ and MTL (.obj)

      • BABYLON JS (.json)
      • GLB/glTF (.glb, .gltf)

      We suggest using glTF or Babylon format, if possible (you can download the export plugin for your 3D editor here, at the exporter section).

    • Textures (if any): can be both JPEG or PNG and should be a maximum of 1024px for the Desktop version and 512px for the Mobile version to avoid performance issues

    • Size: 6/7 Mb max, for simple items such as mugs 1/2 Mb max.

  3. If your product has multiple sides, your 3D model must be separated in different objects (parts) in your 3D editor, at least one for each side.

    As an example: if you have a t-shirt with front and back sides, then you must cut your t-shirt model in half in order to have two separate 3D objects for the front and the back sides.

2. Enabling 3D and AR

2.1 Uploading the 3D model

Go to your Zakeke back-office and enter the 3D Preview section. Then select the product for which you want to enable the 3D preview and click on it. 

In order to create the 3D preview you need to import a 3D model for your product. You can either choose to upload an existing 3D model with all textures or import it from the 3D Digital Asset Manager in Zakeke if you have already got a model done there. 

 

Once the upload has finished you will be looking at a frame like this one below. 

 

 

Product with Variants and Sides.

If your product DOES HAVE variants and sides, the 3D model you upload will serve as the base for all product variants.

In this case you have the option to upload a specific 3D model for each variant. Once you've uploaded the 3D model and everything looks fine, click "Next" on the bottom right corner to move to the next step, managing the 3D view for each variant individually. Go to the paragraph 2.2 to follow the 3D model management for Variants guidelines. 

 

Product without Variants, with multiple Sides.

But, if you're product DOESN'T HAVE variants and have multiple sides, you can simply modify the materials and colors of the base model if the shape remains the same.

For example, in the image below, you can see a Pillow, with just 2 sides and no variants, so after you upload your 3D model, you will proceed directly to the step called Side Association and Design Mapping. Go to paragraph 2.3 if you don't have Variants to manage and to follow the Side Association and Design mapping guidelines

 

 

 

Product without variants, with just 1 side.

But, if you're product DOESN'T HAVE variants and have just 1 side, you can simply modify the materials and colors of the base model if the shape remains the same.

For example, in the image below, you can see a Can, with just 1 side and no variants, so after you upload your 3D model, you will proceed directly to the step called Side Association and Design Mapping. Go to paragraph 2.3 if you don't have Variants to manage and to follow the Side Association and Design mapping guidelines

 

 

2.2 3D model management for Variants 

Your uploaded 3D model is automatically assigned to all product variants, if any is available, as mentioned before. 

 

If you have variants that affect the appearance of your product, such as materials, you can make the 3D model change based on the product variant that your customer is personalizing. 

As an example: you sell a mouse pad or a t-shirt in different sizes or shapes (variants) and you want the 3D model to change according to the variant chosen by your customer.

To use different 3D models for each variant, click "Replace" to upload separate models.

 

 

Alternatively, if variants differ only in color but share the same shape, edit materials by clicking "Edit Materials".

 

 

2.3 Sides Association and Design Mapping

Sides Association and Design Mapping are essential for your 3D view to function properly. You need to complete this step to finalize your product's 3D view setup.

 

This step involves linking each side of your product to the corresponding mesh in the 3D model. This ensures that each 2D side is displayed in the correct position on the 3D model. 

 

 

For precise visualization, use the positioning tools to move and place the design perfectly on the 3D model.

 

 

Remember, Side Association will be available as a step only if your products have sides to match to 3D model corresponding mesh, but if there is just one side, this step will be completed automatically and you will be redirected to Design Mapping instead. 

 

2.4 Design mapping

Once you select the mesh of the model to associate it with the side, a placeholder appears on the 3D model with the side name and a border with the size of the side area. Zakeke automatically fits the side area to the UV map quadrant.

 

This is how the design that the users will make on the 2D image of your product will appear on the 3D preview. If you are not satisfied, edit the setting to move, rotate and scale tools to adjust the placeholder design. Click save once you're satisfied with the final result. 

 

The same thing need to be done for all sides if needed. 

 

 

2.5 UV mapping and positioning

Warning: If you notice significantly inaccurate positioning despite using positioning tools, it may indicate a problem with the UV map of the model. In such cases, we recommend downloading a reference texture and utilizing 3D modeling software to recreate the UV map for your model.

 

2.6 Edit Materials

2.6.1 Model Materials

You can also edit the materials of your 3D model meshes directly inside this process. By clicking on the Edit materials icon you can edit all the materials and their specifications.

This step won't be visible if your product has no variants or if the 3D model has only one material.

 

 

2.6.2 Design Materials

Other than editing the Model Materials inside the options menu, you can decide which material is a Design Material one and how to modify its specifications this time. 

 

3. Augmented Reality

At this step, you enable the Augmented Reality feature for your customers.

 

If enabled, a special button appears on the UI of your customizer and your customers will be able to see your item in their real-world with their smartphones.

Remember to add the real-world height of your product in cm.

You can then decide if the product is resizable in AR, if you need a faster AR conversion (client-side) and if you allow wall placement.

Click on "Save" to publish the 3D and AR preview live.

Please note that augmented reality works only with the most updated Android devices that support Google Play Services for AR and Apple smartphones with iOS 12.

 

Was this article helpful?
5 out of 9 found this helpful