Compare commits

...

2 commits

Author SHA1 Message Date
ef5368a5a8 wip: webxr client 2025-10-03 13:41:51 +02:00
5f05ed03b6 added package.json 2025-10-03 12:47:27 +02:00
12 changed files with 329 additions and 5 deletions

View file

@ -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")})`

View file

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

44
clients/webxr/dist/xrforge.html vendored Normal file
View file

@ -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>

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -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());

44
clients/webxr/dist/xrforge/xrforge.html vendored Normal file
View file

@ -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>

28
clients/webxr/package-lock.json generated Normal file
View file

@ -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"
}
}
}

View file

@ -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"
}
}

View file

@ -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
'';
}

View file

@ -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>