From 2bd30adee3ac4cbd5dc36769cda61d28b37c2ffd Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Tue, 20 Oct 2026 14:50:27 +0200 Subject: [PATCH] updated demo link --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1184b3a..5d7c585 100644 --- a/index.html +++ b/index.html @@ -1514,7 +1514,7 @@ button.sidebar-toggle{ {"created":"20260324134403628","text":"> Guided & interactive XR navigation is possible when using [[href]] in WebVTT subtitle-files.\n\n### Potential\n\n* guided XR tours across multiple files/URLs\n* timeline for spawnpoints\n* rich storytelling / e-learning\n\nExample using [[sidecar files]]:\n\n```\nmyscene.xrf.glb\nmyscene.xrf.vtt\nmyscene.xrf.ogg\n```\n\nSince `.xrf.` (or at least one [[href]]) is a heuristic for loading [[sidecar files]], the webvtt subtitles (`myscene.xrf.vtt`) can be displayed while the experience plays (syncronized with `myscene.xrf.ogg`):\n\n```\nWEBVTT\n\n00:01.000 --> 00:04.000 href:#spawn\n\u003Cv narrator voice>welcome to a special experience.\none\ntwo\nthree\n\n00:06.000 --> 00:12.000 \nLet me take you to the divine..\n\n00:13.000 --> 00:14.000 href:#fadeAudioOut&inside\nHere we are \n\n00:14.000 --> 00:19.000\nNow lets open a portal \nto a remote location \n\n00:19.000 --> 00:25.000 href:https://xrfragment.org\nThat portal will take us \nto https://xrfragment.org\nJust click it..\n\n00:25.100 --> 00:30.000 \nWelcome to another Janus URL\n```\n\nHere [[href]] is used as CUE setting, which the player can act upon.\n","tags":"href","title":"WebVTT subtitles","modified":"20260324135016197","type":"text/markdown"}, {"created":"20230427103350051","text":"","tags":"","title":"WebXR","modified":"20230427103400217"}, {"created":"20251006103353443","text":"> See the [example files](https://codeberg.org/coderofsalvation/xrfragment/src/branch/main/assets) or [XRForge](https://xrforge.isvery.ninja) for example assets)\n\n## importance of optimizing 3D file size\n\n\n{{image_VR_lady}}\n\nIt's all about the future of immersive environments.\n\n> Do you want you experience to run fast or with hickups?\n\n## Golden rule\n\nTo guarantee a smooth XR ride, remember: ''small optimized 3D files'' prevent motion sickness .\n\n> A lot of money has been poored into XR experiences with improper use of 360 imagery or unoptimized (WebXR) experiences for standalone VR headsets, resulting in motionsickness. Create small optimized 3D files instead, compatible with XR Fragments instead to **make your efforts worthwile**.\n\n## The primary reason \n\nThe primary reason 3D assets, specifically models and textures, must remain relatively small lies in the necessity for rapid data delivery and memory efficiency. \n\n## Low-polygon models\n\nLow-polygon models and small, compressed texture sizes directly translate to smaller file sizes, which drastically reduces the amount of data that needs to be downloaded, streamed, and loaded into system memory (RAM and VRAM). This is critical for achieving the 'fast-loading' virtual worlds of the future, particularly those accessed via mobile devices or slower connections, or those employing continuous procedural loading (like large open-world games). By minimizing the initial data transfer and the subsequent memory footprint, developers ensure users can achieve:\n\n## immediate immersion\n\nReduce latency during zone transitions, and save precious memory resources, thereby preventing system bottlenecks before rendering even begins.\n\n## Essential\n\nFurthermore, keeping polygon counts low and texture resolutions manageable is essential for maintaining stable, high frame rates and preventing distracting 'framedrops' during real-time rendering. Every vertex and every texture pixel contributes to the GPU's workload: high-poly models require significantly more processing in the geometry pipeline, while large textures demand more memory bandwidth and computational power for sampling and fragment shading. In a complex virtual world with numerous concurrent users and dynamic objects, this computational burden multiplies rapidly. Adopting a strict low-poly approach and using efficient texture atlases ensures that the GPU can consistently render the scene within a tight millisecond budget, guaranteeing a smooth visual experience and enabling the scalable, fluid performance required for competitive gaming, collaborative work, and large-scale social virtual environments.","tags":"[[Best practices]]","title":"Why small file-size matters","modified":"20251008100849876","type":"text/markdown"}, -{"created":"20230424092557827","text":"\u003Cb>Hyperlink the 3D world\u003C/b>\u003Cbr>\nThe 3D deeplinking standard for [[the deep immersive web|Permacomputing & FAQ]].\u003Cbr>\n''Turn'' 3D files ''into'' local-first, interactive, accessible \u003Ca href=\"#XR%Movies\">XR movies\u003C/a>, E-learnings & 3D websites.\u003Cbr>\n\u003Cbr>\nHow? By using \u003Cb>URLs with spawnpoints\u003C/b> (via \u003Ca href=\"#href\">href's\u003C/a> and \u003Ca href=\"#XRF microformat\">microformats\u003C/a>).\u003Cbr>\n\u003Cbr>\n\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/hyperlinking-the-3d-world.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cbr>\nEmpower existing 3D\n\u003Cu tabindex=\"0\">fileformats\n \u003Cspan>like \u003Cb>glTF\u003C/b>, \u003Cb>usdz\u003C/b>, \u003Cb>obj\u003C/b>, \u003Cb>collada\u003C/b> which are used in websites, Game Engines, and like \u003Ca href=\"#Edit%20a%203D%20scene%20file\">3D editors\u003C/a>.\u003Cbr>XR Fragments makes 3D files interactive \u003C/span>\n\u003C/u> via \n\u003Cu tabindex=\"0\">URLS\n \u003Cspan>, using any \n \u003Cu tabindex=\"0\">protocol\n \u003Cspan>, not necessarily served via HTTP, but also \u003Ca href=\"https://ipfs.com\" target=\"_blank\">IPFS\u003C/a>, \u003Ca href=\"https://hypercore-protocol.github.io/new-website/guides/getting-started/\" target=\"_blank\">hypercore\u003C/a>, \u003Ca href=\"https://github.com/webtorrent/webtorrent\" target=\"_blank\">webtorrent\u003C/a> e.g\u003C/span>\n\t \u003C/u>\n\t\u003C/span>\n\u003C/u>.\nThis allows spatial\n \u003Cu tabindex=\"0\">interactions \n\t \u003Cspan>, like browser-navigation, teleportation, importing scenes, spatial hypermedia, allowing useful audiovisual immersive\u003C/span>\n\t\t\u003Cu tabindex=\"0\">experiences\n\t\t \u003Cspan>like e-learnings, quiz, realtime-rendered 3D movies, and audiovisual storytelling\u003C/span>\n\t\t\u003C/u>\n\t\u003C/u>\nvia 3D \n\u003Cu tabindex=\"0\">metadata\n \u003Cspan>, so called 'extras' embedded in 3D files ('custom properties' in \u003Ca href=\"https://blender.org\" target=\"_blank\">Blender\u003C/a>)\u003C/span>\n\u003C/u>\nand promote URI's and \n\u003Cu tabindex=\"0\">Local-First\n \u003Cspan> data, which lives local, and ideally only syncs/shares elsewhere via ''open user-operated internet'' protocols.\u003C/span>\n\u003C/u>\n.\n\n\n\u003Cdiv style=\"text-align:center\">\n\u003Cb style=\"font-size:11px\">~10 mins podcast introduction\u003C/b>\u003Cbr>\n\u003Caudio controls src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/podcast-xrfragments-intro.mp3\" type=\"audio/mpeg\">\n\u003C/audio>\n\u003C/div>\n\u003Cbr>\nAvoid \u003Cb>cloud lock-in\u003C/b>, by making your 3D experiences \u003Cb>portable\u003C/b> to \u003Cb>outlast\u003C/b> current technologies.\n\u003Cbr>\n\u003Cbr>\n\u003Cdiv style=\"background:linear-gradient(120deg,#ddd3,#44F5);border-radius:10px; padding:15px;\">\n\u003Ccenter>\n XR Fragments spec is a ''proud member of''\n \u003Cbr>\u003Cbr>\n \u003Ca href=\"https://xrhf.isvery.ninja\" target=\"_blank\">{{xrh-full.svg}}\u003C/a>\n\u003C/center>\n\u003C/div>\n\u003Cbr>\n\n\u003Ch2>Examples\u003C/h2>\n\u003Cbr>\n\u003Ciframe allowfullscreen allow=\"xr-spatial-tracking; fullscreen\" src=\"https://xrforge.isvery.ninja/janusweb/index.html#janus.url=%2Fmyverse%2Ftech-demos%2Fxrfragments%2Fglb-as-XR-movie-demo%2Ftest.xrf.glb&janus.referrer=https://xrforge.isvery.ninja\" style=\"width:100%; height: 50vh; border:0; border-radius:10px;\">\u003C/iframe>\n\n> A ''~300 kilobytes ''3D file as [[XR Movie|XR Movies]] on the selfhostable [[XRForge|https://xrforge.isvery.ninja]] (try above)\n\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"display:inline-block; padding:0px 20px; border-radius:5px 5px 0px 0px; border:2px solid #555;background: #ededed;font-weight: bold;font-size: 16px;border-bottom: none;\">website.glb#scene1\u003C/div>\n\u003Ca href=\"https://coderofsalvation.codeberg.page/xrfragment-haxe/example/aframe/sandbox/index.html?./../../assets/website.glb\" target=\"_blank\">\n \u003Cimg src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/images/website.glb.jpg\" style=\"border-left: 2px solid #555; cursor:pointer\">\n\u003C/a>\n\n> A 3D file as XR website via AFRAME: \u003Ca href=\"https://coderofsalvation.codeberg.page/xrfragment-haxe/example/aframe/sandbox/index.html?./../../assets/website.glb\" target=\"_blank\" style=\"padding:10px 30px\">Try here\u003C/a>\n\n\u003Cbr>\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/showreel_2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cdiv>#spatialweb #openinternet #interoperable #accessibility #3Dhypermedia\u003C/div>\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"https://matrix.to/#/#xrfragments:matrix.org\" target=\"_blank\" style=\"padding:10px 30px\">Join Matrix Community\u003C/a>\n\u003C/center>\n\u003Cbr>\n\n\u003Ctable style=\"border:none\">\n \u003Ctr>\n\t \u003Ctd style=\"border:none;vertical-align:top; width:49%\">\n\t\t\t\u003Cb>๐ŸŽจ no-code design-first\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿ„ surf 3D scenes in AR/VR\u003C/b>\u003Cbr/>\n\t \u003Cb>๐Ÿ“Ž embeddable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿค interoperable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โ›” network-agnostic, local-first\u003C/b>\u003Cbr/>\n \u003Cb>๐Ÿ’พ compatible with glTF FBX USDZ OBJ and more\u003C/b>\u003Cbr/>\t\t\t\t\t\n\t\t\u003C/td>\n\t\t\u003Ctd style=\"border:none;vertical-align:top\">\n\t\t\t\u003Cb>๐Ÿ”ฎ 99% compatible with \u003Cb>future fileformats\u003C/b>\u003C/b>\u003Cbr/>\n \u003Cb>๐ŸŒฑ friendly to opensource & corporations\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โค๏ธ \u003Cb>no\u003C/b> fileformat or editor lock-in\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿง‘โ€๐ŸŒพ solo-user read-only 3D content\u003C/b>\u003Cbr/>\n\t\t\u003C/td>\n\t\u003C/tr>\n\u003C/table>\n\u003Cbr>\n\n\u003Ch2>Made for 3D designers\u003C/h2>\n[img[xrfragment.jpg]]\n\u003Cbr>\u003CBr>\n\n\n\u003C\u003C\u003C\nSee [[How it works]]\n\u003C\u003C\u003C\n\n\u003Ch2>Made for developers\u003C/h2>\n\n{{href examples}}\n\n\u003Ch2>TLDR\u003C/h2>\n\nThe \u003Cb>TLDR\u003C/b> of processing 3D files with XR Fragments [pseudocode]:\n\u003Cbr>\u003Cbr>\n\u003Cdiv>\n \u003Ctextarea spellcheck=\"false\" class=\"sandboxify noresult\" style=\"min-height:190px;width:100%;max-width:800px;\">foreach object in scene:\n if object.extra.href:\n\t object.onClick = updateCameraFromURL(object.extra.href, camera, timeline)\n \nif changed(app.URL):\n camera.updateCameraFromURL(app.URL)\n \t\ndocument.location.href = 'my.org/foo.glb#roomC'\n\n\u003C/textarea>\n\u003C/div> \n\u003Cbr>\n\u003Ch2>Virtual worlds without lock-in\u003C/h2>\n\nScale beyond companies, appstores, network protocols and file-formats:\n\n\u003Cdiv style=\"max-width:600px;box-shadow:none;padding:15px\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/xrfragment.bumper2.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\n\n\u003Ch3>Virtual worlds connected via URLs\u003C/h3>\n\n[img[urls.svg]]\n\n\u003Cbr>\n\nXR Fragments is a spec to link 3D models into a basic ''distributed'' interactive XR experience.\u003Cbr>\nThink of it as bundling virtual worlds into a \u003Cb>spatial book\u003C/b>.\u003Cbr>\n\u003Cbr>\n\n\n!! Progressive enhancement\n\nUse [[engine prefixes|๐Ÿ“œlevel7: engine prefixes]] to hint specific \u003Cb>game-engine features\u003C/b> from within your 3D file.\n\u003Cbr>\u003Cbr>\n[img[engine-prefixes.webp]]\n\n\nXR Fragments \u003Cb>empowers designers\u003C/b> to embed engine-hints, \u003Cb>simple interactions & navigation\u003C/b> inside a \u003Cb>3D file\u003C/b>.\u003Cbr>\nThis \u003Cb>no longer\u003C/b> requires developers to implement trivial interactive stuff.\u003Cbr>\n\n\u003Cdiv style=\"max-width:500px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"9:16\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/xrfragment-blender-addon.webm\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\nIt promotes \u003Cb>design-first, secure, durable and interoperable\u003C/b> XR experiences from \u003Cb>3D models\u003C/b>, basically 3D hypermedia, mitigating \u003Cb>handcoded-XR-apps-as-3D-content-burial-sites\u003C/b>.\u003Cbr>\n\u003Cbr>\n\n\u003Ch2>Getting Started\u003C/h2>\n\nJust get your hands on a 3D editor and follow the steps in the video:\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/gettingstarted2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\u003CBr>\nCheck [[How it works|How it works]], or \u003Ca href=\"https://coderofsalvation.codeberg.page/xrfragment-haxe/example/aframe/sandbox/index.html?./../../assets/website.glb\" target=\"_blank\">view a \u003Cb>demo.glb\u003C/b> scene right now\u003C/a>, or see the menu in the left corner for more.\n\u003Cbr>\u003Cbr>\n\u003Ch2>Presentation\u003C/h2>\n\u003Cbr>\n\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/bfxqm1q_GXw?start=1445\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen>\u003C/iframe>\n\n\u003C!-- persist telescopic unfolds -->\n\u003C\u003Cscript>>\n\u003Cscript>\n([...document.querySelectorAll('u')]).map( (u) => {\n u.addEventListener('click', e => e.target.className = 'show' )\n});\n\u003C/script>\n\u003C\u003Cscript 0>>\n","tags":"Home","title":"XR Fragments","modified":"20261020124806698","list-before":"How it works"}, +{"created":"20230424092557827","text":"\u003Cb>Hyperlink the 3D world\u003C/b>\u003Cbr>\nThe 3D deeplinking standard for [[the deep immersive web|Permacomputing & FAQ]].\u003Cbr>\n''Turn'' 3D files ''into'' local-first, interactive, accessible \u003Ca href=\"#XR%Movies\">XR movies\u003C/a>, E-learnings & 3D websites.\u003Cbr>\n\u003Cbr>\nHow? By using \u003Cb>URLs with spawnpoints\u003C/b> (via \u003Ca href=\"#href\">href's\u003C/a> and \u003Ca href=\"#XRF microformat\">microformats\u003C/a>).\u003Cbr>\n\u003Cbr>\n\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/hyperlinking-the-3d-world.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cbr>\nEmpower existing 3D\n\u003Cu tabindex=\"0\">fileformats\n \u003Cspan>like \u003Cb>glTF\u003C/b>, \u003Cb>usdz\u003C/b>, \u003Cb>obj\u003C/b>, \u003Cb>collada\u003C/b> which are used in websites, Game Engines, and like \u003Ca href=\"#Edit%20a%203D%20scene%20file\">3D editors\u003C/a>.\u003Cbr>XR Fragments makes 3D files interactive \u003C/span>\n\u003C/u> via \n\u003Cu tabindex=\"0\">URLS\n \u003Cspan>, using any \n \u003Cu tabindex=\"0\">protocol\n \u003Cspan>, not necessarily served via HTTP, but also \u003Ca href=\"https://ipfs.com\" target=\"_blank\">IPFS\u003C/a>, \u003Ca href=\"https://hypercore-protocol.github.io/new-website/guides/getting-started/\" target=\"_blank\">hypercore\u003C/a>, \u003Ca href=\"https://github.com/webtorrent/webtorrent\" target=\"_blank\">webtorrent\u003C/a> e.g\u003C/span>\n\t \u003C/u>\n\t\u003C/span>\n\u003C/u>.\nThis allows spatial\n \u003Cu tabindex=\"0\">interactions \n\t \u003Cspan>, like browser-navigation, teleportation, importing scenes, spatial hypermedia, allowing useful audiovisual immersive\u003C/span>\n\t\t\u003Cu tabindex=\"0\">experiences\n\t\t \u003Cspan>like e-learnings, quiz, realtime-rendered 3D movies, and audiovisual storytelling\u003C/span>\n\t\t\u003C/u>\n\t\u003C/u>\nvia 3D \n\u003Cu tabindex=\"0\">metadata\n \u003Cspan>, so called 'extras' embedded in 3D files ('custom properties' in \u003Ca href=\"https://blender.org\" target=\"_blank\">Blender\u003C/a>)\u003C/span>\n\u003C/u>\nand promote URI's and \n\u003Cu tabindex=\"0\">Local-First\n \u003Cspan> data, which lives local, and ideally only syncs/shares elsewhere via ''open user-operated internet'' protocols.\u003C/span>\n\u003C/u>\n.\n\n\n\u003Cdiv style=\"text-align:center\">\n\u003Cb style=\"font-size:11px\">~10 mins podcast introduction\u003C/b>\u003Cbr>\n\u003Caudio controls src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/podcast-xrfragments-intro.mp3\" type=\"audio/mpeg\">\n\u003C/audio>\n\u003C/div>\n\u003Cbr>\nAvoid \u003Cb>cloud lock-in\u003C/b>, by making your 3D experiences \u003Cb>portable\u003C/b> to \u003Cb>outlast\u003C/b> current technologies.\n\u003Cbr>\n\u003Cbr>\n\u003Cdiv style=\"background:linear-gradient(120deg,#ddd3,#44F5);border-radius:10px; padding:15px;\">\n\u003Ccenter>\n XR Fragments spec is a ''proud member of''\n \u003Cbr>\u003Cbr>\n \u003Ca href=\"https://xrhf.isvery.ninja\" target=\"_blank\">{{xrh-full.svg}}\u003C/a>\n\u003C/center>\n\u003C/div>\n\u003Cbr>\n\n\u003Ch2>Examples\u003C/h2>\n\u003Cbr>\n\u003Ciframe allowfullscreen allow=\"xr-spatial-tracking; fullscreen\" src=\"https://xrforge.isvery.ninja/janusweb/index.html#janus.url=%2Fmyverse%2Ftech-demos%2Fxrfragments%2Fglb-as-XR-movie-demo%2Ftest.xrf.glb&janus.referrer=https://xrforge.isvery.ninja\" style=\"width:100%; height: 50vh; border:0; border-radius:10px;\">\u003C/iframe>\n\n> A ''~300 kilobytes ''3D file as [[XR Movie|XR Movies]] on the selfhostable [[XRForge|https://xrforge.isvery.ninja]] (try above)\n\n\u003Cbr>\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"https://xrforge.isvery.ninja\" target=\"_blank\" style=\"padding:10px 30px\">See more examples\u003C/a>\n\u003C/center>\n\u003Cbr>\n\u003Cbr>\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/showreel_2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cdiv>#spatialweb #openinternet #interoperable #accessibility #3Dhypermedia\u003C/div>\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"https://matrix.to/#/#xrfragments:matrix.org\" target=\"_blank\" style=\"padding:10px 30px\">Join Matrix Community\u003C/a>\n\u003C/center>\n\u003Cbr>\n\n\u003Ctable style=\"border:none\">\n \u003Ctr>\n\t \u003Ctd style=\"border:none;vertical-align:top; width:49%\">\n\t\t\t\u003Cb>๐ŸŽจ no-code design-first\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿ„ surf 3D scenes in AR/VR\u003C/b>\u003Cbr/>\n\t \u003Cb>๐Ÿ“Ž embeddable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿค interoperable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โ›” network-agnostic, local-first\u003C/b>\u003Cbr/>\n \u003Cb>๐Ÿ’พ compatible with glTF FBX USDZ OBJ and more\u003C/b>\u003Cbr/>\t\t\t\t\t\n\t\t\u003C/td>\n\t\t\u003Ctd style=\"border:none;vertical-align:top\">\n\t\t\t\u003Cb>๐Ÿ”ฎ 99% compatible with \u003Cb>future fileformats\u003C/b>\u003C/b>\u003Cbr/>\n \u003Cb>๐ŸŒฑ friendly to opensource & corporations\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โค๏ธ \u003Cb>no\u003C/b> fileformat or editor lock-in\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿง‘โ€๐ŸŒพ solo-user read-only 3D content\u003C/b>\u003Cbr/>\n\t\t\u003C/td>\n\t\u003C/tr>\n\u003C/table>\n\u003Cbr>\n\n\u003Ch2>Made for 3D designers\u003C/h2>\n[img[xrfragment.jpg]]\n\u003Cbr>\u003CBr>\n\n\n\u003C\u003C\u003C\nSee [[How it works]]\n\u003C\u003C\u003C\n\n\u003Ch2>Made for developers\u003C/h2>\n\n{{href examples}}\n\n\u003Ch2>TLDR\u003C/h2>\n\nThe \u003Cb>TLDR\u003C/b> of processing 3D files with XR Fragments [pseudocode]:\n\u003Cbr>\u003Cbr>\n\u003Cdiv>\n \u003Ctextarea spellcheck=\"false\" class=\"sandboxify noresult\" style=\"min-height:190px;width:100%;max-width:800px;\">foreach object in scene:\n if object.extra.href:\n\t object.onClick = updateCameraFromURL(object.extra.href, camera, timeline)\n \nif changed(app.URL):\n camera.updateCameraFromURL(app.URL)\n \t\ndocument.location.href = 'my.org/foo.glb#roomC'\n\n\u003C/textarea>\n\u003C/div> \n\u003Cbr>\n\u003Ch2>Virtual worlds without lock-in\u003C/h2>\n\nScale beyond companies, appstores, network protocols and file-formats:\n\n\u003Cdiv style=\"max-width:600px;box-shadow:none;padding:15px\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/xrfragment.bumper2.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\n\n\u003Ch3>Virtual worlds connected via URLs\u003C/h3>\n\n[img[urls.svg]]\n\n\u003Cbr>\n\nXR Fragments is a spec to link 3D models into a basic ''distributed'' interactive XR experience.\u003Cbr>\nThink of it as bundling virtual worlds into a \u003Cb>spatial book\u003C/b>.\u003Cbr>\n\u003Cbr>\n\n\n!! Progressive enhancement\n\nUse [[engine prefixes|๐Ÿ“œlevel7: engine prefixes]] to hint specific \u003Cb>game-engine features\u003C/b> from within your 3D file.\n\u003Cbr>\u003Cbr>\n[img[engine-prefixes.webp]]\n\n\nXR Fragments \u003Cb>empowers designers\u003C/b> to embed engine-hints, \u003Cb>simple interactions & navigation\u003C/b> inside a \u003Cb>3D file\u003C/b>.\u003Cbr>\nThis \u003Cb>no longer\u003C/b> requires developers to implement trivial interactive stuff.\u003Cbr>\n\n\u003Cdiv style=\"max-width:500px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"9:16\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/xrfragment-blender-addon.webm\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\nIt promotes \u003Cb>design-first, secure, durable and interoperable\u003C/b> XR experiences from \u003Cb>3D models\u003C/b>, basically 3D hypermedia, mitigating \u003Cb>handcoded-XR-apps-as-3D-content-burial-sites\u003C/b>.\u003Cbr>\n\u003Cbr>\n\n\u003Ch2>Getting Started\u003C/h2>\n\nJust get your hands on a 3D editor and follow the steps in the video:\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://forgejo.isvery.ninja/assets/xrfragment.media/main/gettingstarted2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\u003CBr>\nCheck [[How it works|How it works]], or \u003Ca href=\"https://coderofsalvation.codeberg.page/xrfragment-haxe/example/aframe/sandbox/index.html?./../../assets/website.glb\" target=\"_blank\">view a \u003Cb>demo.glb\u003C/b> scene right now\u003C/a>, or see the menu in the left corner for more.\n\u003Cbr>\u003Cbr>\n\u003Ch2>Presentation\u003C/h2>\n\u003Cbr>\n\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/bfxqm1q_GXw?start=1445\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen>\u003C/iframe>\n\n\u003C!-- persist telescopic unfolds -->\n\u003C\u003Cscript>>\n\u003Cscript>\n([...document.querySelectorAll('u')]).map( (u) => {\n u.addEventListener('click', e => e.target.className = 'show' )\n});\n\u003C/script>\n\u003C\u003Cscript 0>>\n","tags":"Home","title":"XR Fragments","modified":"20261020125012495","list-before":"How it works"}, {"created":"20250903111630328","text":"The viewer should ideally \u003Cb>presents a play-button\u003C/b> when:\n\n* at least one animationdata-item is defined in the 3D file\n* and/or when a timeline file (soundtrack or subtitle) sidecar-file is detected\n\nSee [complementary file](#๐Ÿ“œ%20level0:%20File) for detection of sidecar-files, for enhanced accessibility via [WebVTT subtitles](#WebVTT%20subtitles), thumbnails, soundtrack e.g.\n\n\n\n","tags":"","title":"XR Movies","modified":"20250904105805727","type":"text/markdown"}, {"created":"20260316112303145","text":"!! Soundtrack, subtitles, thumbnail \n\n[[XR Movies]] anyone?\u003Cbr>\n\n> ''Simple:'' just add those files and name them accordingly (`mymovie.xrf.ogg` for `mymovie.xrf.glb` e.g.) as [[sidecar-files|๐Ÿ“œ level0: File]]\n\n\u003Ch3>Local-first\u003C/h3>\nWhile level1 is the core of the XR Fragments spec (spawnpoints + [[href]]-links):\n\n> [[level0|๐Ÿ“œ level0: File]] completes the spec for more ''local'' usecases, especially:\n\n1. decorating/detecting a 3D file with extra files\u003Cbr>\n2. credible exit between XR platforms\n","title":"XR Movies & books","modified":"20260316142752927","type":"text/vnd.tiddlywiki","tags":"Home"}, {"created":"20250516081212327","text":"How can applications discover 3D experiences on a network?\n\n> Answer: **spatial microformats** \n\nThe XRF microformat is an [optional](#Progressive%20enhancement) text heuristics which applications can detect across various usecases.\n\n## via HTML webpage\n\nIf the browser/application requests an webpage (`https://nlnet.nl` e.g.) it should check for the [rel-me microformat](https://gmpg.org/xfn/) :\n\n```\n\u003Clink rel=\"alternate\" as=\"spatial-entrypoint\" href=\"scene.xrf.glb\">\n```\n\nThis way the application loads `https://nlnet.nl/scene.xrf.glb` when the user types `nlnet.nl` into the URLbar.\u003Cbr>\nOptionally, `type` can be specified for dynamically generated 3D files:\n\n```\n\u003Clink rel=\"alternate\" as=\"spatial-entrypoint\" href=\"https://worlds.org/scene.php#platformB\" type=\"model/gltf+binary\" />\n```\n\nThe `type`-attribute is for fallback-purposes.\u003Cbr>\nViewer-supported 3D file-extensions (`.glb` e.g.) will **ALWAYS** take precedence over the (non)presence of the `type` attribute.\u003Cbr>\nThe reason is that platforms (Mastodon 'labels' e.g.) don't allow specifying type-attributes.\u003Cbr>\nAnother reason is that XR Fragments is filetype-agnostic, so flexibility is expected on the viewer-side.\n\n> NOTE: in case of multiple 3D files mentioned in `\u003Clink rel=\"me\"`, only the first (supported 3D filetype) will be chosen.\n\n\n#### Collections\n\nExample of a webpage with collection of 3D models (like [icosa.gallery](https://icosa.gallery)):\n\n```xml\n\u003Clink rel='alternate' as='spatial-portal' href=\"result1.glb\"/>\n\u003Clink rel='alternate' as='spatial-portal' href=\"result2.glb\"/>\n\u003Clink rel='alternate' as='spatial-portal' href=\"result3.glb#buildingA\"/>\n\u003Clink rel='alternate' as='spatial-portal' href=\"result3.glb#buildingB\"/>\n\n\u003C!-- optional: pagination hints -->\n\u003Clink rel='next' as='spatial-portal' href=\"...\"/>\n\u003Clink rel='prev' as='spatial-portal' href=\"...\"/>\n\u003Clink rel=\"pages\" min=\"1\" max=\"46\" items=\"8\" /> \n```\n\n3D engines (games/apps) can render these like clickable portals, for example JanusXR-style portals:\n\n{{portals.svg}}\n\n> NOTE: for more customizability [JML <link>](https://coderofsalvation.github.io/janus-guide/#/build/room?id=link) will allow for positioning/thumbnailed portals:\n\n```xml\n\u003Cfireboxroom>\n \u003Cassets>\n \u003Cassetimage src=\"/img/thumb1.jpg\" id=\"img1\"/>\n \u003Cassetimage src=\"/img/thumb2.jpg\" id=\"img2\"/>\n \u003C/assets>\n \u003Croom skybox=\"true\" pos=\"0 0 0\" showavatar=\"false\" use_local_asset=\"room_plane\">\n \u003Clink url=\"/myverse/janusxr_tutorial1/\" thumb_id=\"img1\" title_col=\"0.4 0.37 0.4\" pos=\"0 0 0.001\" draw_glow=\"true\" scale=\"3 3 0.1\" />\n \u003Clink url=\"/myverse/janusxr_tutorial2/\" thumb_id=\"img2\" title_col=\"0.4 0.37 0.4\" pos=\"3 0 0.001\" draw_glow=\"true\" scale=\"3 3 0.1\" />\n \u003C/room>\n\u003C/fireboxroom>\n```\n\n### Mixing multiple spatial microformats:\n\n```xml\n\u003Clink rel=\"alternate\" as=\"spatial-entrypoint\" href=\"scene.xrf.glb\"/>\n\u003Clink rel=\"me\" href=\"myavatar.vrm\"/>\n\u003C!-- JanusXR JML https://github.com/jbaicoianu/janusweb\n\u003Cfireboxroom>\n \u003Croom>\n \u003Cobject id=\"scene.xrf.glb\" pos=\"0 0 0\"/>\n \u003C/room>\n\u003C/fireboxroom>\n-->\n```\n\n\n## via WebFinger\n\nWhen John has an account on foo.com, how can other applications request his 3D homepage by simply entering `john@foo.com`?\n\n> Answer: it can be requested at `https://foo.com/.well-known/webfinger?resource=acct:john@foo.com`, resulting in:\n\n```\n{\n \"subject\": \"acct:john@foo.com\",\n \"aliases\": [\n \"https://mastodon.example/social/john\",\n \"https://john.foo.com\",\n \"https://3d.john.foo.com/model/scene.glb\"\n ],\n \"properties\": {\n \"http://schema.org/name\": \"John Doe\",\n \"http://schema.org/description\": \"Developer, 3D Enthusiast, and Social Explorer\"\n },\n \"links\": [\n {\n \"rel\": \"http://ostatus.org/schema/1.0/subscribe\",\n \"template\": \"https://mastodon.example/social/john/{uri}\"\n },\n {\n \"rel\": \"self\",\n \"type\": \"text/html\",\n \"href\": \"https://john.foo.com\"\n },\n {\n \"rel\": \"me\",\n \"type\": \"text/html\",\n \"href\": \"https://john.foo.com\"\n },\n\t\t{\n \"rel\": \"me\",\n \"type\": \"model/gltf+binary\",\n \"href\": \"https://3d.john.foo.com/model/avatar.vrm\"\n },\n {\n \"rel\": \"scene\",\n \"type\": \"model/gltf+binary\",\n \"href\": \"https://3d.john.foo.com/model/scene.xrf.glb\"\n }\n ]\n}\n```\n\nThis way the application will load `https://3d.john.foo.com/model/scene.glb` when the user types `john@foo.com` into the user field.\n\n## via Text (URI)\n\nAs a fallback, for an application to trigger loading a 3D scene is by detecting URI's of 3D scene-files any text:\n\n* `foo.glb` (or any other popular 3D extension)\n* `https://foo.com/scene.glb` (or any other popular protocol)\n\nThis way, the application can highlight the link whenever it detects the URI (in a text-file or text-section of a 3D model)","tags":"[[๐Ÿ“œ level1: URL]] level1 optional","title":"XRF microformat","modified":"20260918081552014","type":"text/markdown"},