Convert images to AR.js pattern files (.patt) for marker-based augmented reality tracking. Use when adding new AR markers for 3D models, creating custom tracking targets, or optimizing marker detection. Supports NFT (natural feature tracking) and barcode markers.
Converts images into AR.js .patt (pattern) files for marker-based tracking in A-Frame AR scenes.
Custom images converted to .patt files for tracking.
Best For:
Advantages:
Uses image features (edges, corners) for tracking without borders.
Best For:
Advantages:
Pre-defined barcodes (0-63) for quick identification.
Best For:
Use AR.js Marker Training: https://ar-js-org.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
Steps:
.patt filePattern Ratio:
0.5 = 50% of marker area used for tracking (default)0.75 = More content area, less border (harder to detect)0.9 = Maximum content area (best for text/logos)# Install ar-marker-generator (npm package)
npm install -g ar-marker-generator
# Generate pattern file
ar-marker-generator input.png output.patt --ratioInner 0.5
For natural feature tracking:
# Install NFT-Marker-Creator
git clone https://github.com/Carnaux/NFT-Marker-Creator.git
cd NFT-Marker-Creator
# Generate NFT descriptors (iset, fset, fset3)
node app.js -i input.jpg
Must Have:
Avoid:
Upload .patt file to storage:
# Local development
/storage/app/public/patterns/artifact_ganesha.patt
# Database reference (VirtualMuseumObject)
path_patt: 'patterns/artifact_ganesha.patt'
// database/seeders or admin controller
VirtualMuseumObject::create([
'museum_id' => $museumId,
'situs_id' => $situsId,
'nama' => 'Arca Ganesha',
'path_obj' => 'models/ganesha.glb',
'path_patt' => 'patterns/ganesha.patt', // ← Pattern file
'deskripsi' => 'Patung dewa Hindu berkepala gajah',
]);
File: ar-camera.blade.php
<a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false;">
<!-- Custom pattern marker -->
<a-marker
type="pattern"
preset="custom"
url="{{ asset('storage/' . $object->path_patt) }}"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<!-- 3D model appears when marker detected -->
<a-gltf-model
src="{{ asset('storage/' . $object->path_obj) }}"
scale="0.5 0.5 0.5"
position="0 0 0"
rotation="0 0 0"
gesture-handler
>
</a-gltf-model>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
Generate printable marker:
Test detection:
php artisan serve
# Visit /ar-camera route with test marker
Optimize if needed:
Use marker image on tablet/second screen:
Check pattern file format (630 lines expected):
# Count lines in pattern file
wc -l patterns/ganesha.patt
# Should output: 630 patterns/ganesha.patt
# Validate structure
head -n 5 patterns/ganesha.patt
# Should show space-separated integers (0-255)
Pattern File Structure:
Adjust AR.js parameters for better tracking:
<a-scene
arjs="
detectionMode: mono_and_matrix;
matrixCodeType: 3x3;
patternRatio: 0.5;
minConfidence: 0.6;
trackingMethod: best;
"
></a-scene>
Parameters:
minConfidence: 0.6 (default) → 0.8 (stricter, fewer false positives)patternRatio: Match generation ratiotrackingMethod: best (slower, accurate) or fast (quick, less precise)Best detection:
Pattern: Each object has unique marker
<a-scene embedded arjs>
<!-- Marker 1: Ganesha -->
<a-marker type="pattern" url="{{ asset('storage/patterns/ganesha.patt') }}">
<a-gltf-model
src="{{ asset('storage/models/ganesha.glb') }}"
></a-gltf-model>
</a-marker>
<!-- Marker 2: Relief Panel -->
<a-marker type="pattern" url="{{ asset('storage/patterns/relief.patt') }}">
<a-gltf-model
src="{{ asset('storage/models/relief.glb') }}"
></a-gltf-model>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
Note: AR.js can track 2-3 markers simultaneously on mid-range devices
Solutions:
.patt file is 630 linesSolutions:
trackingMethod: best in AR.js settingsminConfidence thresholdSolutions:
rotation="0 90 0"Solutions:
minConfidence to 0.8+Store marker metadata in virtual_museum_object:
Schema::table('virtual_museum_object', function (Blueprint $table) {
$table->string('path_patt')->nullable()->comment('AR.js pattern file for marker tracking');
$table->float('pattern_ratio')->default(0.5)->comment('Marker pattern ratio used in generation');
$table->integer('marker_size_cm')->nullable()->comment('Recommended print size in cm');
});
Version Control: Commit pattern files with descriptive names
patterns/
├── borobudur_stupa.patt
├── prambanan_reliefs.patt
└── national_museum_logo.patt
Naming Convention: {site_name}_{object_name}.patt
Documentation: Comment pattern ratio and optimal size
// Pattern ratio: 0.75, print size: 15×15cm
'path_patt' => 'patterns/ganesha.patt'
Testing: Always test on target devices before deployment
Backup Source Images: Keep original high-res images for regeneration