@srsergio/taptapp-ar 1.0.64 → 1.0.69

package/README.md

@@ -1,11 +1,5 @@
 # @srsergio/taptapp-ar
 
-<p align="center">
-  <a href="./docs/technical-paper.pdf">📄 <b>Technical Paper (PDF)</b></a> &nbsp;|&nbsp;
-  <a href="./docs/index.html">🌐 <b>Official Website</b></a> &nbsp;|&nbsp;
-  <a href="./analysis/INDEX.md">📊 <b>Analysis Report</b></a>
-</p>
-
 🚀 **TapTapp AR** is a high-performance Augmented Reality (AR) toolkit for **Node.js** and **Browser** environments. It provides an ultra-fast offline compiler and a lightweight runtime for image tracking.
 
 **100% Pure JavaScript**: This package is now completely independent of **TensorFlow.js** for both compilation and real-time tracking, resulting in massive performance gains and zero-latency initialization.
@@ -83,104 +77,43 @@ const binaryBuffer = compiler.exportData();
 
 ## 🎥 Runtime Usage (AR Tracking)
 
-### 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 { SimpleAR } from '@srsergio/taptapp-ar';
+### 1. Simple A-Frame Integration
+The easiest way to use TapTapp AR in a web app:
 
-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 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>
-
-<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>
+<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>
 ```
 
-#### ⚙️ 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 cada frame con `{ targetIndex, worldMatrix }` |
-| `cameraConfig` | ❌ | Config de cámara (por defecto: `{ facingMode: 'environment', width: 1280, height: 720 }`) |
-
----
+### 2. High-Performance Three.js Wrapper
+For custom Three.js applications:
 
-### 2. React Integration (Vite & SSR Safe) ⚛️
-
-The fastest and most modern way to build AR apps with React. It supports **Code Splitting** and is **100% SSR-Safe** (Next.js, Astro, Remix).
-
-#### 🚀 Quick Start: `<TaptappAR />`
-Drop the component into your app. It handles camera permissions, scanning animations, and video/image overlays automatically.
+```javascript
+import { TaarThree } from '@srsergio/taptapp-ar';
 
-```tsx
-import { TaptappAR, mapDataToPropsConfig } from '@srsergio/taptapp-ar';
+const taarThree = new TaarThree({
+  container: document.querySelector("#container"),
+  imageTargetSrc: './targets.taar',
+});
 
-const MyARComponent = ({ data }) => {
-  // Use mapDataToPropsConfig to convert your raw data into ARConfig
-  const config = mapDataToPropsConfig(data);
+const {renderer, scene, camera} = taarThree;
 
-  return (
-    <div style={{ width: '100vw', height: '100vh' }}>
-      <TaptappAR config={config} />
-    </div>
-  );
-};
-```
+const anchor = taarThree.addAnchor(0);
+// Add your 3D models to anchor.group
 
-#### 🛠️ Custom UI: `useAR()` Hook
-If you want to build your own UI while keeping the powerful tracking logic:
-
-```tsx
-import { useAR } from '@srsergio/taptapp-ar';
-
-const CustomAR = ({ config }) => {
-  const { containerRef, overlayRef, status, toggleVideo } = useAR(config);
-
-  return (
-    <div ref={containerRef} style={{ position: 'relative' }} onClick={toggleVideo}>
-      {/* Custom Scanning UI */}
-      {status === 'scanning' && <div className="my-loader">Scanning...</div>}
-      
-      {/* Video Overlay */}
-      <video ref={overlayRef} src={config.videoSrc} loop muted playsInline />
-    </div>
-  );
-};
+await taarThree.start();
+renderer.setAnimationLoop(() => {
+  renderer.render(scene, camera);
+});
 ```
 
----
-
 ### 3. 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.
 
@@ -246,8 +179,56 @@ if (targetIndex !== -1) {
 }
 ```
 
-### 📚 Legacy Usage
-For **A-Frame** or **Three.js** wrappers, please refer to the [Advanced Usage Documentation](./docs/advanced-usage.md).
+### 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 }`) |
 
 ---
 
@@ -261,15 +242,8 @@ TapTapp AR uses a proprietary **Moonshot Vision Codec** that is significantly mo
 
 ---
 
-## 📄 License & Recognition
-
-**Taptapp AR** is created and maintained by **Sergio Lazaro**.
-
-This project is licensed under the **GPL-3.0 License**.
-This ensures that the project remains open and free, and that authorship is properly recognized. No "closed-source" usage is allowed without a commercial agreement.
-
-Commercial licenses are available for proprietary applications. Please contact the author for details.
+## 📄 License & Credits
 
-### Acknowledgements
-This project evolved from the incredible work of [MindAR](https://github.com/hiukim/mind-ar-js). While the codebase has been extensively rewritten and optimized for performance, we gratefully acknowledge the foundation laid by the original authors.
+MIT © [srsergiolazaro](https://github.com/srsergiolazaro)
 
+Based on the core research of MindAR, but completely re-written for high-performance binary processing and JS-only execution.

package/dist/index.d.ts

@@ -1,6 +1,4 @@
-export { ARConfig, ARDataItem, mapDataToPropsConfig } from "./react/types.js";
-export * from "./react/use-ar.js";
-export * from "./react/TaptappAR.js";
+export * from "./react/types.js";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./compiler/controller.js";
 export { SimpleAR } from "./compiler/simple-ar.js";

package/dist/index.js

@@ -1,6 +1,4 @@
-export { mapDataToPropsConfig } from "./react/types.js";
-export * from "./react/use-ar.js";
-export * from "./react/TaptappAR.js";
+export * from "./react/types.js";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./compiler/controller.js";
 export { SimpleAR } from "./compiler/simple-ar.js";

package/dist/react/types.d.ts

@@ -3,23 +3,20 @@ export interface ARConfig {
     targetImageSrc: string;
     targetTaarSrc: string;
     videoSrc: string;
-    overlaySrc: string;
     videoWidth: number;
     videoHeight: number;
     scale: number;
-    overlayType: "video" | "image";
 }
 export interface ARDataItem {
     id: string;
-    type: "photos" | "videoNative" | "ar" | "imageOverlay";
+    type: "photos" | "videoNative" | "ar";
     images?: {
         image: string;
         fileId: string;
     }[];
     url?: string;
-    fileId?: string;
     scale?: number;
     width?: number;
     height?: number;
 }
-export declare function mapDataToPropsConfig(data: ARDataItem[]): ARConfig;
+export declare function mapDataToPropsConfig(data: any[]): ARConfig;

package/dist/react/types.js

@@ -1,16 +1,14 @@
 export function mapDataToPropsConfig(data) {
     const photos = data.find((item) => item.type === "photos");
-    const overlay = data.find((item) => item.type === "videoNative" || item.type === "imageOverlay");
+    const video = data.find((item) => item.type === "videoNative");
     const ar = data.find((item) => item.type === "ar");
     return {
         cardId: photos?.id || "",
         targetImageSrc: photos?.images?.[0]?.image || "",
         targetTaarSrc: ar?.url || "",
-        videoSrc: overlay?.url || "",
-        overlaySrc: overlay?.url || "",
-        videoWidth: overlay?.width || 0,
-        videoHeight: overlay?.height || 0,
-        scale: overlay?.scale || 1,
-        overlayType: overlay?.type === "videoNative" ? "video" : "image",
+        videoSrc: video?.url || "",
+        videoWidth: video?.width || 0,
+        videoHeight: video?.height || 0,
+        scale: video?.scale || 1,
     };
 }

package/package.json

@@ -1,24 +1,7 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.64",
-    "author": "Sergio Lazaro <srsergiolazaro@gmail.com>",
-    "license": "GPL-3.0",
-    "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",
-        "augmented-reality",
-        "image-tracking",
-        "ar-compiler",
-        "computer-vision",
-        "three-js",
-        "react-ar",
-        "a-frame",
-        "mind-ar",
-        "offline-ar",
-        "webgl",
-        "markerless-tracking",
-        "taptapp"
-    ],
+    "version": "1.0.69",
+    "description": "AR Compiler for Node.js and Browser",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/srsergiolazaro/taptapp-ar.git"
@@ -74,11 +57,13 @@
         "tinyqueue": "^2.0.3"
     },
     "devDependencies": {
-        "@types/node": "^25.0.3",
+        "@types/node": "^20.14.2",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/three": "^0.170.0",
         "jimp": "^1.6.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "typescript": "^5.4.5",
         "vitest": "^4.0.16"
     },

package/src/index.ts

@@ -1,7 +1,4 @@
-export { ARConfig, ARDataItem, mapDataToPropsConfig } from "./react/types.js";
-export * from "./react/use-ar.js";
-export * from "./react/TaptappAR.js";
+export * from "./react/types.js";
 export * from "./compiler/offline-compiler.js";
 export { Controller } from "./compiler/controller.js";
 export { SimpleAR } from "./compiler/simple-ar.js";
-

package/src/react/types.ts

@@ -3,38 +3,33 @@ export interface ARConfig {
   targetImageSrc: string;
   targetTaarSrc: string;
   videoSrc: string;
-  overlaySrc: string; // Alias for preloading/compatibility
   videoWidth: number;
   videoHeight: number;
   scale: number;
-  overlayType: "video" | "image";
 }
 
 export interface ARDataItem {
   id: string;
-  type: "photos" | "videoNative" | "ar" | "imageOverlay";
+  type: "photos" | "videoNative" | "ar";
   images?: { image: string; fileId: string }[];
   url?: string;
-  fileId?: string;
   scale?: number;
   width?: number;
   height?: number;
 }
 
-export function mapDataToPropsConfig(data: ARDataItem[]): ARConfig {
+export function mapDataToPropsConfig(data: any[]): ARConfig {
   const photos = data.find((item) => item.type === "photos");
-  const overlay = data.find((item) => item.type === "videoNative" || item.type === "imageOverlay");
+  const video = data.find((item) => item.type === "videoNative");
   const ar = data.find((item) => item.type === "ar");
 
   return {
     cardId: photos?.id || "",
     targetImageSrc: photos?.images?.[0]?.image || "",
     targetTaarSrc: ar?.url || "",
-    videoSrc: overlay?.url || "",
-    overlaySrc: overlay?.url || "",
-    videoWidth: overlay?.width || 0,
-    videoHeight: overlay?.height || 0,
-    scale: overlay?.scale || 1,
-    overlayType: overlay?.type === "videoNative" ? "video" : "image",
+    videoSrc: video?.url || "",
+    videoWidth: video?.width || 0,
+    videoHeight: video?.height || 0,
+    scale: video?.scale || 1,
   };
 }