wip: webxr client

added package.json
2025-10-03 13:41:51 +02:00 · 2025-10-03 12:47:27 +02:00
12 changed files with 329 additions and 5 deletions
--- a/clients/webxr/aframe/index.html
+++ b/clients/webxr/aframe/index.html
--- a/clients/webxr/aframe/index.js
+++ b/clients/webxr/aframe/index.js
@ -0,0 +1,49 @@
+
+import * as xrforge from './plugin.xrforge.js';
+import * as level0  from 'xrf/level0';
+
+const widget = new Proxy({
+
+	backend: null,
+	player:  document.querySelector("#player"),
+	src:     document.location.search.substr(1),
+	ext:     {},
+
+	init(opts){ 
+		for( var i in opts) this[i] = opts[i]
+	},
+
+	play(){
+		// set URL
+		player.setAttribute("gltf-model", `url(${widget.src})` )
+
+		document.querySelector("#btn_play").style.display = 'none'
+
+		let script = document.createElement("script")
+		script.src = "https://aframe.io/releases/1.7.0/aframe.min.js"
+		document.head.appendChild(script)
+
+		script = document.createElement("script")
+		script.src = "backend.xrforge.js"
+		document.head.appendChild(script)
+	}
+
+},
+	{
+		get(me,k){ return me[k] },
+
+		set(me,k,v){ 
+			me[k] = v
+			return true 
+		}
+
+	})
+
+xrforge.init(widget)
+//level0.init(widget)
+
+document.querySelector("#btn_play").addEventListener("click", () => widget.play() )
+
+//document.body.style.background = `url(${src.replace( /\.(glb|usdz|gltf|obj|col)$/ , ".png")})`
+
+
--- a/clients/webxr/aframe/play.svg
+++ b/clients/webxr/aframe/play.svg
--- a/clients/webxr/aframe/plugin.xrforge.js
+++ b/clients/webxr/aframe/plugin.xrforge.js
--- a/clients/webxr/dist/xrforge.html
+++ b/clients/webxr/dist/xrforge.html
@ -0,0 +1,44 @@
+<!-- Saved from local source at 2025-10-03T11:36:27Z using monolith v2.10.1 -->
+<!DOCTYPE html><html><head>
+		<style type="text/css">
+
+				body{ 
+					background: #555; 
+				  height: 100%;
+				  margin: 0;
+				  overflow: hidden;
+				  padding: 0;
+				  width: 100%;
+				}
+
+				img#btn_play:hover {
+					opacity: 1;
+				}
+				img#btn_play {
+					position: fixed;
+					top: 50%;
+					left: 50%;
+          width:30.000002%;
+          max-width:400px;
+					transform: translate(-50%,-50%);
+					cursor: pointer;
+					opacity: 0.6;
+					transition: 0.3s;
+					z-index: 999;
+				}
+
+		</style>
+	<script type="module" crossorigin="" src="data:module;base64,Ly8gdmlld2VyL3BsdWdpbi54cmZvcmdlLmpzCmZ1bmN0aW9uIGluaXQod2lkZ2V0MikgewogIGluZmVyU291cmNlKHdpZGdldDIuc3JjKTsKfQphc3luYyBmdW5jdGlvbiBpbmZlclNvdXJjZShzcmMpIHsKICByZXNwb25zZSA9IGF3YWl0IGZldGNoKHNyYywgewogICAgbWV0aG9kOiAiSEVBRCIKICB9KTsKICBpZiAoIXJlc3BvbnNlLm9rKSB7CiAgICB0aHJvdyBuZXcgRXJyb3IoYEhUVFAgZXJyb3IhIHN0YXR1czogJHtyZXNwb25zZS5zdGF0dXN9YCk7CiAgfQogIGNvbnRlbnREaXNwb3NpdGlvbiA9IHJlc3BvbnNlLmhlYWRlcnMuZ2V0KCJDb250ZW50LURpc3Bvc2l0aW9uIik7CiAgY29uc29sZS5sb2cod2lkZ2V0LnNyYyk7CiAgd2lkZ2V0LnNyYyA9IGV4dHJhY3RGaWxlbmFtZShjb250ZW50RGlzcG9zaXRpb24pOwogIGNvbnNvbGUubG9nKCJkZXRlY3RlZDogIiArIHdpZGdldC5zcmMpOwp9CmZ1bmN0aW9uIGV4dHJhY3RGaWxlbmFtZShjb250ZW50RGlzcG9zaXRpb25IZWFkZXIpIHsKICBjb25zdCB1dGY4TWF0Y2ggPSBjb250ZW50RGlzcG9zaXRpb25IZWFkZXIubWF0Y2goL2ZpbGVuYW1lXCo9KD86dXRmLTh8VVRGLTgpJycoLis/KSg/Ojt8JCkvaSk7CiAgaWYgKHV0ZjhNYXRjaCAmJiB1dGY4TWF0Y2hbMV0pIHsKICAgIHJldHVybiBkZWNvZGVVUklDb21wb25lbnQodXRmOE1hdGNoWzFdLnRyaW0oKSk7CiAgfQogIGNvbnN0IGJhc2ljTWF0Y2ggPSBjb250ZW50RGlzcG9zaXRpb25IZWFkZXIubWF0Y2goL2ZpbGVuYW1lPSIoLis/KSIvaSk7CiAgaWYgKGJhc2ljTWF0Y2ggJiYgYmFzaWNNYXRjaFsxXSkgewogICAgcmV0dXJuIGJhc2ljTWF0Y2hbMV0udHJpbSgpOwogIH0KICByZXR1cm4gbnVsbDsKfQoKLy8gdmlld2VyL2luZGV4LmpzCnZhciB3aWRnZXQyID0gbmV3IFByb3h5KHsKICBiYWNrZW5kOiBudWxsLAogIHBsYXllcjogZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiI3BsYXllciIpLAogIHNyYzogZG9jdW1lbnQubG9jYXRpb24uc2VhcmNoLnN1YnN0cigxKSwKICBleHQ6IHt9LAogIGluaXQob3B0cykgewogICAgZm9yICh2YXIgaSBpbiBvcHRzKQogICAgICB0aGlzW2ldID0gb3B0c1tpXTsKICB9LAogIHBsYXkoKSB7CiAgICBwbGF5ZXIuc2V0QXR0cmlidXRlKCJnbHRmLW1vZGVsIiwgYHVybCgke3dpZGdldDIuc3JjfSlgKTsKICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIiNidG5fcGxheSIpLnN0eWxlLmRpc3BsYXkgPSAibm9uZSI7CiAgICBsZXQgc2NyaXB0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7CiAgICBzY3JpcHQuc3JjID0gImh0dHBzOi8vYWZyYW1lLmlvL3JlbGVhc2VzLzEuNy4wL2FmcmFtZS5taW4uanMiOwogICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChzY3JpcHQpOwogICAgc2NyaXB0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7CiAgICBzY3JpcHQuc3JjID0gImJhY2tlbmQueHJmb3JnZS5qcyI7CiAgICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHNjcmlwdCk7CiAgfQp9LCB7CiAgZ2V0KG1lLCBrKSB7CiAgICByZXR1cm4gbWVba107CiAgfSwKICBzZXQobWUsIGssIHYpIHsKICAgIG1lW2tdID0gdjsKICAgIHJldHVybiB0cnVlOwogIH0KfSk7CmluaXQod2lkZ2V0Mik7CmRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIiNidG5fcGxheSIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgKCkgPT4gd2lkZ2V0Mi5wbGF5KCkpOwo="></script><meta name="robots" content="none"></meta></head>
+	<body>
+
+	  <img id="btn_play" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTguNzUyIDU4Ljc1MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTguNzUyIDU4Ljc1MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggc3Ryb2tlPSIjQ0NDIiBzdHJva2Utb3BhY2l0eT0iMC41IiBmaWxsPSJ3aGl0ZSIgZD0iTTUyLjUyNCwyMy45MjVMMTIuNTA3LDAuODI0Yy0xLjkwNy0xLjEtNC4zNzYtMS4wOTctNi4yNzYsMEM0LjI5MywxLjk0LDMuMDg4LDQuMDI1LDMuMDg4LDYuMjY0djQ2LjIwNQ0KCQljMCwyLjI0LDEuMjA0LDQuMzI1LDMuMTMxLDUuNDM1YzAuOTUzLDAuNTU1LDIuMDQyLDAuODQ4LDMuMTQ5LDAuODQ4YzEuMTA0LDAsMi4xOTItMC4yOTIsMy4xNDEtMC44NDNsNDAuMDE3LTIzLjEwMw0KCQljMS45MzYtMS4xMTksMy4xMzgtMy4yMDMsMy4xMzgtNS40MzlDNTUuNjYzLDI3LjEzNCw1NC40NjIsMjUuMDUsNTIuNTI0LDIzLjkyNXogTTQ5LjUyNCwyOS42MTJMOS41MDQsNTIuNzE2DQoJCWMtMC4wODIsMC4wNDctMC4xOCwwLjA1Mi0wLjI3OS0wLjAwNWMtMC4wODQtMC4wNDktMC4xMzctMC4xNDItMC4xMzctMC4yNDJWNi4yNjNjMC0wLjEsMC4wNTItMC4xOTIsMC4xNC0wLjI0Mw0KCQljMC4wNDItMC4wMjUsMC4wOS0wLjAzOCwwLjEzOS0wLjAzOGMwLjA1MSwwLDAuMDk5LDAuMDEzLDAuMTQyLDAuMDM4bDQwLjAxLDIzLjA5OGMwLjA4OSwwLjA1MiwwLjE0NSwwLjE0NywwLjE0NSwwLjI0OQ0KCQlDNDkuNjYzLDI5LjQ3LDQ5LjYxMSwyOS41NjEsNDkuNTI0LDI5LjYxMnoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K">
+
+	  <a-scene>
+	  	<a-entity id="player" animation-mixer_disabled="" gltf-model=""></a-entity>
+	  </a-scene>
+
+	  
+
+	
+
+</body></html>
--- a/clients/webxr/dist/xrforge/play-c89r1cs1.svg
+++ b/clients/webxr/dist/xrforge/play-c89r1cs1.svg
@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 58.752 58.752" style="enable-background:new 0 0 58.752 58.752;" xml:space="preserve">
+<g>
+	<path stroke="#CCC" stroke-opacity="0.5" fill="white" d="M52.524,23.925L12.507,0.824c-1.907-1.1-4.376-1.097-6.276,0C4.293,1.94,3.088,4.025,3.088,6.264v46.205
+		c0,2.24,1.204,4.325,3.131,5.435c0.953,0.555,2.042,0.848,3.149,0.848c1.104,0,2.192-0.292,3.141-0.843l40.017-23.103
+		c1.936-1.119,3.138-3.203,3.138-5.439C55.663,27.134,54.462,25.05,52.524,23.925z M49.524,29.612L9.504,52.716
+		c-0.082,0.047-0.18,0.052-0.279-0.005c-0.084-0.049-0.137-0.142-0.137-0.242V6.263c0-0.1,0.052-0.192,0.14-0.243
+		c0.042-0.025,0.09-0.038,0.139-0.038c0.051,0,0.099,0.013,0.142,0.038l40.01,23.098c0.089,0.052,0.145,0.147,0.145,0.249
+		C49.663,29.47,49.611,29.561,49.524,29.612z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/clients/webxr/dist/xrforge/xrforge-gent5bnt.js
+++ b/clients/webxr/dist/xrforge/xrforge-gent5bnt.js
@ -0,0 +1,59 @@
+// viewer/plugin.xrforge.js
+function init(widget2) {
+  inferSource(widget2.src);
+}
+async function inferSource(src) {
+  response = await fetch(src, {
+    method: "HEAD"
+  });
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  contentDisposition = response.headers.get("Content-Disposition");
+  console.log(widget.src);
+  widget.src = extractFilename(contentDisposition);
+  console.log("detected: " + widget.src);
+}
+function extractFilename(contentDispositionHeader) {
+  const utf8Match = contentDispositionHeader.match(/filename\*=(?:utf-8|UTF-8)''(.+?)(?:;|$)/i);
+  if (utf8Match && utf8Match[1]) {
+    return decodeURIComponent(utf8Match[1].trim());
+  }
+  const basicMatch = contentDispositionHeader.match(/filename="(.+?)"/i);
+  if (basicMatch && basicMatch[1]) {
+    return basicMatch[1].trim();
+  }
+  return null;
+}
+
+// viewer/index.js
+var widget2 = new Proxy({
+  backend: null,
+  player: document.querySelector("#player"),
+  src: document.location.search.substr(1),
+  ext: {},
+  init(opts) {
+    for (var i in opts)
+      this[i] = opts[i];
+  },
+  play() {
+    player.setAttribute("gltf-model", `url(${widget2.src})`);
+    document.querySelector("#btn_play").style.display = "none";
+    let script = document.createElement("script");
+    script.src = "https://aframe.io/releases/1.7.0/aframe.min.js";
+    document.head.appendChild(script);
+    script = document.createElement("script");
+    script.src = "backend.xrforge.js";
+    document.head.appendChild(script);
+  }
+}, {
+  get(me, k) {
+    return me[k];
+  },
+  set(me, k, v) {
+    me[k] = v;
+    return true;
+  }
+});
+init(widget2);
+document.querySelector("#btn_play").addEventListener("click", () => widget2.play());
--- a/clients/webxr/dist/xrforge/xrforge.html
+++ b/clients/webxr/dist/xrforge/xrforge.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style type="text/css">
+
+				body{ 
+					background: #555; 
+				  height: 100%;
+				  margin: 0;
+				  overflow: hidden;
+				  padding: 0;
+				  width: 100%;
+				}
+
+				img#btn_play:hover {
+					opacity: 1.0;
+				}
+				img#btn_play {
+					position: fixed;
+					top: 50%;
+					left: 50%;
+          width:30%;
+          max-width:400px;
+					transform: translate(-50%,-50%);
+					cursor: pointer;
+					opacity: 0.6;
+					transition: 0.3s;
+					z-index: 999;
+				}
+
+		</style>
+	<script type="module" crossorigin src="./xrforge-gent5bnt.js"></script></head>
+	<body>
+
+	  <img id="btn_play" src="./play-c89r1cs1.svg" />
+
+	  <a-scene>
+	  	<a-entity id="player" animation-mixer_disabled gltf-model></a-entity>
+	  </a-scene>
+
+	  
+
+	</body>
+</html>
--- a/clients/webxr/package-lock.json
+++ b/clients/webxr/package-lock.json
@ -0,0 +1,28 @@
+{
+  "name": "webxr",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "webxr",
+      "version": "1.0.0",
+      "license": "AGPL3",
+      "dependencies": {
+        "xrf": "^0.0.1"
+      }
+    },
+    "../../../xrfragment/xrf.js": {
+      "name": "xrf",
+      "version": "0.0.1",
+      "extraneous": true,
+      "license": "MIT"
+    },
+    "node_modules/xrf": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/xrf/-/xrf-0.0.1.tgz",
+      "integrity": "sha512-uYa8M73z45DRTymga+48gTDEeur+iM3jPktVBnaOHopb17VvZxJ6yZy6TAhMURMrliHB48mYUUSC5J5NRF8wZA==",
+      "license": "MIT"
+    }
+  }
+}
--- a/clients/webxr/package.json
+++ b/clients/webxr/package.json
@ -0,0 +1,15 @@
+{
+  "name": "webxr",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run build-xrforge",
+    "build-xrforge": "mkdir -p dist/xrforge && bun build --outdir=dist/xrforge xrforge.html && monolith dist/xrforge/xrforge.html --output dist/xrforge.html"
+  },
+  "author": "Leon van Kammen",
+  "license": "",
+  "description": "",
+  "dependencies": {
+    "xrf": "^0.0.1"
+  }
+}
--- a/clients/webxr/viewer/shell.nix
+++ b/clients/webxr/viewer/shell.nix
@ -12,15 +12,13 @@
    nativeBuildInputs = with pkgs.buildPackages; [ 

      nodejs_20
+      monolith
+      bun

    ];

    shellHook = ''
      
-      # install bun
-      alias bun="steam-run ~/.bun/bin/bun"
-      test -f ~/.bun/bin/bun || curl -fsSL https://bun.com/install | bash -s "bun-v1.2.22"
-
-      export NIX_SHELL_DEV=1
+      export NIX_XRFORGE_WEBXR=1
    '';
 }
--- a/clients/webxr/xrforge.html
+++ b/clients/webxr/xrforge.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style type="text/css">
+
+				body{ 
+					background: #555; 
+				  height: 100%;
+				  margin: 0;
+				  overflow: hidden;
+				  padding: 0;
+				  width: 100%;
+				}
+
+				img#btn_play:hover {
+					opacity: 1.0;
+				}
+				img#btn_play {
+					position: fixed;
+					top: 50%;
+					left: 50%;
+			                width:30%;
+				        max-width:400px;
+					transform: translate(-50%,-50%);
+					cursor: pointer;
+					opacity: 0.6;
+					transition: 0.3s;
+					z-index: 999;
+				}
+
+		</style>
+	</head>
+	<body>
+
+	  <img id="btn_play" src="viewer/play.svg"/>
+
+	  <a-scene>
+	  	<a-entity id="player" animation-mixer_disabled gltf-model></a-entity>
+	  </a-scene>
+
+	  <script type="module" src="aframe/index.js"></script>
+
+	</body>
+</html>
Author	SHA1	Message	Date
Leon van Kammen	ef5368a5a8	wip: webxr client	2025-10-03 13:41:51 +02:00
Leon van Kammen	5f05ed03b6	added package.json	2025-10-03 12:47:27 +02:00