AR.js Core ECS + ArtoolkitPlugin example

[kalwalt]

This PR adds a working AR.js Core example that integrates the ArtoolkitPlugin, streams ImageBitmap frames to a worker, shows the live webcam feed, and provides Start/Stop/Load controls — plus docs and lint-safe browser API usage.

Highlights

• 🚀 New example: examples/vite-artoolkit (AR.js Core ECS + ArtoolkitPlugin)
• 🎛️ UI controls: Start Webcam, Stop, and Load Marker (HIRO)
• 🎥 Visible video viewport showing the live webcam feed
• 🔁 Frame pump streams ImageBitmaps via engine:update for reliable detection
• 🧠 Marker events: ar:markerFound / ar:markerUpdated / ar:markerLost
• 🧹 Lint-safe browser globals via globalThis guards (createImageBitmap, OffscreenCanvas, etc.)
• 📄 Docs: example README and main README “Frame Pump + Video Viewport” guidance

What changed

• 🧩 Example app

  • Loads ArtoolkitPlugin ESM (with worker/assets) from vendor (or CDN)
  • Uses absolute URLs for camera parameters and pattern files
  • Registers worker and marker event listeners before enabling the plugin
  • Adds Start/Stop/Load buttons:
    • Start initializes capture, attaches
    • Stop halts the pump and disposes capture
    • Load triggers plugin.loadMarker for the HIRO pattern
  • Video is displayed on screen by moving the webcam plugin’s

• 🔧 Systems

  • FramePumpSystem emits engine:update frames using:
    • requestVideoFrameCallback when available; requestAnimationFrame otherwise
    • createImageBitmap(video) fast path; canvas fallback
  • ESLint-safe globals (globalThis.OffscreenCanvas, globalThis.createImageBitmap, cancel via video.cancelVideoFrameCallback)

• 📝 Docs

  • Example README: how to run, what the buttons do, and troubleshooting
  • Main README: “Frame Pump + Video Viewport” section explaining how to both stream frames and show the webcam feed

How to run

1. Serve from repository root (so /examples and vendor/dist assets resolve):
   • python3 -m http.server 8080
   • or npx http-server -p 8080
2. Open http://localhost:8080/examples/vite-artoolkit/index.html
3. Click Start Webcam, then Load Marker, and show the HIRO marker
   • Expect ar:getMarker logs and markerFound/Updated/Lost events

Notes

• Ensure vendor/arjs-plugin-artoolkit includes the ESM and its assets/ (worker-.js, ARToolkit-.js) next to it; or import the plugin from CDN.
• The frame pump is required for detections — it emits ImageBitmaps every frame to the worker.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.