How to Implement AR Preview for NFT Art in a Mobile App (iOS/Android)

An NFT collector bought a 3D animated art piece, but viewing it in a 2D browser is dull. We solve this by embedding an AR preview NFT function in a mobile app that lets users "hang" the NFT on their wall or place the 3D sculpture on a table. The user sees the art in real space — adding value to the NFT as a physical collectible. Our team has 7+ years of mobile development experience and has delivered over 50 projects in web3 and NFT.

Why AR Preview Increases NFT Value

The AR preview NFT feature turns a digital asset into an interactive exhibit. Owners can show off the art to friends, take photos for social media, and gain a new interactive experience. This boosts NFT liquidity and attracts buyers looking for a unique display method.

Types of NFT Content and AR Render

2D NFT

Simplest case: create a virtual frame (SCNPlane with material), load texture from IPFS or HTTP URI from token metadata. Place on a vertical surface via ARPlaneDetection.vertical. Animated GIF — decode frame-by-frame via CGImageSourceCreateWithData, update texture on a timer.

3D NFT

More projects are releasing 3D sculptures. On iOS, load via GLTFSceneKit or convert to USDZ on the fly using ModelIO (MDLAsset → export USDZ). On Android, SceneView (Filament-based) from Sceneform 2.0 natively supports glTF.

Video NFT

SCNMaterialProperty accepts AVPlayerItem as texture content — the NFT video plays directly on the AR surface in real time. Loop, sound optional.

How to Load Content from NFT Metadata

The ERC-721/ERC-1155 metadata standard includes image and optionally animation_url. For an AR preview NFT, the steps are:

1. Query tokenURI via JSON-RPC (eth_call) using tokenId and contractAddress, or via Alchemy/Moralis/OpenSea API.
2. Fetch the JSON metadata containing image, animation_url, properties.
3. If the URI starts with ipfs://, convert via a public gateway (e.g., gateway.pinata.cloud) or your own IPFS node.
4. Download the media file, cache locally.

IPFS loading can be slow on public gateways. We recommend aggressive caching: on first view, write to URLCache with a large diskCapacity (500 MB+), which reduces load times by up to 3x compared to relying solely on public gateways.

Placement for Art Objects

Wall hanging (2D art)

Scan vertical surfaces via ARPlaneDetection.vertical. Issue: ARKit detects vertical planes slower than horizontal, especially on smooth walls. We add a manual placement mode: drag to position, pinch for scale, rotation gesture for angle.

3D sculpture on a surface

ARPlaneDetection.horizontal + raycast from screen center → place object on detected plane. Use ARRaycastQuery instead of outdated hitTest. Snap to plane when moving: track ARPlaneAnchor updates, lock object's Y coordinate to plane.

Photo for social media. A key feature for NFT audience. Capture ARView via ARView.snapshot(saveToPhotoLibrary:) (RealityKit) or SCNView.snapshot() (SceneKit). Add UI overlay with NFT name and collection before saving — via UIGraphicsImageRenderer.

Rights and Watermark

Some NFT projects restrict commercial use. In an AR context, it's important not to infringe IP rights when creating derivative content: screenshots with the app logo are not considered derivative works, but it's best to consult a lawyer for specific projects. We include compliance checks with App Store Review Guidelines (Section 4.2/5.1) in our scope.

What's Included in the Work

Platform Comparison: iOS vs Android

Timeline: AR preview for 2D/3D NFT in an existing Web3 app — 3–5 weeks. Full AR gallery experience with custom frames, 3D sculptures, and sharing — 6–10 weeks. Cost is calculated individually, but a basic 2D NFT AR preview starts at $5,000. Thanks to ready components the integration costs 30–40% less than greenfield development. We offer a satisfaction guarantee on our AR integration services. Get a consultation for your project — contact us for an estimate. Leave a request, and we will prepare a proposal for you.

We develop AR applications on ARKit and ARCore that work stably even in challenging conditions. Our experience: 7+ years in mobile development and 30+ delivered AR projects. Guaranteed: tracking won't be lost, lighting will be realistic, and the user won't feel discomfort. Certified Apple and Google developers.

Why does tracking get lost and how to fix it?

ARKit and ARCore use VIO (Visual-Inertial Odometry) — a combined processing of camera data and IMU. Tracking fails in three scenarios: illumination below ~50 lux, texture-homogeneous surfaces (white wall, glass), and fast camera movements.

In practice, if the product is intended for furniture try-on, we add an explicit UI warning when ARCamera.TrackingState.limited(.insufficientFeatures). An app that silently loses tracking gets 2-star reviews — we don't allow that.

Plane detection is configured via ARWorldTrackingConfiguration.planeDetection = [.horizontal, .vertical]. Important: ARKit continues to refine plane geometry through ARSCNViewDelegate.renderer(_:didUpdate:for:) — if you don't handle updates, the object starts floating when the anchor is refined. Our team solves this at the architecture stage, not during testing.

AR Foundation: cross-platform with nuances

Unity AR Foundation is an abstraction layer over ARKit and ARCore. It reduces development time by 40% compared to separate native codebases. But some features (e.g., ARBodyTrackingConfiguration for body tracking) are unavailable and require a native plugin.

For React Native and Flutter, direct AR Foundation is missing. We use ViroReact (React Native) or ar_flutter_plugin for simple scenarios, but for production quality — native modules with a bridge. Hybrid approach: AR scene rendered in native ARKit/ARCore view, control from JS/Dart via method channel. Included in our standard delivery.

Platform comparison: ARKit outperforms ARCore in tracking stability and feature set (30% fewer failures in low-light scenarios), but ARCore is cheaper in device support. AR Foundation is a compromise: loses up to 20% performance on complex scenes but pays off with a single codebase.

Try-on: product fitting via AR

Fitting glasses, jewelry, cosmetics — a separate class of tasks. Here, face tracking is needed, not plane detection.

ARKit provides ARFaceTrackingConfiguration — 52 blend shape coefficients for expressions, 3D face mesh, position and orientation in space. Works only on devices with TrueDepth camera (iPhone with Face ID).

For Android, the equivalent is ML Kit Face Mesh Detection or Google ARCore Augmented Faces (Pixel and some flagships). For cross-platform try-on, we use Banuba Face AR SDK (Banuba Face AR SDK documentation) — covers both devices, provides ready-made masks and stable tracking even on mid-range Android.

Try-on quality critically depends on 3D product models. Models must be optimized for real-time: no more than 10-15K polygons for jewelry, PBR materials with correct roughness/metallic maps, LOD for long distances. Within our engagement, we provide ready-made optimization guides.

How to achieve realistic lighting in AR?

ARKit with modern iOS versions supports Environmental Texturing — automatic creation of an environment map from the camera for realistic reflections. Enabled via ARWorldTrackingConfiguration.environmentTexturing = .automatic. Without it, metallic and glass materials look plastic.

ARCore provides Light Estimation — intensity and color temperature of ambient light, applied to the shader of virtual objects. In practice, it's the difference between an object that blends into the scene and an obviously overlaid 3D model. We guarantee that the final image doesn't betray virtuality.

What's included

• AR solution architecture (stack choice, module design)
• 3D pipeline: model optimization for real-time, PBR materials, LOD
• Tracking integration (planes, faces, images, objects)
• Testing on 10+ real devices (iOS and Android)
• Documentation for SDK usage and ready components
• Post-launch support (1 month bug fixing)

Timeline and estimation

Simple AR scene with placing one 3D model on a plane — 1-2 weeks. Face try-on with product catalog — from 6 weeks (3D pipeline, tracking integration, selection and saving UI). Full AR shopping with cloud anchors and multiplayer — from 3 months. We'll estimate your project in 1 day — contact us to discuss your AR idea.