· case-study · 4 min read

A Product Floats Above the QR Marker — Building an AR + 3D Motion App

A mobile AR app where a 3D model snaps onto a QR-marked mock-up at exact real-world scale, and a tap plays the product's motion. The project that started with a tape measure and ended in shader debugging.

A Product Floats Above the QR Marker — Building an AR + 3D Motion App

In one sentence

We built a mobile AR + 3D motion app for an enterprise product showcase. A QR marker on a mock-up product triggers a real-scale 3D model overlay; a tap plays the product's working motion.

The most surprising thing we learned wasn't graphics or code — the most important tool on this project was a tape measure.

"Has to be exactly the same size" changed everything

When people hear AR, they usually picture "a cool 3D thing floats above the marker." We started there too. Then a single sentence from the client rewrote the project:

"The augmented product has to be exactly the same size as the real product."

Translation: this was for trade shows and on-site product demos. Sales reps would hold up a phone next to a mock-up, and the augmented model had to match the mock-up's physical size.

So a tape measure became the most important tool

3D model units are usually "1 = 1m." But if your real product dimensions are off — even by 1mm — AR users immediately register "hmm, looks slightly small." Human eyes are really good at catching size mismatches between a real object and a fake one next to it.

So we visited the client's factory and measured everything with three different tools — digital calipers, standard tape measure, laser distance meter. Only when all three agreed did the dimension go into the model scale.

Half of an AR app is measurement, not 3D. No good measurement, no good AR.

Scope

This project sprawled wider than usual:

  1. AR marker design — a pattern that fits naturally on the product but reads cleanly to the camera
  2. App planning, design, development — Unity + AR Foundation
  3. 3D modeling, texturing, motion authoring — modeled in Blender, motion clips finished in Unity
  4. Custom transparent material shader — and this is where most of the time went

Transparent materials, the bottomless debugging hole

Parts of the product were glass/transparent plastic. Making transparency look right in AR is, frankly, hard.

Three problems stack up:

  • Z-fighting — transparent faces clash with whatever's behind them
  • Sort order — overlapping transparent meshes get ambiguous depth ordering
  • AR-environment lighting — how does the transparent material respond to the real-world light the camera sees?

What worked:

  • Move transparent meshes to separate render queues (opaque → transparent → UI)
  • Within the transparent queue, manual sort by camera distance
  • Pull AR scene lighting via AR Foundation Light Estimation API and feed it as IBL into the transparent shader

Only after all three did "glass actually look like glass."

Motion is a teaching tool

The augmented product has buttons. Tap one and a motion plays. Not just "the thing rotates"a motion that explains how the product actually works.

Rules we settled on:

  • Only one motion plays at a time — concurrent playback confuses viewers
  • Motion length 5–8 seconds — shorter and people miss it, longer and they tune out
  • A synced text caption appears on the bottom of the screen"this part moves like this"

The engineering was simple. The hard part was the order in which to show motions. We ran a workshop with the client's sales team to nail down "how do you actually walk a first-time customer through this product?"

What we walked away with

Half of AR is measurement

No matter how good the code or the model, a 1mm dimension error makes AR look fake. Time spent on tape measures, calipers, and laser distance meters has the highest leverage.

Transparent materials = sort battle

If your AR project has transparent objects, bake 1–2 weeks of "transparency debugging" into the schedule up front. Surprises here always blow timelines.

AR motion is a sales tool

A "product demo video" and an "AR motion" are different content. AR is closer to automating what a sales rep says next to the product. Design your motion scenarios with the sales team, not just the design team.

Things people ask

Does it support both iOS and Android? Yes. AR Foundation abstracts ARKit (iOS) and ARCore (Android) under one API. Note that camera white-balance differs between devices, so color tuning takes extra time.

Markerless (plane detection) instead of QR? Possible. But for exact-position-on-a-real-product placement, markers are far more stable. For trade-show / retail environments, we recommend markers.

How detailed can the 3D model be? 30k–50k polygons is a safe ceiling on mobile GPUs. Beyond that, apply LOD or detail only the hero parts and simplify the rest.

How long to ship? With 3D models ready: 8–12 weeks. Including modeling: 12–16 weeks.


If you're looking at AR for trade shows, retail, or sales demos, get in touch with the product type and the deployment environment. The first call usually settles marker vs. plane detection and AR vs. plain 3D app for you.

Hammergrid Lab is a creative engineering studio building Unity / Unreal / AR Foundation mobile and AR apps alongside 3D content.

Related services

3D web, 3dweb, 3D configurator, 3D product configurator, 3D product viewer, WebGPU, Three.js

한국어 버전: QR 마커 기반 AR·3D 모션 앱 개발 사례

← Back to insights

Start a project