How to Connect to CartMagician Platform

CartMagician 'Connect'

CartMagician Connect provides all CartMagician users with and easy-to-use, copy and paste code snippet that instantly adds all the great 3D Viewers and augmented reality webiste functionality you need to showcase content and products in WebAR.

Installation steps:

• Login to your CartMagician account and go to your Profile
• From the Dropdown, select 'Connect your website'
• Select the generate Embed code
• Copy and Paste the generated code to the HEAD section of your website
• Verify your website

---

CartMagician eBusiness and Enterprise API

CartMagician API Integration

CartMagician API supercharges your products into augmented reality on any platform. Automate the process of converting and publishing 2D images, 3D models and WebAR straight to your product pages. and is avaulable to eBusiness and Enterprise users.

Review API Developer Documentation

---

2D to AR Conversion Tool - Single Image Processing

Converting Single 2D images into augmented reality.

Uploading 2D images into the CartMagician Platform is simple.

Click on ‘2D to AR Conversion’ icon and either:

1. Drag and drop your image file/files into the upload window; or
2. Select ‘Upload new media file’ to navigate to the file/s on your computer, DropBox or Google Drive; or
3. Upload files to the Media Gallery library to select from.

We recommend uploading your 2D images in either .JPG or .PNG format.

2D Image file sizes

You can upload an image file up to a maximum of 5MB as a decompressed image.

Larger image files generally won’t increase the quality of your AR file but may result in lower performance and loading speeds when viewed using the 3D or AR viewer.

2D Image file formats

We recommend you use JPG as it provides the best performance for 3D viewers and WebAR experiences.

PNG can be used but is best reserved for when transparencies are needed.

Cropping and Pixel Size

We recommend cropping your image so it only shows the area you want displayed within the template and it is in the correct ratio once converted into 3D and AR.

CartMagician does not apply any filters or colour adjustments to your images when they are uploaded, therefore it is important that you upload a high-quality image for great results.

As a guide, re-size your images in proportion with the longest edge being approximately 1000-1500 pixels in length, then save at 150dpi as .JPG. This maintains image quality when it is converted into AR and viewed in 3D.

---

2D to AR Conversion Tool - Batch Processing

Uploading and publishing images to AR in bulk

You can upload multiple images at one time, ready to be applied to a 3D template and converted to AR in one batch.

Our powerful 2D to AR automation process can convert 25 images in less than 2 minutes.

1. Follow the same image preparation guidelines as for a single 2D conversion and store your files in a zip folder.
2. Select ‘Bulk 2D Conversion’ from the main navigation.
3. Select your images and drag onto the upload screen.
4. Select your 3D template and convert.

We recommend uploading your 2D images in either .JPG or .PNG format.

---

2D to AR Conversion Tool - 3D Templates

Selecting a 3D template

3D templates host your 2D product images, so they appear in 3D and AR just like the real item.

CartMagician has a growing library of pre-rendered templates available for free. If you need something specific, can request additional 3D templates to meet your needs for an additional fee.

You find 3 types of templates in the library:

Re-sizeable templates

These automatically scale to the uploaded image size. You can specific a height for this type of template to scale to (in ratio) so that your customers can interact with a 1:1 scale representation of the real product.

Static templates

These templates have been created at a certain size and do not scale. They are designed to house your 2D image or pattern. For the best results, upload your design in the same scale as the template. If you need assistance with this, please contact support for help.

Repeat templates

These templates repeat your design to create a pattern. You can use our pre-set repeat patterns (as shown in the 3D preview) or create your own true-to-scale patterns. Patterns are best set up as a 1024x1024 or 2048x2048 tile and uploaded into the platform.

Custom templates

These are templates that have been uploaded into CartMagician by yourself then configured with the onboard 'Template Creator' alternatively you have requested the CartMagician 3D team to create for you and place into the Custom folder ready to use.

Optional Conversion Settings

• Specify Output Height Size: You can specify an output height size for your conversion under the 'Optional Conversion Settings' tab allowing you to convert your files using the Re-sizeable templates to specific size dimensions then viewed in augmented reality.
• Add Project Name: Include a project name so that your project so that you can search for at a later date.
• Specify Frame Colour:On certain CartMagician 3D templates you can change the frame colour to suit your needs.
• Specify MountBoard Colour:On certain CartMagician 3D templates you can change the mounting board colour to suit your needs.

Once you have added in your optional settings, start the conversion to apply and review with the QR code preview generated by CartMagician.

---

Project Gallery

Accessing your saved projects

Once your file has been converted into 3D and AR it is saved to the Projects folder.

You can access your projects at any time to edit, update and share your files, and access export setting and tools.

---

3D to AR Conversion Tool

Uploading 3D models

Uploading 3D models to the CartMagician Platform is simple.

Click on ‘3D to AR Conversion’ icon and either:

1. Drag and drop your 3D file/s to the upload window, or
2. Select ‘Upload new 3D file’ to navigate to the file on your computer, DropBox or Google Drive.

We recommend uploading your 3D model in either .fbx, .glb, .obj or .gltf format with materials baked in to the mesh. Or as a zipped .gltf or .fbx with linked materials /textures included. This way all materials won’t lose their links in the transfer process.

---

3D to AR Conversion Tool for WebAR

Uploading and Converting your file/s for WebAR output

Currently the maximum upload file size is 25MB per 3D file (including materials) but the platform can process up to 45MB. Files over this size generally will not be processed correctly.

Before uploading your 3D file, ensure that you:

• merge meshes/layers that share the same materials,
• keep your file to 300,000 polygons or less, and
• minimise overall mesh count where possible to approx. 10 meshes in total

For optimal performance of the 3D viewer and AR, we recommend you keep each converted product under 15MB, including textures.

Beyond this final output file size, older iPhones and Android devices have difficulty rendering content in AR, especially if the polygon count reaches 500,000 or more.

You can also check that your Apple iOS device is compatible or Android device is supported for full 3D and AR viewing capabilities. Both Google and Apple keep up to date lists that you can check against.

If you are having issues uploading your assets, please consult our checklist on identifying uploading issues.

---

3D to AR Conversion Tool for WebAR

3D File Formats

The CartMagician Platform supports the following formats: OBJ, FBX, GLB, GLTF, and ABC.

We strongly recommend you use FBX since it is our best supported and most tested format. GLB and GLTF are great alternatives which also support PBR materials.

Recommended file formats

• .FBX (as a single FBX with all baked materials included) or (all files contained in single .zip folder)
• .GLB
• .glTF (single file including materials) or (select all files and drop onto the uploader)
• .OBJ +MLT or (all files contained in single .zip folder)

How to Export FBX files

Blender 3D

• File > Export > FBX
• View Blender Help Doc:
• Exporting FBX in Blender
• Watch Short Video - How to Export FBX with Textures

3ds Max

• File > Export > FBX
• View 3ds Max Help Doc:
• Baking Simplified PBR Shaders to Export via FBX
• 3ds Max FBX plug-in Workflows
• Watch Short Video - How to Bake to Texture: Baking PBR Shaders then Export FBX with Textures for CartMagician

3D Model Meshes

Uploaded or converted 3D models retain your mesh naming structure.

It is important that the naming of your mesh components is clear so that you can correctly use some of the available CartMagician Tools.

For example, when using tools such as the AR Template Creator or Colour Variant Tool you will need to identify and select the correct mesh component work with e.g. the mesh that you wish to apply a colour variant to or the mesh that you would like to assign the swappable image component to when used as a template.

Upload Measurement Units

The measurement units you use are important to ensure the size of your model is correct on upload. The CartMagician Platform uses centimetres (cm) as the default upload measurement unit.

The upload measurement units should match the export units used in your 3D modelling software to ensure a consistent upload into the platform.

---

3D to AR Conversion Tool for WebAR

Setting up your 3D Model Files for CartMagician

Positioning your 3D Model

To ensure that your model is positioned correctly when viewed using the 3D viewer and more importantly when showed as augmented reality, you model needs to be positioned correctly prior to exporting out of your preferred 3D application.

Model Position

• Center the model at World Space
• Make sure that the model is stationed on the horizontal plane, so that it doesn’t appear to float in the air or be underground.

Model Orientation

• 0, 0, 0, 0
• Center the pivot point on the horizontal plane at the base of the model.
• Once positioned correctly, select ALL mesh components in the scene then apply the ‘Scale and Rotation’ to save the desired positioning.

Scale

• Check that your model has the correct measurement units (we use centimetres)
• This will ensure that the AR visualization is viewed at the correct scale.

Combining 3D meshes

To help minimise file sizes, create your 3D models with one mesh for each material.

You will need to do this in a 3D modelling software before uploading your product to the CartMagician Platform.

This is important if you are using the CartMagician AR Template Creator or Colour Variant Tools as you can only change the colour of the single mesh.

Blender

How to combine multiple objects into a single object in Blender:

• Join merges all selected objects into the last selected Active object. All object data is linked to the active object (which must be selected). All objects must be of the same type: mesh, curve, surface or armature. If several curves are joined, each one will keep its subtype (NURBS or Bézier).
• Simply select all the meshes you wish to merge, and hit CTRL+J to join them together.
• View Blender Help Doc

3ds Max

How to combine multiple objects into a single object in 3DS Max

• Use the Attach button to permanently fuse or join objects:
• With a single Editable Mesh or Editable Poly object selected, go to the Command Panel > Modify > Edit Geometry > Attach button. This will allow you to pick single or multiple objects to attach into a single object.
• Use the Collapse Utility to collapse multiple selected objects into a single object:
• Select all objects you want to collapse into a single object, then go to the Command Panel > Utilities > Collapse, select the Collapse options, then click on Collapse Selected.
• View 3ds Max Help Doc

---

3D to AR Conversion Tool for WebAR

Choosing colours and materials for your 3D model

CartMagician supports multiple materials and objects in the scene.

Creating and assigning materials to different parts of the product are important when building quality products.

Remember to give each material a unique name and merge meshes and materials with the same properties.

Assigning a Colour Mesh

You can add colour to your 3D model by adjusting the RGB(A), if you do not use texture maps. Adjust the alpha value for transparency.

Once your 3D project is in the 3D viewer:

1. Select Tools > Colour Variant Tool to reveal the ‘Settings’ panel.
2. Under the drop down, select the mesh name that you wish to change colour.
3. Next, assign the new colours.
4. Once configured, copy the iFrame code to your website to apply changes.

Textures

Textures are images mapped to the surface of your model. For best 3D viewer and WebAR results we use texture map sizes between 256x256, 512x512, 1024x1024 and 2048x2048.

Base colour / albedo map: The basic colour of the product that can also be a wood or a fabric.

Metallic map: black (0) for not metallic and white (1) for metallic

Roughness map: black (0) for rough and white (1) for glossy.

Normal map: A texture used to simulate depth by adding bumps and dents.

Emissive map: A texture or a solid colour used to make material glow.

Ambient occlusion map: Used to simulate shading on object.

Formats

• .JPEG
• .PNG (used for transparency)

Texture or Image Tiling

We support texture tiling.

---

Optimising WebAR files

How to optimise 3D and AR files to improve viewer performance

Optimizing your 3D assets and the mesh structure will help you to avoid issues when uploading and publishing issues. This will also improve the performance and reduce the data size of your WebAR product.

3D Viewer Performance

The overall performance of the viewer greatly depends on the computer displaying it. Complex scenes with a lot of detail may cause poor frame rates, slow viewing, or browser crashes. This is even more problematic for mobile devices, making it necessary to build 3D models that work on all devices.

Here are a few ways you can improve viewer performance.

Optimising Loading Time

Before rendering your product, the viewer needs to download and prepare all assets in the 3D scene. The loading progress is indicated on a loading bar. After every asset has been loaded a hand hint will appear and you may interact with the viewer.

Optimising Materials

For optimal viewer performance, aim to use minimal textures in your materials. We also recommend removing any unused files.

Textures

For optimal performance we recommend a texture file no larger than 2048x2048 pixel.

Using consistent sizes when using occlusion, roughness and metalness maps, (eg. 2048x2048 or 1024x1024) is also helpful.

Using many high-quality textures significantly affects viewer performance. We emphasize the use of high-quality textures for important and visible parts and lower-quality textures the less significant parts.

We also recommend using the same 1:1 UV space for multiple objects. This allows you to pack together textures, thereby significantly reducing the number of materials and textures you need to use.

Meshes

In a scene, aim to have one mesh for each material and before uploading your 3D product model to the Platform. Merge together all the meshes that use the same material.

When preparing your file:

• merge meshes/layers that share the same materials,
• ensure there are 300,000 polygons or less, and
• minimise overall mesh count, where possible, to approx. 10 meshes in total.

Polygons / Vertices

Determining the optimal amount of polygons for each product is a good way to improve viewer performance.

High vertex/polygon count does not always increase the quality of a product, but it does increase the download and viewing time.

For most products, 250-300k polygons are more than enough to give a realistic visualization of an object.

Here are a few tips to optimise your files:

• Try decimating the mesh, this often produces great results.
• Use normal mapping to fake surface complexity.
• Use smoothing groups.
• Remove meshes that are not visible.
• Remove faces that are not visible.
• Reduce textures from 2K(2048x2048) to 1K (1024x1024) or 512x512.

---

Optimising WebAR files

Common 3D Viewer and AR previewing issues

Optimizing your 3D assets and the mesh structure will help you to avoid issues when uploading and publishing issues. This will also improve the performance and reduce the data size of your WebAR product.

Model positioning

Model positioning is important requirement of any 3D and augmented reality experience.

When a user views a product in AR it needs to be positioned correctly in front of the them.

A product model not set up correctly may result in:

• the placement of model so it doesn’t appear in front of user.
• a model that looks like it is half underground or hovering above ground.
• a model that is way too large or too small to see and view.
• parts of the model that are no longer joined when viewed.
• a model that looks yellow or all white as it is missing textures.

To avoid these common issues, please review and adjust each model as needed before uploading into the platform.

Model Position

• Center the model at World Space
• Make sure that the model is stationed on the horizontal plane, so that it doesn’t appear to float in the air or be underground.

Model Orientation

• 0, 0, 0, 0
• Center the pivot point on the horizontal plane at the base of the model.
• Once positioned correctly select ALL mesh components in the scene then apply the ‘Scale and Rotation’ to save the desired positioning.

Scale

• Check that your model has the correct measurement units (preferred centimeters)
• This will ensure that the AR visualization is viewed at the correct scale.

Missing textures (the model looks white or yellow)

Uploaded models with no textures or material details are given a default material when uploaded.

If this occurs, fix it by opening the model in your preferred 3D program and checking that when you export your file, ALL materials have been included and/or preferably baked into the mesh of the product model.