3D product views for Aldaham
Shoppers turn the piece in their hand on the product page, zoom into the dial and the stones, and on a phone place it on their table at real size. The same thing Cartier does, built on the 3D support Salla already has.
The two pieces on this page are working real-time models of Frank Rosha products, lit and finished to match Aldaham's own product photos. Drag to turn them.
A custom 3D app inside the gallery
Cartier's product gallery has one slide that loads an iframe from its own subdomain. Behind it is a bespoke application the brand has run since 2021.
iframe from webgl.cartier.com
Square slide in the product gallery, with a "tap to try" virtual try-on button and a QR code for phones.
PlayCanvas 2.22.6
A WebGL engine; the app is a "CartierConfigurator" project built in the PlayCanvas editor.
One compressed file per part
Case, frame, glass, caseback, bracelet and engraving load separately, with diffuse, normal and gloss/metal/AO maps and tiled brushed-steel textures.
60 MB product configuration
One config file maps every reference to its parts and materials, plus prefiltered studio light maps.
This is a six-figure, agency-maintained application. Aldaham gets most of the visual result for a small fraction of the cost by using a standard viewer and the 3D field Salla already provides.
Salla's own 3D field, plus one small script
One GLB per product
Real dimensions and finishes, under 6 MB. Made from the supplier's CAD files where they exist.
"3D images" app
Salla's free official app (دعم الصور ثلاثية الأبعاد) attaches the GLB to the product's main image. Also available through the Merchant API.
Cloudflare R2
Models and studio light files on a custom domain with CORS and long caching. Effectively free at Aldaham's size.
Aldaham 3D script
Adds the 3D slide to the gallery with the matched studio lighting, view buttons, AR on phones, a QR code on desktop and live time on watches.
- No per-product code. Any product with a model attached through Salla's app gets the right look for its category automatically.
- Safe to test on the live store. In test mode the viewer only appears for staff who open a product with
?3d=1. - Measured. It sends 3D opens, interactions and AR launches to Google Tag Manager, so conversion can be compared.
- Installed once. Through the theme's custom JavaScript (Pro or Special plan), or as a private Salla app snippet that survives a theme change.
Lit and finished to match Aldaham's photography
Each model was rendered in the shop's own viewer at the same angle as Aldaham's product photo and measured region by region: brightness, contrast, fine detail and colour of every finish. The studio lighting ships with the model, so what shoppers see is what was checked.
Photo3D
Photo3D
| What was matched | How |
|---|
| Assumed, to confirm with Aldaham | Why |
|---|
The real cost is the models
Frank Rosha is Aldaham's own brand, so the factory almost certainly holds the CAD files: jewellery is designed in CAD for casting, and the watch's shop images look like computer renders. Converting those files is the cheapest and most accurate route.
| Method | Ring | Watch | Turnaround | Fit for this |
|---|---|---|---|---|
| Convert supplier CAD or render files | $80–400 | $250–900 | 1–3 days | Best |
| 3D artist from photos and a physical sample | $150–600 | $300–1,500 | 3–10 days | Good |
| Specialist studio (Hexa, Modelry, 7CGI) | $100–1,000+ | 2–10 days | Good, quote-based | |
| 3D scanning | $100–500 | 1–3 days | Fails on polished metal and stones | |
| AI image-to-3D (Meshy, Tripo, Rodin) | under $2 + cleanup | minutes | Blurred text, wrong details | |
Hosting stays near zero: 300 products at about 4 MB is 1.2 GB, inside Cloudflare R2's free 10 GB, and R2 does not charge for traffic.
Pilot first, then scale
Sample
- Watch and ring built and matched to the shop photos.
- Script working on a copy of Aldaham's product page.
- Install guide for Aldaham's developer.
Pilot on aldaham.com
- Confirm with Selia Tech (theme developer) how the theme handles 3D images, or test on a hidden product.
- Put models and lighting on Cloudflare R2.
- Install the script in test mode, then switch it on for 5–10 best-sellers.
- Track 3D opens, AR launches and add-to-cart against products without 3D.
Scale
- Ask Frank Rosha's suppliers for CAD files of the range.
- Set a repeatable conversion with the same photo check.
- Upload in bulk through Salla's API.
- Consider wrist and finger try-on (Perfect Corp, Banuba) once models exist.
What we need from Aldaham
- Theme behaviour. Aldaham's theme is a Selia Tech version of Salla's reference theme. Whether it still draws 3D slides is confirmed with one test product; the script works either way.
- Salla plan and access. Custom JavaScript needs the Pro or Special plan and Store Design permission. A private app snippet is the alternative.
- Source files. CAD or render scenes from the Frank Rosha suppliers cut cost and make the models exact. Without them, cost and turnaround rise two to four times.
- AR on iPhone is simpler. Apple's AR view drops glass refraction, brushed-steel direction and diamond fire. The page viewer keeps them.
- Gallery slot. A 3D model uses one of a product's 10 image slots in Salla.
| salla/aldaham-3d.js | The script for the store |
| salla/README.md | Install guide: hosting, Salla setup, adding products, analytics |
| pages/watch.html, ring.html | Copies of Aldaham's product pages running the script |
| models/*.glb | The two models and their poster images |
| env/*.hdr | Studio lighting for watches and jewellery |
| blender/ | Scripts that rebuild each model |
| tools/ | Photo-matching tools: render, compare, region check |
| docs/research.md | Research notes with sources |