docs: add a screenshot banner to the README

.gitattributes

@@ -1,4 +1,4 @@
 * text=auto eol=lf
 *.png binary
 *.jpg binary
-*.dat binary
+*.dat binary

CHANGELOG.md

@@ -25,3 +25,7 @@ The project is in its prototype stage and has no releases yet.
   former name (`webar-studio/graph`) still load.
 - Unit, integration (Node build of jsartoolkit-nft), e2e (Playwright, fake
   camera) tests, benchmarks and CI.
+
+### Fixed
+
+- Demo graphs: nodes no longer overlap (Controller Settings grew with near / far).

README.md

@@ -4,6 +4,10 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 [![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](LICENSE)
 
+<p align="center">
+  <img src="docs/images/webarkit-studio.webp" width="800" alt="WebARKit Studio: the multi NFT demo graph in the node editor, with the live preview tracking two markers (pinball and kuva)">
+</p>
+
 A node-based authoring tool for WebAR experiences. Users wire nodes
 (camera → tracker → anchor → view) in a [Rete.js](https://retejs.org) editor; the
 result is a plain JSON graph that a lightweight **player** executes with

public/graphs/multi-three.json

@@ -24,7 +24,7 @@
    },
    "position": {
     "x": 0,
-    "y": 250
+    "y": 207
    }
   },
   {
@@ -36,7 +36,7 @@
    },
    "position": {
     "x": 0,
-    "y": 370
+    "y": 369
    }
   },
   {
@@ -48,7 +48,7 @@
    },
    "position": {
     "x": 0,
-    "y": 510
+    "y": 559
    }
   },
   {
@@ -61,7 +61,7 @@
    },
    "position": {
     "x": 0,
-    "y": 650
+    "y": 749
    }
   },
   {
@@ -74,7 +74,7 @@
    },
    "position": {
     "x": 0,
-    "y": 880
+    "y": 1087
    }
   },
   {
@@ -84,8 +84,8 @@
     "build": "simd"
    },
    "position": {
-    "x": 360,
-    "y": 60
+    "x": 320,
+    "y": 0
    }
   },
   {
@@ -95,8 +95,8 @@
     "antialias": true
    },
    "position": {
-    "x": 360,
-    "y": 620
+    "x": 320,
+    "y": 560
    }
   },
   {
@@ -106,8 +106,8 @@
     "defaultLights": false
    },
    "position": {
-    "x": 360,
-    "y": 760
+    "x": 320,
+    "y": 717
    }
   },
   {
@@ -119,8 +119,8 @@
     "intensity": 2.5
    },
    "position": {
-    "x": 360,
-    "y": 900
+    "x": 320,
+    "y": 906
    }
   },
   {
@@ -132,16 +132,16 @@
     "intensity": 0.6
    },
    "position": {
-    "x": 360,
-    "y": 1080
+    "x": 320,
+    "y": 1140
    }
   },
   {
    "id": "arcamera",
    "type": "scene.arCamera",
    "params": {},
    "position": {
-    "x": 720,
+    "x": 640,
     "y": 0
    }
   },
@@ -150,8 +150,8 @@
    "type": "debug.inspector",
    "params": {},
    "position": {
-    "x": 720,
-    "y": 120
+    "x": 640,
+    "y": 124
    }
   },
   {
@@ -161,7 +161,7 @@
     "overlay": true
    },
    "position": {
-    "x": 720,
+    "x": 640,
     "y": 300
    }
   },
@@ -172,8 +172,8 @@
     "stats": true
    },
    "position": {
-    "x": 1440,
-    "y": 60
+    "x": 960,
+    "y": 0
    }
   },
   {
@@ -183,8 +183,8 @@
     "marker": "pinball"
    },
    "position": {
-    "x": 720,
-    "y": 440
+    "x": 640,
+    "y": 530
    }
   },
   {
@@ -194,8 +194,8 @@
     "center": true
    },
    "position": {
-    "x": 1080,
-    "y": 240
+    "x": 960,
+    "y": 250
    }
   },
   {
@@ -208,8 +208,8 @@
     "spin": true
    },
    "position": {
-    "x": 1080,
-    "y": 600
+    "x": 960,
+    "y": 535
    }
   },
   {
@@ -219,8 +219,8 @@
     "marker": "kuva"
    },
    "position": {
-    "x": 720,
-    "y": 860
+    "x": 640,
+    "y": 833
    }
   },
   {
@@ -230,8 +230,8 @@
     "center": true
    },
    "position": {
-    "x": 1080,
-    "y": 720
+    "x": 960,
+    "y": 791
    }
   },
   {
@@ -244,8 +244,8 @@
     "spin": true
    },
    "position": {
-    "x": 1080,
-    "y": 1080
+    "x": 960,
+    "y": 1076
    }
   }
  ],

public/graphs/pinball-babylon.json

@@ -24,7 +24,7 @@
    },
    "position": {
     "x": 0,
-    "y": 250
+    "y": 207
    }
   },
   {
@@ -36,7 +36,7 @@
    },
    "position": {
     "x": 0,
-    "y": 370
+    "y": 369
    }
   },
   {
@@ -49,7 +49,7 @@
    },
    "position": {
     "x": 0,
-    "y": 510
+    "y": 559
    }
   },
   {
@@ -62,7 +62,7 @@
    },
    "position": {
     "x": 0,
-    "y": 740
+    "y": 897
    }
   },
   {
@@ -72,8 +72,8 @@
     "build": "simd"
    },
    "position": {
-    "x": 360,
-    "y": 60
+    "x": 320,
+    "y": 0
    }
   },
   {
@@ -83,8 +83,8 @@
     "antialias": true
    },
    "position": {
-    "x": 360,
-    "y": 620
+    "x": 320,
+    "y": 560
    }
   },
   {
@@ -94,8 +94,8 @@
     "defaultLights": false
    },
    "position": {
-    "x": 360,
-    "y": 760
+    "x": 320,
+    "y": 717
    }
   },
   {
@@ -107,8 +107,8 @@
     "intensity": 2.5
    },
    "position": {
-    "x": 360,
-    "y": 900
+    "x": 640,
+    "y": 823
    }
   },
   {
@@ -120,16 +120,16 @@
     "intensity": 0.6
    },
    "position": {
-    "x": 360,
-    "y": 1080
+    "x": 640,
+    "y": 1057
    }
   },
   {
    "id": "arcamera",
    "type": "scene.arCamera",
    "params": {},
    "position": {
-    "x": 720,
+    "x": 640,
     "y": 0
    }
   },
@@ -138,8 +138,8 @@
    "type": "debug.inspector",
    "params": {},
    "position": {
-    "x": 720,
-    "y": 120
+    "x": 640,
+    "y": 124
    }
   },
   {
@@ -149,8 +149,8 @@
     "overlay": true
    },
    "position": {
-    "x": 720,
-    "y": 300
+    "x": 640,
+    "y": 284
    }
   },
   {
@@ -160,8 +160,8 @@
     "stats": true
    },
    "position": {
-    "x": 1440,
-    "y": 60
+    "x": 960,
+    "y": 0
    }
   },
   {
@@ -171,8 +171,8 @@
     "marker": "pinball"
    },
    "position": {
-    "x": 720,
-    "y": 440
+    "x": 640,
+    "y": 520
    }
   },
   {
@@ -182,8 +182,8 @@
     "center": true
    },
    "position": {
-    "x": 1080,
-    "y": 240
+    "x": 960,
+    "y": 250
    }
   },
   {
@@ -196,8 +196,8 @@
     "spin": true
    },
    "position": {
-    "x": 1080,
-    "y": 600
+    "x": 960,
+    "y": 535
    }
   }
  ],