remove spec + index.html (goes to other repo)
This commit is contained in:
parent
4000595691
commit
fc063b6b4b
19 changed files with 0 additions and 48544 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,614 +0,0 @@
|
||||||
%%%
|
|
||||||
Title = "XR Fragments"
|
|
||||||
area = "Internet"
|
|
||||||
workgroup = "Internet Engineering Task Force"
|
|
||||||
|
|
||||||
[seriesInfo]
|
|
||||||
name = "XR-Fragments"
|
|
||||||
value = "draft-XRFRAGMENTS-leonvankammen-00"
|
|
||||||
stream = "IETF"
|
|
||||||
status = "informational"
|
|
||||||
|
|
||||||
date = 2023-04-12T00:00:00Z
|
|
||||||
|
|
||||||
[[author]]
|
|
||||||
initials="L.R."
|
|
||||||
surname="van Kammen"
|
|
||||||
fullname="L.R. van Kammen"
|
|
||||||
|
|
||||||
%%%
|
|
||||||
|
|
||||||
<!-- for annotated version see: https://raw.githubusercontent.com/ietf-tools/rfcxml-templates-and-schemas/main/draft-rfcxml-general-template-annotated-00.xml -->
|
|
||||||
|
|
||||||
<!--{
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
body{
|
|
||||||
font-family: monospace;
|
|
||||||
max-width: 1000px;
|
|
||||||
font-size: 15px;
|
|
||||||
padding: 0% 20%;
|
|
||||||
line-height: 30px;
|
|
||||||
color:#555;
|
|
||||||
background:#F0F0F3
|
|
||||||
}
|
|
||||||
h1 { margin-top:40px; }
|
|
||||||
pre{ line-height:18px; }
|
|
||||||
a,a:visited,a:active{ color: #70f; }
|
|
||||||
code{
|
|
||||||
border: 1px solid #AAA;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0px 5px 2px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre{
|
|
||||||
line-height: 18px;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
pre + code {
|
|
||||||
background:#DDD;
|
|
||||||
}
|
|
||||||
pre>code{
|
|
||||||
border:none;
|
|
||||||
border-radius:0px;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
blockquote{
|
|
||||||
padding-left: 30px;
|
|
||||||
margin: 0;
|
|
||||||
border-left: 5px solid #CCC;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
border-bottom: 1px solid #000;
|
|
||||||
text-align: left;
|
|
||||||
padding-right:45px;
|
|
||||||
padding-left:7px;
|
|
||||||
background: #DDD;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
border-bottom: 1px solid #CCC;
|
|
||||||
font-size:13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<h1>XR Fragments</h1>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
stream: IETF
|
|
||||||
area: Internet
|
|
||||||
status: informational
|
|
||||||
author: Leon van Kammen
|
|
||||||
date: 2023-04-12T00:00:00Z
|
|
||||||
workgroup: Internet Engineering Task Force
|
|
||||||
value: draft-XRFRAGMENTS-leonvankammen-00
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
|
|
||||||
}-->
|
|
||||||
|
|
||||||
.# Abstract
|
|
||||||
|
|
||||||
This draft offers a specification for 4D URLs & navigation, to link 3D scenes and text together with- or without a network-connection.<br>
|
|
||||||
The specification promotes spatial addressibility, sharing, navigation, query-ing and tagging interactive (text)objects across for (XR) Browsers.<br>
|
|
||||||
XR Fragments allows us to enrich existing dataformats, by recursive use of existing proven technologies like [URI Fragments](https://en.wikipedia.org/wiki/URI_fragment) and BibTags notation.<br>
|
|
||||||
|
|
||||||
> Almost every idea in this document is demonstrated at [https://xrfragment.org](https://xrfragment.org)
|
|
||||||
|
|
||||||
{mainmatter}
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
|
|
||||||
How can we add more features to existing text & 3D scenes, without introducing new dataformats?<br>
|
|
||||||
Historically, there's many attempts to create the ultimate markuplanguage or 3D fileformat.<br>
|
|
||||||
However, thru the lens of authoring, their lowest common denominator is still: plain text.<br>
|
|
||||||
XR Fragments allows us to enrich/connect existing dataformats, by recursive use of existing technologies:<br>
|
|
||||||
|
|
||||||
1. addressibility and navigation of 3D scenes/objects: [URI Fragments](https://en.wikipedia.org/wiki/URI_fragment) + src/href spatial metadata
|
|
||||||
1. hasslefree tagging across text and spatial objects using [BibTags](https://en.wikipedia.org/wiki/BibTeX) as appendix (see [visual-meta](https://visual-meta.info) e.g.)
|
|
||||||
|
|
||||||
> NOTE: The chapters in this document are ordered from highlevel to lowlevel (technical) as much as possible
|
|
||||||
|
|
||||||
# Core principle
|
|
||||||
|
|
||||||
XR Fragments strives to serve (nontechnical/fuzzy) humans first, and machine(implementations) later, by ensuring hasslefree text-vs-thought feedback loops.<br>
|
|
||||||
This also means that the repair-ability of machine-matters should be human friendly too (not too complex).<br>
|
|
||||||
|
|
||||||
> "When a car breaks down, the ones **without** turbosupercharger are easier to fix"
|
|
||||||
|
|
||||||
Let's always focus on average humans: the 'fuzzy symbolical mind' must be served first, before serving the greater ['categorized typesafe RDF hive mind'](https://en.wikipedia.org/wiki/Borg)).
|
|
||||||
|
|
||||||
> Humans first, machines (AI) later.
|
|
||||||
|
|
||||||
# Conventions and Definitions
|
|
||||||
|
|
||||||
|definition | explanation |
|
|
||||||
|----------------------|-------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
|human | a sentient being who thinks fuzzy, absorbs, and shares thought (by plain text, not markuplanguage) |
|
|
||||||
|scene | a (local/remote) 3D scene or 3D file (index.gltf e.g.) |
|
|
||||||
|3D object | an object inside a scene characterized by vertex-, face- and customproperty data. |
|
|
||||||
|metadata | custom properties of text, 3D Scene or Object(nodes), relevant to machines and a human minority (academics/developers) |
|
|
||||||
|XR fragment | URI Fragment with spatial hints like `#pos=0,0,0&t=1,100` e.g. |
|
|
||||||
|src | (HTML-piggybacked) metadata of a 3D object which instances content |
|
|
||||||
|href | (HTML-piggybacked) metadata of a 3D object which links to content |
|
|
||||||
|query | an URI Fragment-operator which queries object(s) from a scene like `#q=cube` |
|
|
||||||
|visual-meta | [visual-meta](https://visual.meta.info) data appended to text/books/papers which is indirectly visible/editable in XR. |
|
|
||||||
|requestless metadata | opposite of networked metadata (RDF/HTML requests can easily fan out into framerate-dropping, hence not used a lot in games). |
|
|
||||||
|FPS | frames per second in spatial experiences (games,VR,AR e.g.), should be as high as possible |
|
|
||||||
|introspective | inward sensemaking ("I feel this belongs to that") |
|
|
||||||
|extrospective | outward sensemaking ("I'm fairly sure John is a person who lives in oklahoma") |
|
|
||||||
|`◻` | ascii representation of an 3D object/mesh |
|
|
||||||
|(un)obtrusive | obtrusive: wrapping human text/thought in XML/HTML/JSON obfuscates human text into a salad of machine-symbols and words |
|
|
||||||
|BibTeX | simple tagging/citing/referencing standard for plaintext |
|
|
||||||
|BibTag | a BibTeX tag |
|
|
||||||
|
|
||||||
# List of URI Fragments
|
|
||||||
|
|
||||||
| fragment | type | example | info |
|
|
||||||
|--------------|----------|-------------------|-------------------------------------------------------------------|
|
|
||||||
| `#pos` | vector3 | `#pos=0.5,0,0` | positions camera to xyz-coord 0.5,0,0 |
|
|
||||||
| `#rot` | vector3 | `#rot=0,90,0` | rotates camera to xyz-coord 0.5,0,0 |
|
|
||||||
| `#t` | vector2 | `#t=500,1000` | sets animation-loop range between frame 500 and 1000 |
|
|
||||||
| `#......` | string | `#.cubes` `#cube` | object(s) of interest (fragment to object name or class mapping) |
|
|
||||||
|
|
||||||
> xyz coordinates are similar to ones found in SVG Media Fragments
|
|
||||||
|
|
||||||
# List of metadata for 3D nodes
|
|
||||||
|
|
||||||
| key | type | example (JSON) | info |
|
|
||||||
|--------------|----------|--------------------|--------------------------------------------------------|
|
|
||||||
| `name` | string | `"name": "cube"` | available in all 3D fileformats & scenes |
|
|
||||||
| `class` | string | `"class": "cubes"` | available through custom property in 3D fileformats |
|
|
||||||
| `href` | string | `"href": "b.gltf"` | available through custom property in 3D fileformats |
|
|
||||||
| `src` | string | `"src": "#q=cube"` | available through custom property in 3D fileformats |
|
|
||||||
|
|
||||||
Popular compatible 3D fileformats: `.gltf`, `.obj`, `.fbx`, `.usdz`, `.json` (THREEjs), `COLLADA` and so on.
|
|
||||||
|
|
||||||
> NOTE: XR Fragments are file-agnostic, which means that the metadata exist in programmatic 3D scene(nodes) too.
|
|
||||||
|
|
||||||
# Navigating 3D
|
|
||||||
|
|
||||||
Here's an ascii representation of a 3D scene-graph which contains 3D objects `◻` and their metadata:
|
|
||||||
|
|
||||||
```
|
|
||||||
+--------------------------------------------------------+
|
|
||||||
| |
|
|
||||||
| index.gltf |
|
|
||||||
| │ |
|
|
||||||
| ├── ◻ buttonA |
|
|
||||||
| │ └ href: #pos=1,0,1&t=100,200 |
|
|
||||||
| │ |
|
|
||||||
| └── ◻ buttonB |
|
|
||||||
| └ href: other.fbx | <-- file-agnostic (can be .gltf .obj etc)
|
|
||||||
| |
|
|
||||||
+--------------------------------------------------------+
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
An XR Fragment-compatible browser viewing this scene, allows the end-user to interact with the `buttonA` and `buttonB`.<br>
|
|
||||||
In case of `buttonA` the end-user will be teleported to another location and time in the **current loaded scene**, but `buttonB` will
|
|
||||||
**replace the current scene** with a new one, like `other.fbx`.
|
|
||||||
|
|
||||||
# Embedding 3D content
|
|
||||||
|
|
||||||
Here's an ascii representation of a 3D scene-graph with 3D objects `◻` which embeds remote & local 3D objects `◻` (without) using queries:
|
|
||||||
|
|
||||||
```
|
|
||||||
+--------------------------------------------------------+ +-------------------------+
|
|
||||||
| | | |
|
|
||||||
| index.gltf | | ocean.com/aquarium.fbx |
|
|
||||||
| │ | | │ |
|
|
||||||
| ├── ◻ canvas | | └── ◻ fishbowl |
|
|
||||||
| │ └ src: painting.png | | ├─ ◻ bass |
|
|
||||||
| │ | | └─ ◻ tuna |
|
|
||||||
| ├── ◻ aquariumcube | | |
|
|
||||||
| │ └ src: ://rescue.com/fish.gltf#q=bass%20tuna | +-------------------------+
|
|
||||||
| │ |
|
|
||||||
| ├── ◻ bedroom |
|
|
||||||
| │ └ src: #q=canvas |
|
|
||||||
| │ |
|
|
||||||
| └── ◻ livingroom |
|
|
||||||
| └ src: #q=canvas |
|
|
||||||
| |
|
|
||||||
+--------------------------------------------------------+
|
|
||||||
```
|
|
||||||
|
|
||||||
An XR Fragment-compatible browser viewing this scene, lazy-loads and projects `painting.png` onto the (plane) object called `canvas` (which is copy-instanced in the bed and livingroom).<br>
|
|
||||||
Also, after lazy-loading `ocean.com/aquarium.gltf`, only the queried objects `bass` and `tuna` will be instanced inside `aquariumcube`.<br>
|
|
||||||
Resizing will be happen accordingly to its placeholder object `aquariumcube`, see chapter Scaling.<br>
|
|
||||||
|
|
||||||
# XR Fragment queries
|
|
||||||
|
|
||||||
Include, exclude, hide/shows objects using space-separated strings:
|
|
||||||
|
|
||||||
* `#q=cube`
|
|
||||||
* `#q=cube -ball_inside_cube`
|
|
||||||
* `#q=* -sky`
|
|
||||||
* `#q=-.language .english`
|
|
||||||
* `#q=cube&rot=0,90,0`
|
|
||||||
* `#q=price:>2 price:<5`
|
|
||||||
|
|
||||||
It's simple but powerful syntax which allows <b>css</b>-like class/id-selectors with a searchengine prompt-style feeling:
|
|
||||||
|
|
||||||
1. queries are showing/hiding objects **only** when defined as `src` value (prevents sharing of scene-tampered URL's).
|
|
||||||
1. queries are highlighting objects when defined in the top-Level (browser) URL (bar).
|
|
||||||
1. search words like `cube` and `foo` in `#q=cube foo` are matched against 3D object names or custom metadata-key(values)
|
|
||||||
1. search words like `cube` and `foo` in `#q=cube foo` are matched against tags (BibTeX) inside plaintext `src` values like `@cube{redcube, ...` e.g.
|
|
||||||
1. `#` equals `#q=*`
|
|
||||||
1. words starting with `.` like `.german` match class-metadata of 3D objects like `"class":"german"`
|
|
||||||
1. words starting with `.` like `.german` match class-metadata of (BibTeX) tags in XR Text objects like `@german{KarlHeinz, ...` e.g.
|
|
||||||
|
|
||||||
> **For example**: `#q=.foo` is a shorthand for `#q=class:foo`, which will select objects with custom property `class`:`foo`. Just a simple `#q=cube` will simply select an object named `cube`.
|
|
||||||
|
|
||||||
* see [an example video here](https://coderofsalvation.github.io/xrfragment.media/queries.mp4)
|
|
||||||
|
|
||||||
## including/excluding
|
|
||||||
|
|
||||||
| operator | info |
|
|
||||||
|----------|-------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| `*` | select all objects (only useful in `src` custom property) |
|
|
||||||
| `-` | removes/hides object(s) |
|
|
||||||
| `:` | indicates an object-embedded custom property key/value |
|
|
||||||
| `.` | alias for `"class" :".foo"` equals `class:foo` |
|
|
||||||
| `>` `<` | compare float or int number |
|
|
||||||
| `/` | reference to root-scene.<br>Useful in case of (preventing) showing/hiding objects in nested scenes (instanced by `src`) (*) |
|
|
||||||
|
|
||||||
> \* = `#q=-/cube` hides object `cube` only in the root-scene (not nested `cube` objects)<br> `#q=-cube` hides both object `cube` in the root-scene <b>AND</b> nested `skybox` objects |
|
|
||||||
|
|
||||||
[» example implementation](https://github.com/coderofsalvation/xrfragment/blob/main/src/3rd/js/three/xrf/q.js)
|
|
||||||
[» example 3D asset](https://github.com/coderofsalvation/xrfragment/blob/main/example/assets/query.gltf#L192)
|
|
||||||
[» discussion](https://github.com/coderofsalvation/xrfragment/issues/3)
|
|
||||||
|
|
||||||
## Query Parser
|
|
||||||
|
|
||||||
Here's how to write a query parser:
|
|
||||||
|
|
||||||
1. create an associative array/object to store query-arguments as objects
|
|
||||||
1. detect object id's & properties `foo:1` and `foo` (reference regex: `/^.*:[><=!]?/` )
|
|
||||||
1. detect excluders like `-foo`,`-foo:1`,`-.foo`,`-/foo` (reference regex: `/^-/` )
|
|
||||||
1. detect root selectors like `/foo` (reference regex: `/^[-]?\//` )
|
|
||||||
1. detect class selectors like `.foo` (reference regex: `/^[-]?class$/` )
|
|
||||||
1. detect number values like `foo:1` (reference regex: `/^[0-9\.]+$/` )
|
|
||||||
1. expand aliases like `.foo` into `class:foo`
|
|
||||||
1. for every query token split string on `:`
|
|
||||||
1. create an empty array `rules`
|
|
||||||
1. then strip key-operator: convert "-foo" into "foo"
|
|
||||||
1. add operator and value to rule-array
|
|
||||||
1. therefore we we set `id` to `true` or `false` (false=excluder `-`)
|
|
||||||
1. and we set `root` to `true` or `false` (true=`/` root selector is present)
|
|
||||||
1. we convert key '/foo' into 'foo'
|
|
||||||
1. finally we add the key/value to the store like `store.foo = {id:false,root:true}` e.g.
|
|
||||||
|
|
||||||
> An example query-parser (which compiles to many languages) can be [found here](https://github.com/coderofsalvation/xrfragment/blob/main/src/xrfragment/Query.hx)
|
|
||||||
|
|
||||||
## XR Fragment URI Grammar
|
|
||||||
|
|
||||||
```
|
|
||||||
reserved = gen-delims / sub-delims
|
|
||||||
gen-delims = "#" / "&"
|
|
||||||
sub-delims = "," / "="
|
|
||||||
```
|
|
||||||
|
|
||||||
> Example: `://foo.com/my3d.gltf#pos=1,0,0&prio=-5&t=0,100`
|
|
||||||
|
|
||||||
| Demo | Explanation |
|
|
||||||
|-------------------------------|---------------------------------|
|
|
||||||
| `pos=1,2,3` | vector/coordinate argument e.g. |
|
|
||||||
| `pos=1,2,3&rot=0,90,0&q=.foo` | combinators |
|
|
||||||
|
|
||||||
|
|
||||||
# Text in XR (tagging,linking to spatial objects)
|
|
||||||
|
|
||||||
We still think and speak in simple text, not in HTML or RDF.<br>
|
|
||||||
The most advanced human will probably not shout `<h1>FIRE!</h1>` in case of emergency.<br>
|
|
||||||
Given the new dawn of (non-keyboard) XR interfaces, keeping text as is (not obscuring with markup) is preferred.<br>
|
|
||||||
Ideally metadata must come **later with** text, but not **obfuscate** the text, or **in another** file.<br>
|
|
||||||
|
|
||||||
> Humans first, machines (AI) later ([core principle](#core-principle)
|
|
||||||
|
|
||||||
This way:
|
|
||||||
|
|
||||||
1. XR Fragments allows <b id="tagging-text">hasslefree XR text tagging</b>, using BibTeX metadata **at the end of content** (like [visual-meta](https://visual.meta.info)).
|
|
||||||
1. XR Fragments allows hasslefree <a href="#textual-tag">textual tagging</a>, <a href="#spatial-tag">spatial tagging</a>, and <a href="#supra-tagging">supra tagging</a>, by mapping 3D/text object (class)names using BibTeX 'tags'
|
|
||||||
1. Bibs/BibTeX-appendices is first-choice **requestless metadata**-layer for XR text, HTML/RDF/JSON is great (but fits better in the application-layer)
|
|
||||||
1. Default font (unless specified otherwise) is a modern monospace font, for maximized tabular expressiveness (see [the core principle](#core-principle)).
|
|
||||||
1. anti-pattern: hardcoupling a mandatory **obtrusive markuplanguage** or framework with an XR browsers (HTML/VRML/Javascript) (see [the core principle](#core-principle))
|
|
||||||
1. anti-pattern: limiting human introspection, by immediately funneling human thought into typesafe, precise, pre-categorized metadata like RDF (see [the core principle](#core-principle))
|
|
||||||
|
|
||||||
This allows recursive connections between text itself, as well as 3D objects and vice versa, using **BibTags** :
|
|
||||||
|
|
||||||
```
|
|
||||||
+---------------------------------------------+ +------------------+
|
|
||||||
| My Notes | | / \ |
|
|
||||||
| | | / \ |
|
|
||||||
| The houses here are built in baroque style. | | /house\ |
|
|
||||||
| | | |_____| |
|
|
||||||
| | +---------|--------+
|
|
||||||
| @house{houses, >----'house'--------| class/name match?
|
|
||||||
| url = {#.house} >----'houses'-------` class/name match?
|
|
||||||
| } |
|
|
||||||
+---------------------------------------------+
|
|
||||||
```
|
|
||||||
|
|
||||||
> The enduser can add connections by speaking/typing/scanning [hashtagbibs](https://github.com/coderofsalvation/hashtagbibs) which the XR Browser can expand to BibTags.
|
|
||||||
|
|
||||||
This allows instant realtime tagging of objects at various scopes:
|
|
||||||
|
|
||||||
| scope | matching algo |
|
|
||||||
|---------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| <b id="textual-tagging">textual</b> | text containing 'houses' is now automatically tagged with 'house' (incl. plaintext `src` child nodes) |
|
|
||||||
| <b id="spatial-tagging">spatial</b> | spatial object(s) with `"class":"house"` (because of `{#.house}`) are now automatically tagged with 'house' (incl. child nodes) |
|
|
||||||
| <b id="supra-tagging">supra</b> | text- or spatial-object(s) (non-descendant nodes) elsewhere, named 'house', are automatically tagged with 'house' (current node to root node) |
|
|
||||||
| <b id="omni-tagging">omni</b> | text- or spatial-object(s) (non-descendant nodes) elsewhere, containing class/name 'house', are automatically tagged with 'house' (too node to all nodes) |
|
|
||||||
| <b id="infinite-tagging">infinite</b> | text- or spatial-object(s) (non-descendant nodes) elsewhere, containing class/name 'house' or 'houses', are automatically tagged with 'house' (too node to all nodes) |
|
|
||||||
|
|
||||||
This empowers the enduser spatial expressiveness (see [the core principle](#core-principle)): spatial wires can be rendered, words can be highlighted, spatial objects can be highlighted/moved/scaled, links can be manipulated by the user.<br>
|
|
||||||
The simplicity of appending BibTeX 'tags' (humans first, machines later) is also demonstrated by [visual-meta](https://visual-meta.info) in greater detail.
|
|
||||||
|
|
||||||
1. The XR Browser needs to adjust tag-scope based on the endusers needs/focus (infinite tagging only makes sense when environment is scaled down significantly)
|
|
||||||
1. The XR Browser should always allow the human to view/edit the metadata, by clicking 'toggle metadata' on the 'back' (contextmenu e.g.) of any XR text, anywhere anytime.
|
|
||||||
|
|
||||||
> NOTE: infinite matches both 'house' and 'houses' in text, as well as spatial objects with `"class":"house"` or name "house". This multiplexing of id/category is deliberate because of [the core principle](#core-principle).
|
|
||||||
|
|
||||||
## Default Data URI mimetype
|
|
||||||
|
|
||||||
The `src`-values work as expected (respecting mime-types), however:
|
|
||||||
|
|
||||||
The XR Fragment specification bumps the traditional default browser-mimetype
|
|
||||||
|
|
||||||
`text/plain;charset=US-ASCII`
|
|
||||||
|
|
||||||
to a hashtagbib(tex)-friendly one:
|
|
||||||
|
|
||||||
`text/plain;charset=utf-8;bib=^@`
|
|
||||||
|
|
||||||
This indicates that:
|
|
||||||
|
|
||||||
* utf-8 is supported by default
|
|
||||||
* [hashtagbibs](https://github.com/coderofsalvation/hashtagbibs) are expanded to [bibtags](https://en.wikipedia.org/wiki/BibTeX)
|
|
||||||
* lines matching regex `^@` will automatically get filtered out, in order to:
|
|
||||||
* links between textual/spatial objects can automatically be detected
|
|
||||||
* bibtag appendices ([visual-meta](https://visual-meta.info) can be interpreted e.g.
|
|
||||||
|
|
||||||
> for more info on this mimetype see [bibs](https://github.com/coderofsalvation/hashtagbibs)
|
|
||||||
|
|
||||||
Advantages:
|
|
||||||
|
|
||||||
* out-of-the-box (de)multiplex human text and metadata in one go (see [the core principle](#core-principle))
|
|
||||||
* no network-overhead for metadata (see [the core principle](#core-principle))
|
|
||||||
* ensuring high FPS: HTML/RDF historically is too 'requesty'/'parsy' for game studios
|
|
||||||
* rich send/receive/copy-paste everywhere by default, metadata being retained (see [the core principle](#core-principle))
|
|
||||||
* netto result: less webservices, therefore less servers, and overall better FPS in XR
|
|
||||||
|
|
||||||
> This significantly expands expressiveness and portability of human tagged text, by **postponing machine-concerns to the end of the human text** in contrast to literal interweaving of content and markupsymbols (or extra network requests, webservices e.g.).
|
|
||||||
|
|
||||||
For all other purposes, regular mimetypes can be used (but are not required by the spec).<br>
|
|
||||||
|
|
||||||
## URL and Data URI
|
|
||||||
|
|
||||||
```
|
|
||||||
+--------------------------------------------------------------+ +------------------------+
|
|
||||||
| | | author.com/article.txt |
|
|
||||||
| index.gltf | +------------------------+
|
|
||||||
| │ | | |
|
|
||||||
| ├── ◻ article_canvas | | Hello friends. |
|
|
||||||
| │ └ src: ://author.com/article.txt | | |
|
|
||||||
| │ | | @friend{friends |
|
|
||||||
| └── ◻ note_canvas | | ... |
|
|
||||||
| └ src:`data:welcome human\n@...` | | } |
|
|
||||||
| | +------------------------+
|
|
||||||
| |
|
|
||||||
+--------------------------------------------------------------+
|
|
||||||
```
|
|
||||||
|
|
||||||
The enduser will only see `welcome human` and `Hello friends` rendered spatially.
|
|
||||||
The beauty is that text (AND visual-meta) in Data URI promotes rich copy-paste.
|
|
||||||
In both cases, the text gets rendered immediately (onto a plane geometry, hence the name '_canvas').
|
|
||||||
The XR Fragment-compatible browser can let the enduser access visual-meta(data)-fields after interacting with the object (contextmenu e.g.).
|
|
||||||
|
|
||||||
> additional tagging using [bibs](https://github.com/coderofsalvation/hashtagbibs): to tag spatial object `note_canvas` with 'todo', the enduser can type or speak `@note_canvas@todo`
|
|
||||||
|
|
||||||
The mapping between 3D objects and text (src-data) is simple (the :
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
```
|
|
||||||
+------------------------------------------------+
|
|
||||||
| |
|
|
||||||
| index.gltf |
|
|
||||||
| │ |
|
|
||||||
| └── ◻ rentalhouse |
|
|
||||||
| └ class: house <----------------- matches -------+
|
|
||||||
| └ ◻ note | |
|
|
||||||
| └ src:`data: todo: call owner | hashtagbib |
|
|
||||||
| #owner@house@todo | ----> expands to @house{owner,
|
|
||||||
| | bibtex: }
|
|
||||||
| ` | @contact{
|
|
||||||
+------------------------------------------------+ }
|
|
||||||
```
|
|
||||||
|
|
||||||
Bi-directional mapping between 3D object names and/or classnames and text using bibs,BibTags & XR Fragments, allows for rich interlinking between text and 3D objects:
|
|
||||||
|
|
||||||
1. When the user surfs to https://.../index.gltf#rentalhouse the XR Fragments-parser points the enduser to the rentalhouse object, and can show contextual info about it.
|
|
||||||
2. When (partial) remote content is embedded thru XR Fragment queries (see XR Fragment queries), indirectly related metadata can be embedded along.
|
|
||||||
|
|
||||||
## Bibs & BibTeX: lowest common denominator for linking data
|
|
||||||
|
|
||||||
> "When a car breaks down, the ones **without** turbosupercharger are easier to fix"
|
|
||||||
|
|
||||||
Unlike XML or JSON, BibTex is typeless, unnested, and uncomplicated, hence a great advantage for introspection.<br>
|
|
||||||
It's a missing sensemaking precursor to extrospective RDF.<br>
|
|
||||||
BibTeX-appendices are already used in the digital AND physical world (academic books, [visual-meta](https://visual-meta.info)), perhaps due to its terseness & simplicity.<br>
|
|
||||||
In that sense, it's one step up from the `.ini` fileformat (which has never leaked into the physical world like BibTex):
|
|
||||||
|
|
||||||
1. <b id="frictionless-copy-paste">frictionless copy/pasting</b> (by humans) of (unobtrusive) content AND metadata
|
|
||||||
1. an introspective 'sketchpad' for metadata, which can (optionally) mature into RDF later
|
|
||||||
|
|
||||||
| characteristic | UTF8 Plain Text (with BibTeX) | RDF |
|
|
||||||
|------------------------------------|-------------------------------|---------------------------|
|
|
||||||
| perspective | introspective | extrospective |
|
|
||||||
| structure | fuzzy (sensemaking) | precise |
|
|
||||||
| space/scope | local | world |
|
|
||||||
| everything is text (string) | yes | no |
|
|
||||||
| voice/paper-friendly | [bibs](https://github.com/coderofsalvation/hashtagbibs) | no |
|
|
||||||
| leaves (dictated) text intact | yes | no |
|
|
||||||
| markup language | just an appendix | ~4 different |
|
|
||||||
| polyglot format | no | yes |
|
|
||||||
| easy to copy/paste content+metadata| yes | up to application |
|
|
||||||
| easy to write/repair for layman | yes | depends |
|
|
||||||
| easy to (de)serialize | yes (fits on A4 paper) | depends |
|
|
||||||
| infrastructure | selfcontained (plain text) | (semi)networked |
|
|
||||||
| freeform tagging/annotation | yes, terse | yes, verbose |
|
|
||||||
| can be appended to text-content | yes | up to application |
|
|
||||||
| copy-paste text preserves metadata | yes | up to application |
|
|
||||||
| emoji | yes | depends on encoding |
|
|
||||||
| predicates | free | semi pre-determined |
|
|
||||||
| implementation/network overhead | no | depends |
|
|
||||||
| used in (physical) books/PDF | yes (visual-meta) | no |
|
|
||||||
| terse non-verb predicates | yes | no |
|
|
||||||
| nested structures | no (but: BibTex rulers) | yes |
|
|
||||||
|
|
||||||
> To keep XR Fragments a lightweight spec, BibTeX is used for rudimentary text/spatial tagging (not JSON, RDF or a scripting language because they're harder to write/speak/repair.).
|
|
||||||
|
|
||||||
Applications are also free to attach any JSON(LD / RDF) to spatial objects using custom properties (but is not interpreted by this spec).
|
|
||||||
|
|
||||||
## XR Text example parser
|
|
||||||
|
|
||||||
|
|
||||||
1. The XR Fragments spec does not aim to harden the BiBTeX format
|
|
||||||
2. respect multi-line BibTex values because of [the core principle](#core-principle)
|
|
||||||
3. Expand hashtag(bibs) and rulers (like `${visual-meta-start}`) according to the [hashtagbibs spec](https://github.com/coderofsalvation/hashtagbibs)
|
|
||||||
4. BibTeX snippets should always start in the beginning of a line (regex: ^@), hence mimetype `text/plain;charset=utf-8;bib=^@`
|
|
||||||
|
|
||||||
Here's an XR Text (de)multiplexer in javascript, which ticks all the above boxes:
|
|
||||||
|
|
||||||
```
|
|
||||||
xrtext = {
|
|
||||||
|
|
||||||
expandBibs: (text) => {
|
|
||||||
let bibs = { regex: /(#[a-zA-Z0-9_+@\-]+(#)?)/g, tags: {}}
|
|
||||||
text.replace( bibs.regex , (m,k,v) => {
|
|
||||||
tok = m.substr(1).split("@")
|
|
||||||
match = tok.shift()
|
|
||||||
if( tok.length ) tok.map( (t) => bibs.tags[t] = `@${t}{${match},\n}` )
|
|
||||||
else if( match.substr(-1) == '#' )
|
|
||||||
bibs.tags[match] = `@{${match.replace(/#/,'')}}`
|
|
||||||
else bibs.tags[match] = `@${match}{${match},\n}`
|
|
||||||
})
|
|
||||||
return text.replace( bibs.regex, '') + Object.values(bibs.tags).join('\n')
|
|
||||||
},
|
|
||||||
|
|
||||||
decode: (str) => {
|
|
||||||
// bibtex: ↓@ ↓<tag|tag{phrase,|{ruler}> ↓property ↓end
|
|
||||||
let pat = [ /@/, /^\S+[,{}]/, /},/, /}/ ]
|
|
||||||
let tags = [], text='', i=0, prop=''
|
|
||||||
let lines = xrtext.expandBibs(str).replace(/\r?\n/g,'\n').split(/\n/)
|
|
||||||
for( let i = 0; i < lines.length && !String(lines[i]).match( /^@/ ); i++ )
|
|
||||||
text += lines[i]+'\n'
|
|
||||||
|
|
||||||
bibtex = lines.join('\n').substr( text.length )
|
|
||||||
bibtex.split( pat[0] ).map( (t) => {
|
|
||||||
try{
|
|
||||||
let v = {}
|
|
||||||
if( !(t = t.trim()) ) return
|
|
||||||
if( tag = t.match( pat[1] ) ) tag = tag[0]
|
|
||||||
if( tag.match( /^{.*}$/ ) ) return tags.push({ruler:tag})
|
|
||||||
t = t.substr( tag.length )
|
|
||||||
t.split( pat[2] )
|
|
||||||
.map( kv => {
|
|
||||||
if( !(kv = kv.trim()) || kv == "}" ) return
|
|
||||||
v[ kv.match(/\s?(\S+)\s?=/)[1] ] = kv.substr( kv.indexOf("{")+1 )
|
|
||||||
})
|
|
||||||
tags.push( { k:tag, v } )
|
|
||||||
}catch(e){ console.error(e) }
|
|
||||||
})
|
|
||||||
return {text, tags}
|
|
||||||
},
|
|
||||||
|
|
||||||
encode: (text,tags) => {
|
|
||||||
let str = text+"\n"
|
|
||||||
for( let i in tags ){
|
|
||||||
let item = tags[i]
|
|
||||||
if( item.ruler ){
|
|
||||||
str += `@${item.ruler}\n`
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
str += `@${item.k}\n`
|
|
||||||
for( let j in item.v ) str += ` ${j} = {${item.v[j]}}\n`
|
|
||||||
str += `}\n`
|
|
||||||
}
|
|
||||||
return str
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
The above functions (de)multiplexe text/metadata, expands bibs, (de)serialize bibtex (and all fits more or less on one A4 paper)
|
|
||||||
|
|
||||||
> above can be used as a startingpoint for LLVM's to translate/steelman to a more formal form/language.
|
|
||||||
|
|
||||||
```
|
|
||||||
str = `
|
|
||||||
hello world
|
|
||||||
here are some hashtagbibs followed by bibtex:
|
|
||||||
|
|
||||||
#world
|
|
||||||
#hello@greeting
|
|
||||||
#another-section#
|
|
||||||
|
|
||||||
@{some-section}
|
|
||||||
@flap{
|
|
||||||
asdf = {23423}
|
|
||||||
}`
|
|
||||||
|
|
||||||
var {tags,text} = xrtext.decode(str) // demultiplex text & bibtex
|
|
||||||
tags.find( (t) => t.k == 'flap{' ).v.asdf = 1 // edit tag
|
|
||||||
tags.push({ k:'bar{', v:{abc:123} }) // add tag
|
|
||||||
console.log( xrtext.encode(text,tags) ) // multiplex text & bibtex back together
|
|
||||||
```
|
|
||||||
This expands to the following (hidden by default) BibTex appendix:
|
|
||||||
|
|
||||||
```
|
|
||||||
hello world
|
|
||||||
here are some hashtagbibs followed by bibtex:
|
|
||||||
|
|
||||||
@{some-section}
|
|
||||||
@flap{
|
|
||||||
asdf = {1}
|
|
||||||
}
|
|
||||||
@world{world,
|
|
||||||
}
|
|
||||||
@greeting{hello,
|
|
||||||
}
|
|
||||||
@{another-section}
|
|
||||||
@bar{
|
|
||||||
abc = {123}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
# HYPER copy/paste
|
|
||||||
|
|
||||||
The previous example, offers something exciting compared to simple copy/paste of 3D objects or text.
|
|
||||||
XR Text according to the XR Fragment spec, allows HYPER-copy/paste: time, space and text interlinked.
|
|
||||||
Therefore, the enduser in an XR Fragment-compatible browser can copy/paste/share data in these ways:
|
|
||||||
|
|
||||||
1. time/space: 3D object (current animation-loop)
|
|
||||||
1. text: TeXt object (including BibTeX/visual-meta if any)
|
|
||||||
1. interlinked: Collected objects by visual-meta tag
|
|
||||||
|
|
||||||
# Security Considerations
|
|
||||||
|
|
||||||
Since XR Text contains metadata too, the user should be able to set up tagging-rules, so the copy-paste feature can :
|
|
||||||
|
|
||||||
* filter out sensitive data when copy/pasting (XR text with `class:secret` e.g.)
|
|
||||||
|
|
||||||
# IANA Considerations
|
|
||||||
|
|
||||||
This document has no IANA actions.
|
|
||||||
|
|
||||||
# Acknowledgments
|
|
||||||
|
|
||||||
TODO acknowledge.
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
35994
doc/RFC_XR_Fragments.svg
35994
doc/RFC_XR_Fragments.svg
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 1,002 KiB |
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,465 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>XR Macros</title>
|
|
||||||
<meta name="GENERATOR" content="github.com/mmarkdown/mmark Mmark Markdown Processor - mmark.miek.nl">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<!-- for annotated version see: https://raw.githubusercontent.com/ietf-tools/rfcxml-templates-and-schemas/main/draft-rfcxml-general-template-annotated-00.xml -->
|
|
||||||
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
body{
|
|
||||||
font-family: monospace;
|
|
||||||
max-width: 1000px;
|
|
||||||
font-size: 15px;
|
|
||||||
padding: 0% 20%;
|
|
||||||
line-height: 30px;
|
|
||||||
color:#555;
|
|
||||||
background:#F0F0F3
|
|
||||||
}
|
|
||||||
h1 { margin-top:40px; }
|
|
||||||
pre{ line-height:18px; }
|
|
||||||
a,a:visited,a:active{ color: #70f; }
|
|
||||||
code{
|
|
||||||
border: 1px solid #AAA;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0px 5px 2px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre{
|
|
||||||
line-height: 18px;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
pre + code {
|
|
||||||
background:#DDD;
|
|
||||||
}
|
|
||||||
pre>code{
|
|
||||||
border:none;
|
|
||||||
border-radius:0px;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
blockquote{
|
|
||||||
padding-left: 30px;
|
|
||||||
margin: 0;
|
|
||||||
border-left: 5px solid #CCC;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
border-bottom: 1px solid #000;
|
|
||||||
text-align: left;
|
|
||||||
padding-right:45px;
|
|
||||||
padding-left:7px;
|
|
||||||
background: #DDD;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
border-bottom: 1px solid #CCC;
|
|
||||||
font-size:13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<h1>XR Macros</h1>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
stream: IETF
|
|
||||||
area: Internet
|
|
||||||
status: informational
|
|
||||||
author: Leon van Kammen
|
|
||||||
date: 2023-04-12T00:00:00Z
|
|
||||||
workgroup: Internet Engineering Task Force
|
|
||||||
value: draft-XRMACROS-leonvankammen-00
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h1 class="special" id="abstract">Abstract</h1>
|
|
||||||
|
|
||||||
<p>This draft offers a specification for embedding macros in existing 3D scenes/assets, to offer simple interactions and configure the renderer further.<br>
|
|
||||||
Together with URI Fragments, it allows for rich immersive experiences without the need of a complicated sandboxed scripting languages.</p>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p>Almost every idea in this document is demonstrated at <a href="https://xrfragment.org">https://xrfragment.org</a>, as this spec was created during the <a href="https://xrfragment.org">XR Fragments</a> spec.</p>
|
|
||||||
</blockquote>
|
|
||||||
<section data-matter="main">
|
|
||||||
<h1 id="introduction">Introduction</h1>
|
|
||||||
|
|
||||||
<p>How can we add more features to existing text & 3D scenes, without introducing new dataformats?<br>
|
|
||||||
Historically, there’s many attempts to create the ultimate markuplanguage or 3D fileformat.<br>
|
|
||||||
Their lowest common denominator is: (co)authoring using plain text.<br>
|
|
||||||
Therefore, XR Macros allows us to enrich/connect existing dataformats, by offering a polyglot notation based on existing notations:<br></p>
|
|
||||||
|
|
||||||
<ol>
|
|
||||||
<li>getting/setting common used 3D properties using querystring- or JSON-notation</li>
|
|
||||||
<li>targeting 3D properties using the lightweight query notation present in <a href="https://xrfragment.org">XR Fragments</a></li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p>NOTE: The chapters in this document are ordered from highlevel to lowlevel (technical) as much as possible</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<h1 id="core-principle">Core principle</h1>
|
|
||||||
|
|
||||||
<ol>
|
|
||||||
<li>XR Macros use querystrings, but are HTML-agnostic (though pseudo-XR Fragment browsers <strong>can</strong> be implemented on top of HTML/Javascript).</li>
|
|
||||||
<li>An XR Macro is 3D metadata which starts with ‘!’ (<code>!clickme: fog=0,10</code> e.g.)</li>
|
|
||||||
<li>Metadata-values can contain the <code>|</code> symbol to 🎲 roundrobin variable values (<code>!toggleme: fog=0,10|fog=0,1000</code> e.g.)</li>
|
|
||||||
<li>XR Macros acts as simple eventhandlers for URI Fragments: they are automatically published on the (<a href="https://xrfragment.org">XR Fragments</a>) hashbus, to act as events (so more serious scripting languages can react to them as well).</li>
|
|
||||||
<li>XR Macros can assign object metadata (<code>!setlocal: foo=1</code> writes <code>foo:1</code> metadata to the object containing the <code>!setlocal</code> metadata)</li>
|
|
||||||
<li>XR Macros can assign global metadata (<code>!setfoo: #foo=1</code> writes <code>foo:1</code> metadata to the root scene-node)</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p>These very simple principles allow for rich interactions and dynamic querying</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<h1 id="conventions-and-definitions">Conventions and Definitions</h1>
|
|
||||||
|
|
||||||
<p>See appendix below in case certain terms are not clear.</p>
|
|
||||||
|
|
||||||
<h1 id="list-of-xr-macros">List of XR Macros</h1>
|
|
||||||
|
|
||||||
<p>(XR) Macros can be embedded in 3D assets/scenes.<br>
|
|
||||||
Macros enrich existing spatial content with a lowcode, limited logic-layer, by recursive (economic) use of the querystring syntax (which search engines and <a href="https://xrfragment.org">XR Fragments</a> already uses.<br>
|
|
||||||
This is done by allowing string/integer variables, and the <code>|</code> symbol to roundrobin variable values.<br>
|
|
||||||
Macros also act as events, so more serious scripting languages can react to them as well.<br></p>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>key</th>
|
|
||||||
<th>type</th>
|
|
||||||
<th>example (JSON)</th>
|
|
||||||
<th>function</th>
|
|
||||||
<th>existing compatibility</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>@bg</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>"@bg":"#cube"</code></td>
|
|
||||||
<td>bg: binds fog near/far based to cube x/y/z (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><code>@fog</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>"@fog":"#cube"</code></td>
|
|
||||||
<td>fog: binds fog near/far based to cube x/y (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><code>@scroll</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>"@scroll":"#cube"</code></td>
|
|
||||||
<td>texturescrolling: binds texture x/y/rot based to cube x/y/z (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><code>@emissive</code></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><code>"@emissive":"#cube"</code></td>
|
|
||||||
<td>day/night/mood: binds material’s emissive value to cube x/y/z (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h2 id="usecase-click-object">Usecase: click object</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>!clickme</td>
|
|
||||||
<td>bg=1,1,1&foo=2</td>
|
|
||||||
<td>object clicked</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h2 id="usecase-conditional-click-object">Usecase: conditional click object</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>#</td>
|
|
||||||
<td>foo=1</td>
|
|
||||||
<td>scene</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!clickme</td>
|
|
||||||
<td>q=foo>2&bg=1,1,1</td>
|
|
||||||
<td>object clicked and foo > 2</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p>when a user clicks an object with the custom properties above, it should set the backgroundcolor to <code>1,1,1</code> when <code>foo</code> is greater than <code>2</code> (see previous example)</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<h2 id="usecase-click-object-roundrobin">Usecase: click object (roundrobin)</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>!cycleme</td>
|
|
||||||
<td>day|noon|night</td>
|
|
||||||
<td>object clicked</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>day</td>
|
|
||||||
<td>bg=1,1,1</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>noon</td>
|
|
||||||
<td>bg=0.5,0.5,0.5</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>night</td>
|
|
||||||
<td>bg=0,0,0&foo=2</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p>when a user clicks an object with the custom properties above, it should trigger either <code>day</code> <code>noon</code> or <code>night</code> in roundrobin fashion.</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<h2 id="usecase-click-object-or-uri-fragment-and-scene-load-trigger">Usecase: click object or URI fragment, and scene load trigger</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>#</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>scene loaded</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>#random</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>URL contains #random</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!random</td>
|
|
||||||
<td>day|noon|night</td>
|
|
||||||
<td>#random, # or click</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>day</td>
|
|
||||||
<td>bg=1,1,1</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>noon</td>
|
|
||||||
<td>bg=0.5,0.5,0.5</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>night</td>
|
|
||||||
<td>bg=0,0,0&foo=2</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h2 id="usecase-present-context-menu-with-options">Usecase: present context menu with options</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>!random</td>
|
|
||||||
<td>!day</td>
|
|
||||||
<td>!noon</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!day</td>
|
|
||||||
<td>bg=1,1,1</td>
|
|
||||||
<td>clicked in contextmenu</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!noon</td>
|
|
||||||
<td>bg=0.5,0.5,0.5</td>
|
|
||||||
<td>clicked in contextmenu</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!night</td>
|
|
||||||
<td>bg=0,0,0&foo=2</td>
|
|
||||||
<td>clicked in contextmenu</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p>When interacting with an object with more than one <code>!</code>-macro, the XR Browser should offer a contextmenu to execute a macro.</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<p>In a similar way, when <strong>any</strong> <code>!</code>-macro is present on the sceneroot, the XR Browser should offer a context-menu to execute those macro’s.</p>
|
|
||||||
|
|
||||||
<h2 id="event-bubble-flow">Event Bubble-flow</h2>
|
|
||||||
|
|
||||||
<p>click object with (<code>!clickme</code>:<code>AR</code> or <code>!clickme</code>: <code>!reset</code> e.g.)</p>
|
|
||||||
|
|
||||||
<pre><code> ◻
|
|
||||||
│
|
|
||||||
└── does current object contain this property-key (`AR` or `!reset` e.g.)?
|
|
||||||
└── no: is there any (root)object containing property `AR`
|
|
||||||
└── yes: evaluate its (roundrobin) XR macro-value(s) (and exit)
|
|
||||||
└── no: trigger URL: #AR
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<p>click object with (<code>!clickme</code>:<code>#AR|#VR</code> e.g.)</p>
|
|
||||||
|
|
||||||
<pre><code> ◻
|
|
||||||
│
|
|
||||||
└── apply the roundrobin (rotate the options, value `#AR` becomes `#VR` upon next click)
|
|
||||||
└── is there any object with property-key (`#AR` e.g.)?
|
|
||||||
└── no: just update the URL to `#AR`
|
|
||||||
└── yes: apply its value to the scene, and update the URL to `#AR`
|
|
||||||
|
|
||||||
click object with (`!clickme`:`!foo|!bar|!flop` e.g.)
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<p>◻
|
|
||||||
│<br>
|
|
||||||
└── apply the roundrobin (rotate the options, value <code>!foo</code> becomes <code>!bar</code> upon next click)
|
|
||||||
└── is there any object with property-key (<code>!foo</code> e.g.)?
|
|
||||||
└── no: do nothing
|
|
||||||
└── yes: apply its value to the scene
|
|
||||||
“`</p>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
<p>Note that only macro’s can trigger roundrobin values or contextmenu’s, as well as roundrobin values never ending up in the toplevel URL.</p>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<h1 id="security-considerations">Security Considerations</h1>
|
|
||||||
|
|
||||||
<h1 id="iana-considerations">IANA Considerations</h1>
|
|
||||||
|
|
||||||
<p>This document has no IANA actions.</p>
|
|
||||||
|
|
||||||
<h1 id="acknowledgments">Acknowledgments</h1>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://nlnet.nl">NLNET</a></li>
|
|
||||||
<li><a href="https://futureoftext.org">Future of Text</a></li>
|
|
||||||
<li><a href="https://visual-meta.info">visual-meta.info</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h1 id="appendix-definitions">Appendix: Definitions</h1>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>definition</th>
|
|
||||||
<th>explanation</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>scene</td>
|
|
||||||
<td>a (local/remote) 3D scene or 3D file (index.gltf e.g.)</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>3D object</td>
|
|
||||||
<td>an object inside a scene characterized by vertex-, face- and customproperty data.</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>XR fragments</td>
|
|
||||||
<td>URI Fragment with spatial hints like <code>#pos=0,0,0&t=1,100</code> e.g.</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>query</td>
|
|
||||||
<td>an URI Fragment-operator which queries object(s) from a scene like <code>#q=cube</code></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>FPS</td>
|
|
||||||
<td>frames per second in spatial experiences (games,VR,AR e.g.), should be as high as possible</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><code>◻</code></td>
|
|
||||||
<td>ascii representation of an 3D object/mesh</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>(un)obtrusive</td>
|
|
||||||
<td>obtrusive: wrapping human text/thought in XML/HTML/JSON obfuscates human text into a salad of machine-symbols and words</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
@ -1,251 +0,0 @@
|
||||||
%%%
|
|
||||||
Title = "XR Macros"
|
|
||||||
area = "Internet"
|
|
||||||
workgroup = "Internet Engineering Task Force"
|
|
||||||
|
|
||||||
[seriesInfo]
|
|
||||||
name = "XR-Macros"
|
|
||||||
value = "draft-XRMACROS-leonvankammen-00"
|
|
||||||
stream = "IETF"
|
|
||||||
status = "informational"
|
|
||||||
|
|
||||||
date = 2023-04-12T00:00:00Z
|
|
||||||
|
|
||||||
[[author]]
|
|
||||||
initials="L.R."
|
|
||||||
surname="van Kammen"
|
|
||||||
fullname="L.R. van Kammen"
|
|
||||||
|
|
||||||
%%%
|
|
||||||
|
|
||||||
<!-- for annotated version see: https://raw.githubusercontent.com/ietf-tools/rfcxml-templates-and-schemas/main/draft-rfcxml-general-template-annotated-00.xml -->
|
|
||||||
|
|
||||||
<!--{
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
body{
|
|
||||||
font-family: monospace;
|
|
||||||
max-width: 1000px;
|
|
||||||
font-size: 15px;
|
|
||||||
padding: 0% 20%;
|
|
||||||
line-height: 30px;
|
|
||||||
color:#555;
|
|
||||||
background:#F0F0F3
|
|
||||||
}
|
|
||||||
h1 { margin-top:40px; }
|
|
||||||
pre{ line-height:18px; }
|
|
||||||
a,a:visited,a:active{ color: #70f; }
|
|
||||||
code{
|
|
||||||
border: 1px solid #AAA;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0px 5px 2px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre{
|
|
||||||
line-height: 18px;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
pre + code {
|
|
||||||
background:#DDD;
|
|
||||||
}
|
|
||||||
pre>code{
|
|
||||||
border:none;
|
|
||||||
border-radius:0px;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
blockquote{
|
|
||||||
padding-left: 30px;
|
|
||||||
margin: 0;
|
|
||||||
border-left: 5px solid #CCC;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
border-bottom: 1px solid #000;
|
|
||||||
text-align: left;
|
|
||||||
padding-right:45px;
|
|
||||||
padding-left:7px;
|
|
||||||
background: #DDD;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
border-bottom: 1px solid #CCC;
|
|
||||||
font-size:13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<h1>XR Macros</h1>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
stream: IETF
|
|
||||||
area: Internet
|
|
||||||
status: informational
|
|
||||||
author: Leon van Kammen
|
|
||||||
date: 2023-04-12T00:00:00Z
|
|
||||||
workgroup: Internet Engineering Task Force
|
|
||||||
value: draft-XRMACROS-leonvankammen-00
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
|
|
||||||
}-->
|
|
||||||
|
|
||||||
.# Abstract
|
|
||||||
|
|
||||||
This draft offers a specification for embedding macros in existing 3D scenes/assets, to offer simple interactions and configure the renderer further.<br>
|
|
||||||
Together with URI Fragments, it allows for rich immersive experiences without the need of a complicated sandboxed scripting languages.
|
|
||||||
|
|
||||||
> Almost every idea in this document is demonstrated at [https://xrfragment.org](https://xrfragment.org), as this spec was created during the [XR Fragments](https://xrfragment.org) spec.
|
|
||||||
|
|
||||||
{mainmatter}
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
|
|
||||||
How can we add more features to existing text & 3D scenes, without introducing new dataformats?<br>
|
|
||||||
Historically, there's many attempts to create the ultimate markuplanguage or 3D fileformat.<br>
|
|
||||||
Their lowest common denominator is: (co)authoring using plain text.<br>
|
|
||||||
Therefore, XR Macros allows us to enrich/connect existing dataformats, by offering a polyglot notation based on existing notations:<br>
|
|
||||||
|
|
||||||
1. getting/setting common used 3D properties using querystring- or JSON-notation
|
|
||||||
1. targeting 3D properties using the lightweight query notation present in [XR Fragments](https://xrfragment.org)
|
|
||||||
|
|
||||||
> NOTE: The chapters in this document are ordered from highlevel to lowlevel (technical) as much as possible
|
|
||||||
|
|
||||||
# Core principle
|
|
||||||
|
|
||||||
1. XR Macros use querystrings, but are HTML-agnostic (though pseudo-XR Fragment browsers **can** be implemented on top of HTML/Javascript).
|
|
||||||
1. An XR Macro is 3D metadata which starts with '!' (`!clickme: fog=0,10` e.g.)
|
|
||||||
1. Metadata-values can contain the `|` symbol to 🎲 roundrobin variable values (`!toggleme: fog=0,10|fog=0,1000` e.g.)
|
|
||||||
1. XR Macros acts as simple eventhandlers for URI Fragments: they are automatically published on the ([XR Fragments](https://xrfragment.org)) hashbus, to act as events (so more serious scripting languages can react to them as well).
|
|
||||||
1. XR Macros can assign object metadata (`!setlocal: foo=1` writes `foo:1` metadata to the object containing the `!setlocal` metadata)
|
|
||||||
1. XR Macros can assign global metadata (`!setfoo: #foo=1` writes `foo:1` metadata to the root scene-node)
|
|
||||||
|
|
||||||
> These very simple principles allow for rich interactions and dynamic querying
|
|
||||||
|
|
||||||
# Conventions and Definitions
|
|
||||||
|
|
||||||
See appendix below in case certain terms are not clear.
|
|
||||||
|
|
||||||
# List of XR Macros
|
|
||||||
|
|
||||||
(XR) Macros can be embedded in 3D assets/scenes.<br>
|
|
||||||
Macros enrich existing spatial content with a lowcode, limited logic-layer, by recursive (economic) use of the querystring syntax (which search engines and [XR Fragments](https://xrfragment.org) already uses.<br>
|
|
||||||
This is done by allowing string/integer variables, and the `|` symbol to roundrobin variable values.<br>
|
|
||||||
Macros also act as events, so more serious scripting languages can react to them as well.<br>
|
|
||||||
|
|
||||||
| key | type | example (JSON) | function | existing compatibility |
|
|
||||||
|--------------|----------|------------------------|---------------------|----------------------------------------|
|
|
||||||
| `@bg` | string | `"@bg":"#cube"` | bg: binds fog near/far based to cube x/y/z (anim) values | custom property in 3D fileformats |
|
|
||||||
| `@fog` | string | `"@fog":"#cube"` | fog: binds fog near/far based to cube x/y (anim) values | custom property in 3D fileformats |
|
|
||||||
| `@scroll` | string | `"@scroll":"#cube"` | texturescrolling: binds texture x/y/rot based to cube x/y/z (anim) values | custom property in 3D fileformats |
|
|
||||||
| `@emissive` | string | `"@emissive":"#cube"` | day/night/mood: binds material's emissive value to cube x/y/z (anim) values | custom property in 3D fileformats |
|
|
||||||
|
|
||||||
## Usecase: click object
|
|
||||||
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
|-----------------|--------------------------|------------------------|
|
|
||||||
| !clickme | bg=1,1,1&foo=2 | object clicked |
|
|
||||||
|
|
||||||
## Usecase: conditional click object
|
|
||||||
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
|-----------------|--------------------------|-----------------------------|
|
|
||||||
| # | foo=1 | scene |
|
|
||||||
| !clickme | q=foo>2&bg=1,1,1 | object clicked and foo > 2 |
|
|
||||||
|
|
||||||
> when a user clicks an object with the custom properties above, it should set the backgroundcolor to `1,1,1` when `foo` is greater than `2` (see previous example)
|
|
||||||
|
|
||||||
## Usecase: click object (roundrobin)
|
|
||||||
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
|-----------------|--------------------------|------------------------|
|
|
||||||
| !cycleme | day|noon|night | object clicked |
|
|
||||||
| day | bg=1,1,1 | roundrobin |
|
|
||||||
| noon | bg=0.5,0.5,0.5 | roundrobin |
|
|
||||||
| night | bg=0,0,0&foo=2 | roundrobin |
|
|
||||||
|
|
||||||
> when a user clicks an object with the custom properties above, it should trigger either `day` `noon` or `night` in roundrobin fashion.
|
|
||||||
|
|
||||||
## Usecase: click object or URI fragment, and scene load trigger
|
|
||||||
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
|-----------------|--------------------------|------------------------|
|
|
||||||
| # | random | scene loaded |
|
|
||||||
| #random | random | URL contains #random |
|
|
||||||
| !random | day|noon|night | #random, # or click |
|
|
||||||
| day | bg=1,1,1 | roundrobin |
|
|
||||||
| noon | bg=0.5,0.5,0.5 | roundrobin |
|
|
||||||
| night | bg=0,0,0&foo=2 | roundrobin |
|
|
||||||
|
|
||||||
## Usecase: present context menu with options
|
|
||||||
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
|-----------------|--------------------------|------------------------|
|
|
||||||
| !random | !day|!noon|!night | clicked in contextmenu |
|
|
||||||
| !day | bg=1,1,1 | clicked in contextmenu |
|
|
||||||
| !noon | bg=0.5,0.5,0.5 | clicked in contextmenu |
|
|
||||||
| !night | bg=0,0,0&foo=2 | clicked in contextmenu |
|
|
||||||
|
|
||||||
> When interacting with an object with more than one `!`-macro, the XR Browser should offer a contextmenu to execute a macro.
|
|
||||||
|
|
||||||
In a similar way, when **any** `!`-macro is present on the sceneroot, the XR Browser should offer a context-menu to execute those macro's.
|
|
||||||
|
|
||||||
## Event Bubble-flow
|
|
||||||
|
|
||||||
click object with (`!clickme`:`AR` or `!clickme`: `!reset` e.g.)
|
|
||||||
```
|
|
||||||
◻
|
|
||||||
│
|
|
||||||
└── does current object contain this property-key (`AR` or `!reset` e.g.)?
|
|
||||||
└── no: is there any (root)object containing property `AR`
|
|
||||||
└── yes: evaluate its (roundrobin) XR macro-value(s) (and exit)
|
|
||||||
└── no: trigger URL: #AR
|
|
||||||
```
|
|
||||||
|
|
||||||
click object with (`!clickme`:`#AR|#VR` e.g.)
|
|
||||||
```
|
|
||||||
◻
|
|
||||||
│
|
|
||||||
└── apply the roundrobin (rotate the options, value `#AR` becomes `#VR` upon next click)
|
|
||||||
└── is there any object with property-key (`#AR` e.g.)?
|
|
||||||
└── no: just update the URL to `#AR`
|
|
||||||
└── yes: apply its value to the scene, and update the URL to `#AR`
|
|
||||||
|
|
||||||
click object with (`!clickme`:`!foo|!bar|!flop` e.g.)
|
|
||||||
```
|
|
||||||
◻
|
|
||||||
│
|
|
||||||
└── apply the roundrobin (rotate the options, value `!foo` becomes `!bar` upon next click)
|
|
||||||
└── is there any object with property-key (`!foo` e.g.)?
|
|
||||||
└── no: do nothing
|
|
||||||
└── yes: apply its value to the scene
|
|
||||||
```
|
|
||||||
|
|
||||||
> Note that only macro's can trigger roundrobin values or contextmenu's, as well as roundrobin values never ending up in the toplevel URL.
|
|
||||||
|
|
||||||
# Security Considerations
|
|
||||||
|
|
||||||
|
|
||||||
# IANA Considerations
|
|
||||||
|
|
||||||
This document has no IANA actions.
|
|
||||||
|
|
||||||
# Acknowledgments
|
|
||||||
|
|
||||||
* [NLNET](https://nlnet.nl)
|
|
||||||
* [Future of Text](https://futureoftext.org)
|
|
||||||
* [visual-meta.info](https://visual-meta.info)
|
|
||||||
|
|
||||||
# Appendix: Definitions
|
|
||||||
|
|
||||||
|definition | explanation |
|
|
||||||
|----------------------|-------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
|scene | a (local/remote) 3D scene or 3D file (index.gltf e.g.) |
|
|
||||||
|3D object | an object inside a scene characterized by vertex-, face- and customproperty data. |
|
|
||||||
|XR fragments | URI Fragment with spatial hints like `#pos=0,0,0&t=1,100` e.g. |
|
|
||||||
|query | an URI Fragment-operator which queries object(s) from a scene like `#q=cube` |
|
|
||||||
|FPS | frames per second in spatial experiences (games,VR,AR e.g.), should be as high as possible |
|
|
||||||
|`◻` | ascii representation of an 3D object/mesh |
|
|
||||||
|(un)obtrusive | obtrusive: wrapping human text/thought in XML/HTML/JSON obfuscates human text into a salad of machine-symbols and words |
|
|
||||||
|
|
||||||
|
|
@ -1,392 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Internet Engineering Task Force L.R. van Kammen
|
|
||||||
Internet-Draft 24 September 2025
|
|
||||||
Intended status: Informational
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
XR Macros
|
|
||||||
draft-XRMACROS-leonvankammen-00
|
|
||||||
|
|
||||||
Abstract
|
|
||||||
|
|
||||||
This draft offers a specification for embedding macros in existing 3D
|
|
||||||
scenes/assets, to offer simple interactions and configure the
|
|
||||||
renderer further.
|
|
||||||
Together with URI Fragments, it allows for rich immersive experiences
|
|
||||||
without the need of a complicated sandboxed scripting languages.
|
|
||||||
|
|
||||||
Almost every idea in this document is demonstrated at
|
|
||||||
https://xrfragment.org (https://xrfragment.org), as this spec was
|
|
||||||
created during the XR Fragments (https://xrfragment.org) spec.
|
|
||||||
|
|
||||||
Status of This Memo
|
|
||||||
|
|
||||||
This Internet-Draft is submitted in full conformance with the
|
|
||||||
provisions of BCP 78 and BCP 79.
|
|
||||||
|
|
||||||
Internet-Drafts are working documents of the Internet Engineering
|
|
||||||
Task Force (IETF). Note that other groups may also distribute
|
|
||||||
working documents as Internet-Drafts. The list of current Internet-
|
|
||||||
Drafts is at https://datatracker.ietf.org/drafts/current/.
|
|
||||||
|
|
||||||
Internet-Drafts are draft documents valid for a maximum of six months
|
|
||||||
and may be updated, replaced, or obsoleted by other documents at any
|
|
||||||
time. It is inappropriate to use Internet-Drafts as reference
|
|
||||||
material or to cite them other than as "work in progress."
|
|
||||||
|
|
||||||
This Internet-Draft will expire on 28 March 2026.
|
|
||||||
|
|
||||||
Copyright Notice
|
|
||||||
|
|
||||||
Copyright (c) 2025 IETF Trust and the persons identified as the
|
|
||||||
document authors. All rights reserved.
|
|
||||||
|
|
||||||
This document is subject to BCP 78 and the IETF Trust's Legal
|
|
||||||
Provisions Relating to IETF Documents (https://trustee.ietf.org/
|
|
||||||
license-info) in effect on the date of publication of this document.
|
|
||||||
Please review these documents carefully, as they describe your rights
|
|
||||||
and restrictions with respect to this document. Code Components
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
van Kammen Expires 28 March 2026 [Page 1]
|
|
||||||
|
|
||||||
Internet-Draft XR Macros September 2025
|
|
||||||
|
|
||||||
|
|
||||||
extracted from this document must include Revised BSD License text as
|
|
||||||
described in Section 4.e of the Trust Legal Provisions and are
|
|
||||||
provided without warranty as described in the Revised BSD License.
|
|
||||||
|
|
||||||
Table of Contents
|
|
||||||
|
|
||||||
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . 2
|
|
||||||
2. Core principle . . . . . . . . . . . . . . . . . . . . . . . 2
|
|
||||||
3. Conventions and Definitions . . . . . . . . . . . . . . . . . 3
|
|
||||||
4. List of XR Macros . . . . . . . . . . . . . . . . . . . . . . 3
|
|
||||||
4.1. Usecase: click object . . . . . . . . . . . . . . . . . . 4
|
|
||||||
4.2. Usecase: conditional click object . . . . . . . . . . . . 4
|
|
||||||
4.3. Usecase: click object (roundrobin) . . . . . . . . . . . 5
|
|
||||||
4.4. Usecase: click object or URI fragment, and scene load
|
|
||||||
trigger . . . . . . . . . . . . . . . . . . . . . . . . . 5
|
|
||||||
4.5. Usecase: present context menu with options . . . . . . . 6
|
|
||||||
4.6. Event Bubble-flow . . . . . . . . . . . . . . . . . . . . 6
|
|
||||||
5. Security Considerations . . . . . . . . . . . . . . . . . . . 7
|
|
||||||
6. IANA Considerations . . . . . . . . . . . . . . . . . . . . . 7
|
|
||||||
7. Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . 7
|
|
||||||
8. Appendix: Definitions . . . . . . . . . . . . . . . . . . . . 7
|
|
||||||
|
|
||||||
1. Introduction
|
|
||||||
|
|
||||||
How can we add more features to existing text & 3D scenes, without
|
|
||||||
introducing new dataformats?
|
|
||||||
Historically, there's many attempts to create the ultimate
|
|
||||||
markuplanguage or 3D fileformat.
|
|
||||||
Their lowest common denominator is: (co)authoring using plain text.
|
|
||||||
Therefore, XR Macros allows us to enrich/connect existing
|
|
||||||
dataformats, by offering a polyglot notation based on existing
|
|
||||||
notations:
|
|
||||||
|
|
||||||
1. getting/setting common used 3D properties using querystring- or
|
|
||||||
JSON-notation
|
|
||||||
2. targeting 3D properties using the lightweight query notation
|
|
||||||
present in XR Fragments (https://xrfragment.org)
|
|
||||||
|
|
||||||
| NOTE: The chapters in this document are ordered from highlevel to
|
|
||||||
| lowlevel (technical) as much as possible
|
|
||||||
|
|
||||||
2. Core principle
|
|
||||||
|
|
||||||
1. XR Macros use querystrings, but are HTML-agnostic (though pseudo-
|
|
||||||
XR Fragment browsers *can* be implemented on top of HTML/
|
|
||||||
Javascript).
|
|
||||||
2. An XR Macro is 3D metadata which starts with '!' (!clickme:
|
|
||||||
fog=0,10 e.g.)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
van Kammen Expires 28 March 2026 [Page 2]
|
|
||||||
|
|
||||||
Internet-Draft XR Macros September 2025
|
|
||||||
|
|
||||||
|
|
||||||
3. Metadata-values can contain the | symbol to 🎲 roundrobin variable
|
|
||||||
values (!toggleme: fog=0,10|fog=0,1000 e.g.)
|
|
||||||
4. XR Macros acts as simple eventhandlers for URI Fragments: they
|
|
||||||
are automatically published on the (XR Fragments
|
|
||||||
(https://xrfragment.org)) hashbus, to act as events (so more
|
|
||||||
serious scripting languages can react to them as well).
|
|
||||||
5. XR Macros can assign object metadata (!setlocal: foo=1 writes
|
|
||||||
foo:1 metadata to the object containing the !setlocal metadata)
|
|
||||||
6. XR Macros can assign global metadata (!setfoo: #foo=1 writes
|
|
||||||
foo:1 metadata to the root scene-node)
|
|
||||||
|
|
||||||
| These very simple principles allow for rich interactions and
|
|
||||||
| dynamic querying
|
|
||||||
|
|
||||||
3. Conventions and Definitions
|
|
||||||
|
|
||||||
See appendix below in case certain terms are not clear.
|
|
||||||
|
|
||||||
4. List of XR Macros
|
|
||||||
|
|
||||||
(XR) Macros can be embedded in 3D assets/scenes.
|
|
||||||
Macros enrich existing spatial content with a lowcode, limited logic-
|
|
||||||
layer, by recursive (economic) use of the querystring syntax (which
|
|
||||||
search engines and XR Fragments (https://xrfragment.org) already
|
|
||||||
uses.
|
|
||||||
This is done by allowing string/integer variables, and the | symbol
|
|
||||||
to roundrobin variable values.
|
|
||||||
Macros also act as events, so more serious scripting languages can
|
|
||||||
react to them as well.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
van Kammen Expires 28 March 2026 [Page 3]
|
|
||||||
|
|
||||||
Internet-Draft XR Macros September 2025
|
|
||||||
|
|
||||||
|
|
||||||
+=========+======+===================+=================+=============+
|
|
||||||
|key |type |example (JSON) |function |existing |
|
|
||||||
| | | | |compatibility|
|
|
||||||
+=========+======+===================+=================+=============+
|
|
||||||
|@bg |string|"@bg":"#cube" |bg: binds fog |custom |
|
|
||||||
| | | |near/far based to|property in |
|
|
||||||
| | | |cube x/y/z (anim)|3D |
|
|
||||||
| | | |values |fileformats |
|
|
||||||
+---------+------+-------------------+-----------------+-------------+
|
|
||||||
|@fog |string|"@fog":"#cube" |fog: binds fog |custom |
|
|
||||||
| | | |near/far based to|property in |
|
|
||||||
| | | |cube x/y (anim) |3D |
|
|
||||||
| | | |values |fileformats |
|
|
||||||
+---------+------+-------------------+-----------------+-------------+
|
|
||||||
|@scroll |string|"@scroll":"#cube" |texturescrolling:|custom |
|
|
||||||
| | | |binds texture |property in |
|
|
||||||
| | | |x/y/rot based to |3D |
|
|
||||||
| | | |cube x/y/z (anim)|fileformats |
|
|
||||||
| | | |values | |
|
|
||||||
+---------+------+-------------------+-----------------+-------------+
|
|
||||||
|@emissive|string|"@emissive":"#cube"|day/night/mood: |custom |
|
|
||||||
| | | |binds material's |property in |
|
|
||||||
| | | |emissive value to|3D |
|
|
||||||
| | | |cube x/y/z (anim)|fileformats |
|
|
||||||
| | | |values | |
|
|
||||||
+---------+------+-------------------+-----------------+-------------+
|
|
||||||
|
|
||||||
Table 1
|
|
||||||
|
|
||||||
4.1. Usecase: click object
|
|
||||||
|
|
||||||
+=================+================+================+
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
+=================+================+================+
|
|
||||||
| !clickme | bg=1,1,1&foo=2 | object clicked |
|
|
||||||
+-----------------+----------------+----------------+
|
|
||||||
|
|
||||||
Table 2
|
|
||||||
|
|
||||||
4.2. Usecase: conditional click object
|
|
||||||
|
|
||||||
+=================+==================+============================+
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
+=================+==================+============================+
|
|
||||||
| # | foo=1 | scene |
|
|
||||||
+-----------------+------------------+----------------------------+
|
|
||||||
| !clickme | q=foo>2&bg=1,1,1 | object clicked and foo > 2 |
|
|
||||||
+-----------------+------------------+----------------------------+
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
van Kammen Expires 28 March 2026 [Page 4]
|
|
||||||
|
|
||||||
Internet-Draft XR Macros September 2025
|
|
||||||
|
|
||||||
|
|
||||||
Table 3
|
|
||||||
|
|
||||||
| when a user clicks an object with the custom properties above, it
|
|
||||||
| should set the backgroundcolor to 1,1,1 when foo is greater than 2
|
|
||||||
| (see previous example)
|
|
||||||
|
|
||||||
4.3. Usecase: click object (roundrobin)
|
|
||||||
|
|
||||||
+=================+================+================+
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
+=================+================+================+
|
|
||||||
| !cycleme | day|noon|night | object clicked |
|
|
||||||
+-----------------+----------------+----------------+
|
|
||||||
| day | bg=1,1,1 | roundrobin |
|
|
||||||
+-----------------+----------------+----------------+
|
|
||||||
| noon | bg=0.5,0.5,0.5 | roundrobin |
|
|
||||||
+-----------------+----------------+----------------+
|
|
||||||
| night | bg=0,0,0&foo=2 | roundrobin |
|
|
||||||
+-----------------+----------------+----------------+
|
|
||||||
|
|
||||||
Table 4
|
|
||||||
|
|
||||||
| when a user clicks an object with the custom properties above, it
|
|
||||||
| should trigger either day noon or night in roundrobin fashion.
|
|
||||||
|
|
||||||
4.4. Usecase: click object or URI fragment, and scene load trigger
|
|
||||||
|
|
||||||
+=================+================+======================+
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
+=================+================+======================+
|
|
||||||
| # | random | scene loaded |
|
|
||||||
+-----------------+----------------+----------------------+
|
|
||||||
| #random | random | URL contains #random |
|
|
||||||
+-----------------+----------------+----------------------+
|
|
||||||
| !random | day|noon|night | #random, # or click |
|
|
||||||
+-----------------+----------------+----------------------+
|
|
||||||
| day | bg=1,1,1 | roundrobin |
|
|
||||||
+-----------------+----------------+----------------------+
|
|
||||||
| noon | bg=0.5,0.5,0.5 | roundrobin |
|
|
||||||
+-----------------+----------------+----------------------+
|
|
||||||
| night | bg=0,0,0&foo=2 | roundrobin |
|
|
||||||
+-----------------+----------------+----------------------+
|
|
||||||
|
|
||||||
Table 5
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
van Kammen Expires 28 March 2026 [Page 5]
|
|
||||||
|
|
||||||
Internet-Draft XR Macros September 2025
|
|
||||||
|
|
||||||
|
|
||||||
4.5. Usecase: present context menu with options
|
|
||||||
|
|
||||||
+=================+================+========================+
|
|
||||||
| custom property | value | trigger when |
|
|
||||||
+=================+================+========================+
|
|
||||||
| !random | !day | !noon |
|
|
||||||
+-----------------+----------------+------------------------+
|
|
||||||
| !day | bg=1,1,1 | clicked in contextmenu |
|
|
||||||
+-----------------+----------------+------------------------+
|
|
||||||
| !noon | bg=0.5,0.5,0.5 | clicked in contextmenu |
|
|
||||||
+-----------------+----------------+------------------------+
|
|
||||||
| !night | bg=0,0,0&foo=2 | clicked in contextmenu |
|
|
||||||
+-----------------+----------------+------------------------+
|
|
||||||
|
|
||||||
Table 6
|
|
||||||
|
|
||||||
| When interacting with an object with more than one !-macro, the XR
|
|
||||||
| Browser should offer a contextmenu to execute a macro.
|
|
||||||
|
|
||||||
In a similar way, when *any* !-macro is present on the sceneroot, the
|
|
||||||
XR Browser should offer a context-menu to execute those macro's.
|
|
||||||
|
|
||||||
4.6. Event Bubble-flow
|
|
||||||
|
|
||||||
click object with (!clickme:AR or !clickme: !reset e.g.)
|
|
||||||
|
|
||||||
◻
|
|
||||||
│
|
|
||||||
└── does current object contain this property-key (`AR` or `!reset` e.g.)?
|
|
||||||
└── no: is there any (root)object containing property `AR`
|
|
||||||
└── yes: evaluate its (roundrobin) XR macro-value(s) (and exit)
|
|
||||||
└── no: trigger URL: #AR
|
|
||||||
|
|
||||||
click object with (!clickme:#AR|#VR e.g.)
|
|
||||||
|
|
||||||
◻
|
|
||||||
│
|
|
||||||
└── apply the roundrobin (rotate the options, value `#AR` becomes `#VR` upon next click)
|
|
||||||
└── is there any object with property-key (`#AR` e.g.)?
|
|
||||||
└── no: just update the URL to `#AR`
|
|
||||||
└── yes: apply its value to the scene, and update the URL to `#AR`
|
|
||||||
|
|
||||||
click object with (`!clickme`:`!foo|!bar|!flop` e.g.)
|
|
||||||
|
|
||||||
◻ │
|
|
||||||
└── apply the roundrobin (rotate the options, value !foo becomes !bar
|
|
||||||
upon next click) └── is there any object with property-key (!foo
|
|
||||||
e.g.)? └── no: do nothing └── yes: apply its value to the scene ```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
van Kammen Expires 28 March 2026 [Page 6]
|
|
||||||
|
|
||||||
Internet-Draft XR Macros September 2025
|
|
||||||
|
|
||||||
|
|
||||||
| Note that only macro's can trigger roundrobin values or
|
|
||||||
| contextmenu's, as well as roundrobin values never ending up in the
|
|
||||||
| toplevel URL.
|
|
||||||
|
|
||||||
5. Security Considerations
|
|
||||||
|
|
||||||
6. IANA Considerations
|
|
||||||
|
|
||||||
This document has no IANA actions.
|
|
||||||
|
|
||||||
7. Acknowledgments
|
|
||||||
|
|
||||||
* NLNET (https://nlnet.nl)
|
|
||||||
* Future of Text (https://futureoftext.org)
|
|
||||||
* visual-meta.info (https://visual-meta.info)
|
|
||||||
|
|
||||||
8. Appendix: Definitions
|
|
||||||
|
|
||||||
+===============+===================================================+
|
|
||||||
| definition | explanation |
|
|
||||||
+===============+===================================================+
|
|
||||||
| scene | a (local/remote) 3D scene or 3D file |
|
|
||||||
| | (index.gltf e.g.) |
|
|
||||||
+---------------+---------------------------------------------------+
|
|
||||||
| 3D object | an object inside a scene characterized by |
|
|
||||||
| | vertex-, face- and customproperty data. |
|
|
||||||
+---------------+---------------------------------------------------+
|
|
||||||
| XR fragments | URI Fragment with spatial hints like |
|
|
||||||
| | #pos=0,0,0&t=1,100 e.g. |
|
|
||||||
+---------------+---------------------------------------------------+
|
|
||||||
| query | an URI Fragment-operator which queries |
|
|
||||||
| | object(s) from a scene like #q=cube |
|
|
||||||
+---------------+---------------------------------------------------+
|
|
||||||
| FPS | frames per second in spatial experiences |
|
|
||||||
| | (games,VR,AR e.g.), should be as high as |
|
|
||||||
| | possible |
|
|
||||||
+---------------+---------------------------------------------------+
|
|
||||||
| ◻ | ascii representation of an 3D object/mesh |
|
|
||||||
+---------------+---------------------------------------------------+
|
|
||||||
| (un)obtrusive | obtrusive: wrapping human text/thought in |
|
|
||||||
| | XML/HTML/JSON obfuscates human text into |
|
|
||||||
| | a salad of machine-symbols and words |
|
|
||||||
+---------------+---------------------------------------------------+
|
|
||||||
|
|
||||||
Table 7
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
van Kammen Expires 28 March 2026 [Page 7]
|
|
||||||
|
|
@ -1,381 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- name="GENERATOR" content="github.com/mmarkdown/mmark Mmark Markdown Processor - mmark.miek.nl" -->
|
|
||||||
<rfc version="3" ipr="trust200902" docName="draft-XRMACROS-leonvankammen-00" submissionType="IETF" category="info" xml:lang="en" xmlns:xi="http://www.w3.org/2001/XInclude" indexInclude="true" consensus="true">
|
|
||||||
|
|
||||||
<front>
|
|
||||||
<title>XR Macros</title><seriesInfo value="draft-XRMACROS-leonvankammen-00" stream="IETF" status="informational" name="XR-Macros"></seriesInfo>
|
|
||||||
<author initials="L.R." surname="van Kammen" fullname="L.R. van Kammen"><organization></organization><address><postal><street></street>
|
|
||||||
</postal></address></author><date/>
|
|
||||||
<area>Internet</area>
|
|
||||||
<workgroup>Internet Engineering Task Force</workgroup>
|
|
||||||
|
|
||||||
<abstract>
|
|
||||||
<t>This draft offers a specification for embedding macros in existing 3D scenes/assets, to offer simple interactions and configure the renderer further.<br />
|
|
||||||
|
|
||||||
Together with URI Fragments, it allows for rich immersive experiences without the need of a complicated sandboxed scripting languages.</t>
|
|
||||||
<t>Almost every idea in this document is demonstrated at <eref target="https://xrfragment.org">https://xrfragment.org</eref>, as this spec was created during the <eref target="https://xrfragment.org">XR Fragments</eref> spec.</t>
|
|
||||||
</abstract>
|
|
||||||
|
|
||||||
</front>
|
|
||||||
|
|
||||||
<middle>
|
|
||||||
|
|
||||||
<section anchor="introduction"><name>Introduction</name>
|
|
||||||
<t>How can we add more features to existing text & 3D scenes, without introducing new dataformats?<br />
|
|
||||||
|
|
||||||
Historically, there's many attempts to create the ultimate markuplanguage or 3D fileformat.<br />
|
|
||||||
|
|
||||||
Their lowest common denominator is: (co)authoring using plain text.<br />
|
|
||||||
|
|
||||||
Therefore, XR Macros allows us to enrich/connect existing dataformats, by offering a polyglot notation based on existing notations:<br />
|
|
||||||
</t>
|
|
||||||
|
|
||||||
<ol spacing="compact">
|
|
||||||
<li>getting/setting common used 3D properties using querystring- or JSON-notation</li>
|
|
||||||
<li>targeting 3D properties using the lightweight query notation present in <eref target="https://xrfragment.org">XR Fragments</eref></li>
|
|
||||||
</ol>
|
|
||||||
<blockquote><t>NOTE: The chapters in this document are ordered from highlevel to lowlevel (technical) as much as possible</t>
|
|
||||||
</blockquote></section>
|
|
||||||
|
|
||||||
<section anchor="core-principle"><name>Core principle</name>
|
|
||||||
|
|
||||||
<ol spacing="compact">
|
|
||||||
<li>XR Macros use querystrings, but are HTML-agnostic (though pseudo-XR Fragment browsers <strong>can</strong> be implemented on top of HTML/Javascript).</li>
|
|
||||||
<li>An XR Macro is 3D metadata which starts with '!' (<tt>!clickme: fog=0,10</tt> e.g.)</li>
|
|
||||||
<li>Metadata-values can contain the <tt>|</tt> symbol to 🎲 roundrobin variable values (<tt>!toggleme: fog=0,10|fog=0,1000</tt> e.g.)</li>
|
|
||||||
<li>XR Macros acts as simple eventhandlers for URI Fragments: they are automatically published on the (<eref target="https://xrfragment.org">XR Fragments</eref>) hashbus, to act as events (so more serious scripting languages can react to them as well).</li>
|
|
||||||
<li>XR Macros can assign object metadata (<tt>!setlocal: foo=1</tt> writes <tt>foo:1</tt> metadata to the object containing the <tt>!setlocal</tt> metadata)</li>
|
|
||||||
<li>XR Macros can assign global metadata (<tt>!setfoo: #foo=1</tt> writes <tt>foo:1</tt> metadata to the root scene-node)</li>
|
|
||||||
</ol>
|
|
||||||
<blockquote><t>These very simple principles allow for rich interactions and dynamic querying</t>
|
|
||||||
</blockquote></section>
|
|
||||||
|
|
||||||
<section anchor="conventions-and-definitions"><name>Conventions and Definitions</name>
|
|
||||||
<t>See appendix below in case certain terms are not clear.</t>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section anchor="list-of-xr-macros"><name>List of XR Macros</name>
|
|
||||||
<t>(XR) Macros can be embedded in 3D assets/scenes.<br />
|
|
||||||
|
|
||||||
Macros enrich existing spatial content with a lowcode, limited logic-layer, by recursive (economic) use of the querystring syntax (which search engines and <eref target="https://xrfragment.org">XR Fragments</eref> already uses.<br />
|
|
||||||
|
|
||||||
This is done by allowing string/integer variables, and the <tt>|</tt> symbol to roundrobin variable values.<br />
|
|
||||||
|
|
||||||
Macros also act as events, so more serious scripting languages can react to them as well.<br />
|
|
||||||
</t>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>key</th>
|
|
||||||
<th>type</th>
|
|
||||||
<th>example (JSON)</th>
|
|
||||||
<th>function</th>
|
|
||||||
<th>existing compatibility</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><tt>@bg</tt></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><tt>"@bg":"#cube"</tt></td>
|
|
||||||
<td>bg: binds fog near/far based to cube x/y/z (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><tt>@fog</tt></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><tt>"@fog":"#cube"</tt></td>
|
|
||||||
<td>fog: binds fog near/far based to cube x/y (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><tt>@scroll</tt></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><tt>"@scroll":"#cube"</tt></td>
|
|
||||||
<td>texturescrolling: binds texture x/y/rot based to cube x/y/z (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><tt>@emissive</tt></td>
|
|
||||||
<td>string</td>
|
|
||||||
<td><tt>"@emissive":"#cube"</tt></td>
|
|
||||||
<td>day/night/mood: binds material's emissive value to cube x/y/z (anim) values</td>
|
|
||||||
<td>custom property in 3D fileformats</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<section anchor="usecase-click-object"><name>Usecase: click object</name>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>!clickme</td>
|
|
||||||
<td>bg=1,1,1&foo=2</td>
|
|
||||||
<td>object clicked</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table></section>
|
|
||||||
|
|
||||||
<section anchor="usecase-conditional-click-object"><name>Usecase: conditional click object</name>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>#</td>
|
|
||||||
<td>foo=1</td>
|
|
||||||
<td>scene</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!clickme</td>
|
|
||||||
<td>q=foo>2&bg=1,1,1</td>
|
|
||||||
<td>object clicked and foo > 2</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table><blockquote><t>when a user clicks an object with the custom properties above, it should set the backgroundcolor to <tt>1,1,1</tt> when <tt>foo</tt> is greater than <tt>2</tt> (see previous example)</t>
|
|
||||||
</blockquote></section>
|
|
||||||
|
|
||||||
<section anchor="usecase-click-object-roundrobin"><name>Usecase: click object (roundrobin)</name>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>!cycleme</td>
|
|
||||||
<td>day|noon|night</td>
|
|
||||||
<td>object clicked</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>day</td>
|
|
||||||
<td>bg=1,1,1</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>noon</td>
|
|
||||||
<td>bg=0.5,0.5,0.5</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>night</td>
|
|
||||||
<td>bg=0,0,0&foo=2</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table><blockquote><t>when a user clicks an object with the custom properties above, it should trigger either <tt>day</tt> <tt>noon</tt> or <tt>night</tt> in roundrobin fashion.</t>
|
|
||||||
</blockquote></section>
|
|
||||||
|
|
||||||
<section anchor="usecase-click-object-or-uri-fragment-and-scene-load-trigger"><name>Usecase: click object or URI fragment, and scene load trigger</name>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>#</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>scene loaded</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>#random</td>
|
|
||||||
<td>random</td>
|
|
||||||
<td>URL contains #random</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!random</td>
|
|
||||||
<td>day|noon|night</td>
|
|
||||||
<td>#random, # or click</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>day</td>
|
|
||||||
<td>bg=1,1,1</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>noon</td>
|
|
||||||
<td>bg=0.5,0.5,0.5</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>night</td>
|
|
||||||
<td>bg=0,0,0&foo=2</td>
|
|
||||||
<td>roundrobin</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table></section>
|
|
||||||
|
|
||||||
<section anchor="usecase-present-context-menu-with-options"><name>Usecase: present context menu with options</name>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>custom property</th>
|
|
||||||
<th>value</th>
|
|
||||||
<th>trigger when</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>!random</td>
|
|
||||||
<td>!day</td>
|
|
||||||
<td>!noon</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!day</td>
|
|
||||||
<td>bg=1,1,1</td>
|
|
||||||
<td>clicked in contextmenu</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!noon</td>
|
|
||||||
<td>bg=0.5,0.5,0.5</td>
|
|
||||||
<td>clicked in contextmenu</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>!night</td>
|
|
||||||
<td>bg=0,0,0&foo=2</td>
|
|
||||||
<td>clicked in contextmenu</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table><blockquote><t>When interacting with an object with more than one <tt>!</tt>-macro, the XR Browser should offer a contextmenu to execute a macro.</t>
|
|
||||||
</blockquote><t>In a similar way, when <strong>any</strong> <tt>!</tt>-macro is present on the sceneroot, the XR Browser should offer a context-menu to execute those macro's.</t>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section anchor="event-bubble-flow"><name>Event Bubble-flow</name>
|
|
||||||
<t>click object with (<tt>!clickme</tt>:<tt>AR</tt> or <tt>!clickme</tt>: <tt>!reset</tt> e.g.)</t>
|
|
||||||
|
|
||||||
<artwork><![CDATA[ ◻
|
|
||||||
│
|
|
||||||
└── does current object contain this property-key (`AR` or `!reset` e.g.)?
|
|
||||||
└── no: is there any (root)object containing property `AR`
|
|
||||||
└── yes: evaluate its (roundrobin) XR macro-value(s) (and exit)
|
|
||||||
└── no: trigger URL: #AR
|
|
||||||
]]>
|
|
||||||
</artwork>
|
|
||||||
<t>click object with (<tt>!clickme</tt>:<tt>#AR|#VR</tt> e.g.)</t>
|
|
||||||
|
|
||||||
<artwork><![CDATA[ ◻
|
|
||||||
│
|
|
||||||
└── apply the roundrobin (rotate the options, value `#AR` becomes `#VR` upon next click)
|
|
||||||
└── is there any object with property-key (`#AR` e.g.)?
|
|
||||||
└── no: just update the URL to `#AR`
|
|
||||||
└── yes: apply its value to the scene, and update the URL to `#AR`
|
|
||||||
|
|
||||||
click object with (`!clickme`:`!foo|!bar|!flop` e.g.)
|
|
||||||
]]>
|
|
||||||
</artwork>
|
|
||||||
<t>◻
|
|
||||||
│<br />
|
|
||||||
└── apply the roundrobin (rotate the options, value <tt>!foo</tt> becomes <tt>!bar</tt> upon next click)
|
|
||||||
└── is there any object with property-key (<tt>!foo</tt> e.g.)?
|
|
||||||
└── no: do nothing
|
|
||||||
└── yes: apply its value to the scene
|
|
||||||
```</t>
|
|
||||||
<blockquote><t>Note that only macro's can trigger roundrobin values or contextmenu's, as well as roundrobin values never ending up in the toplevel URL.</t>
|
|
||||||
</blockquote></section>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section anchor="security-considerations"><name>Security Considerations</name>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section anchor="iana-considerations"><name>IANA Considerations</name>
|
|
||||||
<t>This document has no IANA actions.</t>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section anchor="acknowledgments"><name>Acknowledgments</name>
|
|
||||||
|
|
||||||
<ul spacing="compact">
|
|
||||||
<li><eref target="https://nlnet.nl">NLNET</eref></li>
|
|
||||||
<li><eref target="https://futureoftext.org">Future of Text</eref></li>
|
|
||||||
<li><eref target="https://visual-meta.info">visual-meta.info</eref></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section anchor="appendix-definitions"><name>Appendix: Definitions</name>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>definition</th>
|
|
||||||
<th>explanation</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>scene</td>
|
|
||||||
<td>a (local/remote) 3D scene or 3D file (index.gltf e.g.)</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>3D object</td>
|
|
||||||
<td>an object inside a scene characterized by vertex-, face- and customproperty data.</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>XR fragments</td>
|
|
||||||
<td>URI Fragment with spatial hints like <tt>#pos=0,0,0&t=1,100</tt> e.g.</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>query</td>
|
|
||||||
<td>an URI Fragment-operator which queries object(s) from a scene like <tt>#q=cube</tt></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>FPS</td>
|
|
||||||
<td>frames per second in spatial experiences (games,VR,AR e.g.), should be as high as possible</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td><tt>◻</tt></td>
|
|
||||||
<td>ascii representation of an 3D object/mesh</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>(un)obtrusive</td>
|
|
||||||
<td>obtrusive: wrapping human text/thought in XML/HTML/JSON obfuscates human text into a salad of machine-symbols and words</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table></section>
|
|
||||||
|
|
||||||
</middle>
|
|
||||||
|
|
||||||
</rfc>
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
BEGIN{
|
|
||||||
ROUNDROBIN="🎲"
|
|
||||||
ASSET="🔒"
|
|
||||||
OVERRIDE="🔓"
|
|
||||||
PV_OVERRIDE="💥"
|
|
||||||
NAVIGATOR="👩"
|
|
||||||
PROMPT="✋?"
|
|
||||||
EMBEDDED="🔗"
|
|
||||||
print "| fragment | type | access | scope |"
|
|
||||||
print "|----------|------|--------------|-------|"
|
|
||||||
}
|
|
||||||
|
|
||||||
END{
|
|
||||||
print ""
|
|
||||||
print ASSET" = value(s) can only defined in 3D asset (immutable)<br>"
|
|
||||||
print OVERRIDE" = value(s) can be overwritten in certain context<br>"
|
|
||||||
print ROUNDROBIN" = multiple values will be roundrobin'ed (`#pos=0,0,0|1,0,0` e.g.)<br>"
|
|
||||||
print PV_OVERRIDE" = value(s) can be overwritten by [predefined_view](#predefined_view)<br>"
|
|
||||||
print NAVIGATOR" = value(s) can be overwritten when user clicks `href` (value) or top-level URL change(see [How it works](#How%20it%20works))<br>"
|
|
||||||
print EMBEDDED" = value(s) can be overwritten when 3D asset is embedded/linked as `src` value<br>"
|
|
||||||
print PROMPT" = value(s) can be overwritten by offering confirmation/undo to user<br><br>"
|
|
||||||
print ""
|
|
||||||
print "for more info see [How it works](#How%20it%20works)"
|
|
||||||
}
|
|
||||||
|
|
||||||
/category:/ {
|
|
||||||
$1=$2=""
|
|
||||||
sub(/^[[:space:]]+/, "", $0 ) # remove leading spaces
|
|
||||||
sub(/[[:space:]]+$/, "", $0 ) # remove trailing spaces
|
|
||||||
scope=$0
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/Frag.*XRF\.*/ {
|
|
||||||
gsub(/.*\("/,"",$1)
|
|
||||||
gsub(/".*/,"",$1)
|
|
||||||
type="string"
|
|
||||||
perms = $0 ~ /OVERRIDE/ ? OVERRIDE : ASSET
|
|
||||||
frag=$1
|
|
||||||
$1=""
|
|
||||||
if( $0 ~ /T_INT/ ) type="int"
|
|
||||||
if( $0 ~ /T_STRING_OBJ/ ) type="[string object](string object ) "
|
|
||||||
if( $0 ~ /T_VECTOR2/ ) type="[vector2](#vector ) "
|
|
||||||
if( $0 ~ /T_VECTOR3/ ) type="[vector3](#vector ) "
|
|
||||||
if( $0 ~ /T_URL/ ) type="[url](#url ) "
|
|
||||||
if( $0 ~ /T_PREDEFINED_VIEW/ ) type="[predefined view](#predefined_view ) "
|
|
||||||
if( $0 ~ /ROUNDROBIN/ ) perms=perms" "ROUNDROBIN
|
|
||||||
if( $0 ~ /PV_OVERRIDE/ ) perms=perms" "PV_OVERRIDE
|
|
||||||
if( $0 ~ /NAVIGATOR/ ) perms=perms" "NAVIGATOR
|
|
||||||
if( $0 ~ /EMBEDDED/ ) perms=perms" "EMBEDDED
|
|
||||||
if( $0 ~ /PROMPT/ ) perms=perms" "PROMPT
|
|
||||||
print "| **"frag"** |" type "|" perms "|" scope "|"
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
# a no-nonsense source-to-markdown generator which scans for:
|
|
||||||
#
|
|
||||||
# /**
|
|
||||||
# * # foo
|
|
||||||
# *
|
|
||||||
# * this is markdown $(cat bar.md)
|
|
||||||
# */
|
|
||||||
#
|
|
||||||
# var foo; // comment with 2 leading spaces is markdown too $(date)
|
|
||||||
#
|
|
||||||
# easily refactorable to hash-based languages (py/bash/perl/lua e.g.)
|
|
||||||
# by changing the regexes
|
|
||||||
#
|
|
||||||
/\$\(/ { cmd=$0;
|
|
||||||
gsub(/^.*\$\(/,"",cmd);
|
|
||||||
gsub(/\).*/,"",cmd);
|
|
||||||
cmd | getline stdout; close(cmd);
|
|
||||||
sub(/\$\(.*\)/,stdout);
|
|
||||||
}
|
|
||||||
/\/\*\*/ { doc=1; sub(/^.*\/\*/,""); }
|
|
||||||
doc && /\*\// { doc=0;
|
|
||||||
sub(/[[:space:]]*\*\/.*/,"");
|
|
||||||
sub(/^[[:space:]]*\*[[:space:]]?/,"");
|
|
||||||
print
|
|
||||||
}
|
|
||||||
doc && /^[[:space:]]*\*/ { sub(/^[[:space:]]*\*[[:space:]]?/,"");
|
|
||||||
print
|
|
||||||
}
|
|
||||||
!doc && /\/\/ / { sub(".*// ","");
|
|
||||||
sub("# ","\n# ");
|
|
||||||
sub("> ","\n> ");
|
|
||||||
print
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
#!/bin/sh
|
|
||||||
set -e
|
|
||||||
|
|
||||||
for topic in Fragments Macros; do
|
|
||||||
mmark RFC_XR_$topic.md > RFC_XR_$topic.xml
|
|
||||||
mmark --html RFC_XR_$topic.md | grep -vE '(<!--{|}-->)' > RFC_XR_$topic.html
|
|
||||||
xml2rfc --v3 RFC_XR_$topic.xml # RFC_XR_$topic.txt
|
|
||||||
sed -i 's/Expires: .*//g' RFC_XR_$topic.txt
|
|
||||||
convert -size 700x2400 xc:white -font "FreeMono" +antialias -pointsize 12 -fill black -annotate +15+15 "@RFC_XR_Fragments.txt" -colorspace gray +dither -posterize 6 RF6_XR_Fragments.png
|
|
||||||
done
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
\#static allow client to ignore lower-prio objects in the renderloop, to compensate frame-drop/cpu/gpu-overload scenario’s
|
|
||||||
|
|
||||||
Q: should `-` be used to indicate 'lowering' priority (css's `z-index` 0-??? range is a bit confusing in that sense)
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
{ pkgs ? import <nixos-unstable> {} } :
|
|
||||||
{
|
|
||||||
|
|
||||||
pkgs = import (builtins.fetchGit {
|
|
||||||
name = "nixos-23.05";
|
|
||||||
url = "https://github.com/nixos/nixpkgs/";
|
|
||||||
ref = "refs/heads/nixos-unstable";
|
|
||||||
rev = "ef99fa5c5ed624460217c31ac4271cfb5cb2502c";
|
|
||||||
});
|
|
||||||
|
|
||||||
foo = pkgs.mkShell {
|
|
||||||
# nativeBuildInputs is usually what you want -- tools you need to run
|
|
||||||
nativeBuildInputs = with pkgs.buildPackages; [
|
|
||||||
|
|
||||||
mmark
|
|
||||||
xml2rfc
|
|
||||||
python312Packages.lxml
|
|
||||||
wkhtmltopdf-bin
|
|
||||||
imagemagick
|
|
||||||
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
# to create [markdown] table of contents use LLM with this input: awk '/id="/ { print $0 }' RFC_XR_Fragments.html | grep -v idx
|
|
||||||
}
|
|
||||||
489
doc/style.css
489
doc/style.css
|
|
@ -1,489 +0,0 @@
|
||||||
:root {
|
|
||||||
--color-a: black;
|
|
||||||
--color-at: #000000CC;
|
|
||||||
--color-b: #222;
|
|
||||||
--color-c: #444;
|
|
||||||
--color-d: #888;
|
|
||||||
--color-e: #FF0;
|
|
||||||
--color-f: #CCC;
|
|
||||||
--color-g: #FFF;
|
|
||||||
--color-gt: #FFF5;
|
|
||||||
--params-width: 320px;
|
|
||||||
--font-1: 'Montserrat', sans-serif;
|
|
||||||
--font-2: monospace, courier;
|
|
||||||
--font-size-1: 57px;
|
|
||||||
--font-size-2: 26px;
|
|
||||||
--font-size-3: 18px;
|
|
||||||
--font-size-4: 15px;
|
|
||||||
--gutter-1: 10%;
|
|
||||||
--gradient-1: linear-gradient(45deg, #dc2454 0%, #944a9d 51%, #4824dc 100%);
|
|
||||||
--gradient-2: linear-gradient(45deg, #dc2454 0%, #944a9d 21%, #4824dc 50%,#dc2454 70%, #944a9d 88%, #4824dc 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body>h1:nth-child(1) {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
position:relative;
|
|
||||||
width:100%;
|
|
||||||
height:100vh;
|
|
||||||
color: var(--color-d);
|
|
||||||
line-height: 38px;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
font-size: var(--font-size-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
font-family: var(--font-1);
|
|
||||||
font-size: var(--font-size-3);
|
|
||||||
font-weight:500;
|
|
||||||
color: var(--color-c);
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
.img{
|
|
||||||
image-rendering: -webkit-optimize-contrast;
|
|
||||||
}
|
|
||||||
|
|
||||||
#jumbotron{
|
|
||||||
margin-top:50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
b{
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: var(--color-c);
|
|
||||||
font-size: var(--font-size-1);
|
|
||||||
font-weight:700;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 11vh;
|
|
||||||
padding-right:40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: var(--font-size-2);
|
|
||||||
font-weight:400;
|
|
||||||
padding-right:40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
background-image: var(--gradient-1);
|
|
||||||
color: var(--color-g);
|
|
||||||
display:inline;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 2px 10px 2px 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: var(--font-size-4);
|
|
||||||
text-transform:uppercase;
|
|
||||||
white-space:nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 700px) {
|
|
||||||
body {
|
|
||||||
font-size: var(--font-size-3);
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
svg.img{
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
.content{
|
|
||||||
padding-top: 60px;
|
|
||||||
margin-left: 27px !important;
|
|
||||||
padding-right: 54px !important;
|
|
||||||
}
|
|
||||||
.heading{
|
|
||||||
transform:scale(0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border:none;
|
|
||||||
box-shadow: 0px 0px 10px #0005;
|
|
||||||
padding:20px;
|
|
||||||
background: transparent !important;
|
|
||||||
border-radius:4px;
|
|
||||||
}
|
|
||||||
table tr td,
|
|
||||||
table tr th {
|
|
||||||
vertical-align:top;
|
|
||||||
text-align:left;
|
|
||||||
border-bottom:1px solid #555;
|
|
||||||
color: var(--color-d);
|
|
||||||
}
|
|
||||||
table tr td a:visited,
|
|
||||||
table tr td a:active,
|
|
||||||
table tr td a{
|
|
||||||
color: var(--color-e);
|
|
||||||
}
|
|
||||||
table tr:last-child td{
|
|
||||||
border:none;
|
|
||||||
}
|
|
||||||
table tr th {
|
|
||||||
border-bottom:2px solid var(--color-d);
|
|
||||||
}
|
|
||||||
|
|
||||||
code{
|
|
||||||
display: inline-block;
|
|
||||||
unicode-bidi: embed;
|
|
||||||
font-family: monospace;
|
|
||||||
white-space: pre;
|
|
||||||
background: var(--color-c);
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding: 0px 5px;
|
|
||||||
font-size:16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
height:99vh;
|
|
||||||
max-width: 50em;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-top:25px;
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,a:visited,a:active{
|
|
||||||
color: var(--color-a);
|
|
||||||
display:inline-block;
|
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
a:hover{
|
|
||||||
opacity:0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* lato-regular - latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Lato';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('/assets/font/lato-v17-latin-regular.eot'); /* IE9 Compat Modes */
|
|
||||||
src: local(''),
|
|
||||||
url('/assets/font/lato-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('/assets/font/lato-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
|
||||||
url('/assets/font/lato-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
|
|
||||||
url('/assets/font/lato-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
||||||
url('/assets/font/lato-v17-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidemenu {
|
|
||||||
position:absolute;
|
|
||||||
top:0;
|
|
||||||
left:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidemenu nav {
|
|
||||||
width: 300px;
|
|
||||||
box-shadow: 0px 0px 8px #0005;
|
|
||||||
background:#FFF;
|
|
||||||
z-index:10;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 99;
|
|
||||||
height:100vh;
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__btn {
|
|
||||||
display: block;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
top:20px;
|
|
||||||
left:20px;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 100;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__btn span {
|
|
||||||
display: block;
|
|
||||||
width: 30px;
|
|
||||||
height: 3px;
|
|
||||||
margin: auto;
|
|
||||||
background:var(--color-d);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
-webkit-transition: all .4s ease;
|
|
||||||
transition: all .4s ease;
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__btn span.top {
|
|
||||||
-webkit-transform: translateY(-8px);
|
|
||||||
transform: translateY(-8px);
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__btn span.bottom {
|
|
||||||
-webkit-transform: translateY(8px);
|
|
||||||
transform: translateY(8px);
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__btn.active .top {
|
|
||||||
-webkit-transform: rotate(-45deg);
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__btn.active .mid {
|
|
||||||
-webkit-transform: translateX(-20px) rotate(360deg);
|
|
||||||
transform: translateX(-20px) rotate(360deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__btn.active .bottom {
|
|
||||||
-webkit-transform: rotate(45deg);
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__wrapper {
|
|
||||||
padding-top: 70px;
|
|
||||||
margin-left:20px;
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__list {
|
|
||||||
overflow-y: scroll;
|
|
||||||
max-height: 73vh;
|
|
||||||
padding-top: 50px;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
#sidemenu .sidemenu__item {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#sidemenu li > a {
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
-webkit-transition: .4s ease;
|
|
||||||
transition: .4s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
-webkit-transition: .2s ease;
|
|
||||||
transition: .2s ease;
|
|
||||||
-webkit-transform: translateX(0px);
|
|
||||||
transform: translateX(0px);
|
|
||||||
opacity:1;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.hide {
|
|
||||||
-webkit-transform: translateX(-300px);
|
|
||||||
transform: translateX(-300px);
|
|
||||||
opacity:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin-left:30px !important;
|
|
||||||
margin-top: 35px !important;
|
|
||||||
margin-bottom: 35px !important;
|
|
||||||
}
|
|
||||||
ul:nth-child(1){
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,li{
|
|
||||||
text-decoration:none !important;
|
|
||||||
/*list-style:none;*/
|
|
||||||
padding-left:10px;
|
|
||||||
padding-right:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li > a,
|
|
||||||
li > a.visited,
|
|
||||||
li > a.active{
|
|
||||||
color:#555;
|
|
||||||
padding:5px;
|
|
||||||
}
|
|
||||||
li > b {
|
|
||||||
background:#FFF;
|
|
||||||
padding:5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidemenu__list > li,
|
|
||||||
.sidemenu__list > ul > li{
|
|
||||||
display:inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul > li {
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content ul > li::before {content: "•"; padding-right:10px;color: #54F;}
|
|
||||||
|
|
||||||
li > b {
|
|
||||||
font-weight:100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.touchscreen {
|
|
||||||
border:30px solid #aab5bb;
|
|
||||||
border-radius:20px;
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
.touchscreen:after {
|
|
||||||
content:"";
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
border-radius:50%;
|
|
||||||
width:15px;
|
|
||||||
height:15px;
|
|
||||||
background:#FFF;
|
|
||||||
top:136px;
|
|
||||||
right:-22px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
div.pretty{
|
|
||||||
border-radius: 4px;
|
|
||||||
display: block;
|
|
||||||
background: #372e42;
|
|
||||||
overflow-x: scroll;
|
|
||||||
white-space:pre-wrap;
|
|
||||||
color:#65e;
|
|
||||||
}
|
|
||||||
|
|
||||||
code.pretty,
|
|
||||||
div.pretty > pre > code{
|
|
||||||
background: -webkit-linear-gradient(-70deg,#98a7f0,#0d4e50);
|
|
||||||
background-clip: border-box;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
border: none;
|
|
||||||
text-shadow: 0px 0px 5px #fff9;
|
|
||||||
filter: brightness(1.8);
|
|
||||||
font-size:14px;
|
|
||||||
width:98%;
|
|
||||||
padding:0px 15px;
|
|
||||||
margin:0;
|
|
||||||
box-sizing:border-box;
|
|
||||||
line-height:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote{
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: transparent !important;
|
|
||||||
border-radius: 7px;
|
|
||||||
padding: 20px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 30px 0px 20px 0px;
|
|
||||||
color: var(--color-f) !important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
blockquote a {
|
|
||||||
color:#000 !important;
|
|
||||||
}
|
|
||||||
blockquote a:hover {
|
|
||||||
color:#FFF !important;
|
|
||||||
background:#000;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width:100%;
|
|
||||||
filter: brightness(0.97)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* GRID SYSTEM */
|
|
||||||
.block{
|
|
||||||
display: block;
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: var(--gutter-1);
|
|
||||||
min-height:55vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block .img{
|
|
||||||
border-radius:15px;
|
|
||||||
width:100%;
|
|
||||||
height:35vh;
|
|
||||||
margin-bottom:15px;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
p{ margin:0; padding:0; }
|
|
||||||
|
|
||||||
//the grid:
|
|
||||||
|
|
||||||
.grid{
|
|
||||||
width: 90%;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: $grid-color;
|
|
||||||
//just for styling:
|
|
||||||
padding-top: var(--gutter-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gutter{
|
|
||||||
/*
|
|
||||||
margin-left: calc( var(--gutter-1) /2 );
|
|
||||||
margin-right: calc( var(--gutter-1) /2 );
|
|
||||||
*/
|
|
||||||
margin-right: var(--gutter-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-33{
|
|
||||||
width: 33.3%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.col-50{
|
|
||||||
width: 50%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear{
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//responsive
|
|
||||||
|
|
||||||
@media all and (max-width:800px) {
|
|
||||||
.col-33{
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width:600px) {
|
|
||||||
.col-50, .col-33{
|
|
||||||
width: 100%;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 50px;
|
|
||||||
line-height:70px;
|
|
||||||
}
|
|
||||||
h2{
|
|
||||||
font-size: var(--font-size-3);
|
|
||||||
}
|
|
||||||
.block.gutter{
|
|
||||||
margin-right:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.darken{
|
|
||||||
filter: brightness(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
button{
|
|
||||||
cursor:pointer;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-image: var(--gradient-1);
|
|
||||||
border: none;
|
|
||||||
border-radius: 20px;
|
|
||||||
display:inline-block;
|
|
||||||
color: #FFF;
|
|
||||||
border: none;
|
|
||||||
opacity:1.0;
|
|
||||||
font-size: var(--font-size-4);
|
|
||||||
font-weight:600;
|
|
||||||
}
|
|
||||||
button:hover{
|
|
||||||
opacity:0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient{
|
|
||||||
background-image: var(--gradient-2);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
4192
index.html
4192
index.html
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue