@srsergio/taptapp-ar 1.0.51 → 1.0.53

package/README.md

@@ -83,44 +83,60 @@ const binaryBuffer = compiler.exportData();
 
 ## 🎥 Runtime Usage (AR Tracking)
 
-### 1. Simple A-Frame Integration
-The easiest way to use TapTapp AR in a web app:
-
-```html
-<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
-<script src="path/to/@srsergio/taptapp-ar/dist/index.js"></script>
-
-<a-scene taar-image="imageTargetSrc: ./targets.taar;">
-  <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
-  <a-entity taar-image-target="targetIndex: 0">
-    <a-plane position="0 0 0" height="0.552" width="1"></a-plane>
-  </a-entity>
-</a-scene>
-```
-
-### 2. High-Performance Three.js Wrapper
-For custom Three.js applications:
+### 1. SimpleAR (Recommended) 🍦
+The **simplest way** to use AR—no Three.js or A-Frame required. Just overlay an HTML element on the tracked target.
 
 ```javascript
-import { TaarThree } from '@srsergio/taptapp-ar';
+import { SimpleAR } from '@srsergio/taptapp-ar';
 
-const taarThree = new TaarThree({
-  container: document.querySelector("#container"),
-  imageTargetSrc: './targets.taar',
+const ar = new SimpleAR({
+  container: document.getElementById('ar-container'),
+  targetSrc: './my-target.taar',  // Single URL or array: ['./a.taar', './b.taar']
+  overlay: document.getElementById('my-overlay'),
+  onFound: ({ targetIndex }) => console.log(`Target ${targetIndex} detected! 🎯`),
+  onLost: ({ targetIndex }) => console.log(`Target ${targetIndex} lost 👋`)
 });
 
-const {renderer, scene, camera} = taarThree;
+await ar.start();
+
+// When done:
+ar.stop();
+```
 
-const anchor = taarThree.addAnchor(0);
-// Add your 3D models to anchor.group
+#### 📁 Minimal HTML Example
+```html
+<div id="ar-container" style="width: 100vw; height: 100vh;">
+  <img id="my-overlay" src="./overlay.png" 
+       style="opacity: 0; z-index: 1; width: 200px; transition: opacity 0.3s;" />
+</div>
 
-await taarThree.start();
-renderer.setAnimationLoop(() => {
-  renderer.render(scene, camera);
-});
+<script type="module">
+  import { SimpleAR } from '@srsergio/taptapp-ar';
+  
+  const ar = new SimpleAR({
+    container: document.getElementById('ar-container'),
+    targetSrc: './targets.taar',
+    overlay: document.getElementById('my-overlay'),
+  });
+  
+  ar.start();
+</script>
 ```
 
-### 3. Raw Controller (Advanced & Custom Engines)
+#### ⚙️ SimpleAR Options
+| Option | Required | Description |
+| :--- | :--- | :--- |
+| `container` | ✅ | DOM element where video + overlay render |
+| `targetSrc` | ✅ | URL to your `.taar` file |
+| `overlay` | ✅ | DOM element to position on the target |
+| `onFound` | ❌ | Callback when target is detected |
+| `onLost` | ❌ | Callback when target is lost |
+| `onUpdate` | ❌ | Called each frame with `{ targetIndex, worldMatrix }` |
+| `cameraConfig` | ❌ | Camera constraints (default: `{ facingMode: 'environment', width: 1280, height: 720 }`) |
+
+---
+
+### 2. Raw Controller (Advanced & Custom Engines)
 The `Controller` is the core engine of TapTapp AR. You can use it to build your own AR components or integrate tracking into custom 3D engines.
 
 #### ⚙️ Controller Configuration
@@ -185,56 +201,8 @@ if (targetIndex !== -1) {
 }
 ```
 
-### 4. Vanilla JS (No Framework) 🍦
-The **simplest way** to use AR—no Three.js, no A-Frame. Just overlay an image on the tracked target.
-
-```javascript
-import { SimpleAR } from '@srsergio/taptapp-ar';
-
-const ar = new SimpleAR({
-  container: document.getElementById('ar-container'),
-  targetSrc: './my-target.taar',  // Single URL or array: ['./a.taar', './b.taar']
-  overlay: document.getElementById('my-overlay'),
-  onFound: ({ targetIndex }) => console.log(`Target ${targetIndex} detected! 🎯`),
-  onLost: ({ targetIndex }) => console.log(`Target ${targetIndex} lost 👋`)
-});
-
-await ar.start();
-
-// When done:
-ar.stop();
-```
-
-#### 📁 Minimal HTML
-```html
-<div id="ar-container" style="width: 100vw; height: 100vh;">
-  <img id="my-overlay" src="./overlay.png" 
-       style="opacity: 0; z-index: 1; width: 200px; transition: opacity 0.3s;" />
-</div>
-
-<script type="module">
-  import { SimpleAR } from '@srsergio/taptapp-ar';
-  
-  const ar = new SimpleAR({
-    container: document.getElementById('ar-container'),
-    targetSrc: './targets.taar',
-    overlay: document.getElementById('my-overlay'),
-  });
-  
-  ar.start();
-</script>
-```
-
-#### ⚙️ SimpleAR Options
-| Option | Required | Description |
-| :--- | :--- | :--- |
-| `container` | ✅ | DOM element where video + overlay render |
-| `targetSrc` | ✅ | URL to your `.taar` file |
-| `overlay` | ✅ | DOM element to position on the target |
-| `onFound` | ❌ | Callback when target is detected |
-| `onLost` | ❌ | Callback when target is lost |
-| `onUpdate` | ❌ | Called each frame with `{ targetIndex, worldMatrix }` |
-| `cameraConfig` | ❌ | Camera constraints (default: `{ facingMode: 'environment', width: 1280, height: 720 }`) |
+### 📚 Legacy Usage
+For **A-Frame** or **Three.js** wrappers, please refer to the [Advanced Usage Documentation](./docs/advanced-usage.md).
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.51",
+    "version": "1.0.53",
     "description": "Ultra-fast, lightweight Augmented Reality Image Tracking SDK for the web. Features an optimized offline compiler, React components, and compatibility with Three.js/A-Frame. No heavy ML frameworks required.",
     "keywords": [
         "web-ar",