Share

Realtime image printing personalization

Today we are happy to announce a new Apviz feature: Realtime image personalization for web-to-print.

If you're selling handbags, mugs, clothes, jewelry, watches or even furniture, this feature will help you best showcase all your personalization options, as it is a high quality & realistic simulation rendering of printing, flocking, silkscreen on your 3D products.

Get in touch with your Apviz account manager or use the contact form if you are interrested with this feature.

Setup

First you need to define your marking zone in your 3D model by creating a new dedicated mesh in your favourite 3D software.

The marking zone mesh must cover the targeted mesh object you want to apply marking on with a slight gap (to avoid mesh overlapping). Make also sure to craft proper UV mapping.

Marking zone creation in Blender

Then you export your 3D model as OBJ file and import it to your showcase via 3D editor (or the GraphQL API):

Marking zone OBJ import

As usual, define material and field/value configuration rules:

Image marking zone material definition

The final step is to assign a marking zone key to your brick:

Image markig zone brick setup

You are now ready to craft a new release and integrate realtime image web-to-print personalization to your website.

Integration

You can dynamically display an image on a predefined marking zone using Viewer.update with the markingZones parameter.

The image you want to set must be nested within the markingZones parameter object using the marking zone key you want to target. If you need to update multiple zones at the same time, you can set multiple marking zone keys.

The provided image.color.source value:

  • Supports PNG, JPEG, GIF, SVG, BMP, and ICO image formats.
  • May be any of those JavaScript types:
<!DOCTYPE html>
<html>
  <head>
    <title>Apviz - Demo T-Shirt</title>
  </head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    #my-image-input { position: absolute; top: 10px; left: 10px; }
  </style>
  <body>
    <!-- Apviz 3D viewer. -->
    <div id="apviz-3d-viewer"></div>

    <!-- Your image input button. -->
    <input id="my-image-input" type="file" accept=".png,.jpg,.jpeg,.bmp,.gif,.ico,.svg">

    <!-- Your custom initialization script. -->
    <script>
      async function apvizShowcaseReady(showcase) {

        // Initialize a 3D viewer and bind it to the <div>.
        const viewer = await showcase.createViewer({
          divId : "apviz-3d-viewer"
        });

        // Initial configuration that MUST explicitly include ALL the fields.
        // This will start displaying 3D.
        await viewer.update({
          fields : {
            "Shirt" : "Fabric Blue",
            "Chest" : "Fabric White"
          }
        });

        // File input event handler.
        document.querySelector("#my-image-input").addEventListener("change", e => {
          viewer.update({
            markingZones : {
              // Targets a specific marking zone via it's key.
              "ChestZone" : {
                image : {
                  color : { source: e.target.files[0] }
                }
              }
            }
          })
        });

      }
    </script>

    <!-- Non-blocking async script that will call "apvizShowcaseReady" once fully loaded. -->
    <script
      src="https://public.apviz.io/showcases/U0hPVzo5cHBEUDBtaEFM/releases/UkVMUzpTVWpTY0RhdXNm/main.js"
      integrity="sha384-/2CFXQjxUdSwUw8dys+n0Yq+kY3ts3TwGZOiJc7R6L6PBq8PIUGGRBE38i1P2g5Q"
      defer
      crossorigin="anonymous"
      data-apviz-callback="apvizShowcaseReady"
    ></script>
  </body>
</html>

The provided image is displayed with the following rules:

  • Image is stretched within the underlying marking zone according to the provided brick UV mapping.
  • RGB(A) are blended in multiply mode with the underlying marking zone material.
Basic marking image samples

More real world samples to better undertand how the marking surface mixes with the image:

Real world marking image samples

ℹ️ To remove the marking image, you can update the viewer with the marking zone key set to null.

🔐 Note that Apviz does not store the provided images on any server by itself.

Prototyping

If you need to get all configurable marking zones at runtime you can call the static getMarkingZones method:

async function apvizShowcaseReady(showcase) {
  // Returns an object with the following structure:
  // {
  //   markingZones : [
  //    { key: "ChestZone" },
  //    { key: "BackZone" }
  //   ]
  // }
  const { markingZones } = await showcase.getMarkingZones();
}

ℹ️ This method is intended to ease debugging or fast prototyping. Keep in mind that Apviz is not designed to handle human readable UI menu items.

What's next?

We are actually working on some features that will arrive quite soon:

  • Marking text for engraving, embossing, debossing, etc.
  • Rendering performances optimizations
  • Smart camera improvements

Stay tuned to the changelog ;)