scene description
The 3D view in words, for a screen reader: what you are in, which way you
face, the time of day, and the named things nearby with how far and which way.
It is the same reading the agents' scene tool gives (see
agents), said as sentences instead of numbers:
City Drive. You are in the car, facing north-east. It is 17:30, dusk.
Nearby: end of the street, 58 metres ahead; harbour, 120 metres behind you
to the right.
<tosi-b3d> names its canvas (an image called "
, 3D scene") and keeps
this description beside it, visually hidden. It is built only when asked
for: once someone is using the scene's assistive surface (see
<a href="/aria-mirror/">aria mirror</a>), when the canvas takes focus, and by the
"Describe the scene" button, which also speaks it. Never on a timer. Things are listed when they have
a name (an <code>id</code>, or a beacon's <code>name</code>): a scene says as much as its author
named.</p>
<pre><code class="language-javascript" data-highlighted><span class="token keyword">import</span> <span class="token punctuation">{</span> describeScene <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'tosijs-3d/scene-description'</span>
<span class="token function">describeScene</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'City Drive'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token function">sceneEntities</span><span class="token punctuation">(</span>b3d<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">timeOfDay</span><span class="token operator">:</span> <span class="token number">17.5</span><span class="token punctuation">,</span> <span class="token literal-property property">daylight</span><span class="token operator">:</span> <span class="token number">0.3</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<p>Pure: no DOM, no Babylon.</p>
</article>
<nav class="doc-nav" aria-label="Documentation">
<ul>
<li><a class="doc-link" href="../">tosijs-3d</a></li>
<li><a class="doc-link" href="../getting-started/">Getting started</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-demos" aria-label="Demos"></button><a class="doc-link" href="../demos/">Demos</a></div>
<ul id="tosi-nav-demos">
<li><a class="doc-link" href="../playground/">Biped Playground</a></li>
<li><a class="doc-link" href="../solar-system/">Solar System</a></li>
<li><a class="doc-link" href="../weapon-fit/">Weapon Fit</a></li>
<li><a class="doc-link" href="../rig-tool/">Rig tool</a></li>
<li><a class="doc-link" href="../effect-tool/">Effect tool</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-character-builder" aria-label="character builder"></button><a class="doc-link" href="../character-builder/">character builder</a></div>
<ul id="tosi-nav-character-builder">
<li><a class="doc-link" href="../human-pack/">human-pack</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-character-file" aria-label="character-file"></button><a class="doc-link" href="../character-file/">character-file</a></div>
<ul id="tosi-nav-character-file">
<li><a class="doc-link" href="../character-store/">character-store</a></li>
</ul></li>
<li><a class="doc-link" href="../human-morph/">human-morph</a></li>
<li><a class="doc-link" href="../human-rig/">human-rig</a></li>
<li><a class="doc-link" href="../tailor-tool/">tailor tool</a></li>
<li><a class="doc-link" href="../skin-tone/">skin-tone</a></li>
<li><a class="doc-link" href="../skin-shading/">skin-shading</a></li>
<li><a class="doc-link" href="../human-face/">human-face</a></li>
<li><a class="doc-link" href="../human-expression/">human-expression</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-human-hair" aria-label="human-hair"></button><a class="doc-link" href="../human-hair/">human-hair</a></div>
<ul id="tosi-nav-human-hair">
<li><a class="doc-link" href="../hair-shading/">hair-shading</a></li>
<li><a class="doc-link" href="../hair-fit/">hair-fit</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-human-proxy" aria-label="human-proxy"></button><a class="doc-link" href="../human-proxy/">human-proxy</a></div>
<ul id="tosi-nav-human-proxy">
<li><a class="doc-link" href="../proxy-fit/">proxy-fit</a></li>
<li><a class="doc-link" href="../cloth-shading/">cloth-shading</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-garment-cut" aria-label="garment-cut"></button><a class="doc-link" href="../garment-cut/">garment-cut</a></div>
<ul id="tosi-nav-garment-cut">
<li><a class="doc-link" href="../outline-field/">outline field</a></li>
<li><a class="doc-link" href="../remesh/">remesh</a></li>
<li><a class="doc-link" href="../cloth-drape/">cloth drape</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-garment-bind" aria-label="garment-bind"></button><a class="doc-link" href="../garment-bind/">garment-bind</a></div>
<ul id="tosi-nav-garment-bind">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-garment-file" aria-label="garment-file"></button><a class="doc-link" href="../garment-file/">garment-file</a></div>
<ul id="tosi-nav-garment-file">
<li><a class="doc-link" href="../uv-unwrap/">uv-unwrap</a></li>
</ul></li>
<li><a class="doc-link" href="../proxy-rigid/">proxy-rigid</a></li>
</ul></li>
</ul></li>
<li><a class="doc-link" href="../character/">character</a></li>
</ul></li>
<li><a class="doc-link" href="../skybox-baker/">Skybox Baker</a></li>
<li><a class="doc-link" href="../land-and-sky/">Land and Sky</a></li>
<li><a class="doc-link" href="../city-drive/">City Drive</a></li>
<li><a class="doc-link" href="../cross-country/">Cross Country</a></li>
</ul></li>
<li class="nav-branch -open"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="true" aria-controls="tosi-nav-core" aria-label="Core"></button><a class="doc-link" href="../core/">Core</a></div>
<ul id="tosi-nav-core">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-tosi-b3d" aria-label="b3d"></button><a class="doc-link" href="../tosi-b3d/">b3d</a></div>
<ul id="tosi-nav-tosi-b3d">
<li><a class="doc-link" href="../demo-utils/">demo-utils</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-loader" aria-label="b3d-loader"></button><a class="doc-link" href="../b3d-loader/">b3d-loader</a></div>
<ul id="tosi-nav-b3d-loader">
<li><a class="doc-link" href="../asset-url/">asset-url</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-primitives/">Primitives: box, sphere, ground</a></li>
<li><a class="doc-link" href="../make-mesh/">make-mesh</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-library" aria-label="b3d-library"></button><a class="doc-link" href="../b3d-library/">b3d-library</a></div>
<ul id="tosi-nav-b3d-library">
<li><a class="doc-link" href="../glb-manifest/">glb-manifest</a></li>
</ul></li>
<li class="nav-branch -open"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="true" aria-controls="tosi-nav-b3d-agent" aria-label="agents"></button><a class="doc-link" href="../b3d-agent/">agents</a></div>
<ul id="tosi-nav-b3d-agent">
<li><a class="doc-link" href="../agent-driver/">agent driver</a></li>
<li><a class="doc-link current" href="../scene-description/" aria-current="page">scene description</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-prop/">b3d-prop</a></li>
<li><a class="doc-link" href="../b3d-utils/">Material Conventions</a></li>
<li><a class="doc-link" href="../scene-schemas/">Scene schemas</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-sky-and-light" aria-label="Sky and light"></button><a class="doc-link" href="../sky-and-light/">Sky and light</a></div>
<ul id="tosi-nav-sky-and-light">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-skybox" aria-label="b3d-skybox"></button><a class="doc-link" href="../b3d-skybox/">b3d-skybox</a></div>
<ul id="tosi-nav-b3d-skybox">
<li><a class="doc-link" href="../b3d-moon/">b3d-moon</a></li>
<li><a class="doc-link" href="../starfield-codec/">starfield-codec</a></li>
</ul></li>
<li><a class="doc-link" href="../light-pollution/">light pollution</a></li>
<li><a class="doc-link" href="../b3d-shadows/">Sun and shadows (b3d-shadows)</a></li>
<li><a class="doc-link" href="../b3d-light/">Ambient light (b3d-light)</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-lamp" aria-label="Lamps"></button><a class="doc-link" href="../b3d-lamp/">Lamps</a></div>
<ul id="tosi-nav-b3d-lamp">
<li><a class="doc-link" href="../curve-program/">Light program editor</a></li>
<li><a class="doc-link" href="../light-modulation/">Light programs</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-light-shafts/">b3d-light-shafts</a></li>
<li><a class="doc-link" href="../b3d-fog/">b3d-fog</a></li>
<li><a class="doc-link" href="../b3d-reflections/">b3d-reflections</a></li>
<li><a class="doc-link" href="../b3d-ssao/">Ambient occlusion (SSAO)</a></li>
<li><a class="doc-link" href="../environment/">environment</a></li>
<li><a class="doc-link" href="../shadow-decal/">shadow-decal</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-weather-and-clouds" aria-label="Weather and clouds"></button><a class="doc-link" href="../weather-and-clouds/">Weather and clouds</a></div>
<ul id="tosi-nav-weather-and-clouds">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-cloud-deck" aria-label="b3d-cloud-deck"></button><a class="doc-link" href="../b3d-cloud-deck/">b3d-cloud-deck</a></div>
<ul id="tosi-nav-b3d-cloud-deck">
<li><a class="doc-link" href="../cloud-shadows/">cloud-shadows</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-clouds/">b3d-clouds</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-weather-cell" aria-label="b3d-weather-cell"></button><a class="doc-link" href="../b3d-weather-cell/">b3d-weather-cell</a></div>
<ul id="tosi-nav-b3d-weather-cell">
<li><a class="doc-link" href="../weather/">weather</a></li>
<li><a class="doc-link" href="../wind/">wind</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-lightning/">b3d-lightning</a></li>
<li><a class="doc-link" href="../b3d-ambient/">b3d-ambient</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-terrain" aria-label="Terrain"></button><a class="doc-link" href="../terrain/">Terrain</a></div>
<ul id="tosi-nav-terrain">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-terrain" aria-label="b3d-terrain"></button><a class="doc-link" href="../b3d-terrain/">b3d-terrain</a></div>
<ul id="tosi-nav-b3d-terrain">
<li><a class="doc-link" href="../biome-chart/">biome-chart</a></li>
<li><a class="doc-link" href="../biome-plugin/">biome-plugin</a></li>
<li><a class="doc-link" href="../slope-profile/">slope-profile</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-landform" aria-label="landform"></button><a class="doc-link" href="../landform/">landform</a></div>
<ul id="tosi-nav-landform">
<li><a class="doc-link" href="../landform-schemas/">landform schemas</a></li>
</ul></li>
<li><a class="doc-link" href="../province-climate/">Province climate</a></li>
<li><a class="doc-link" href="../terrain-editor/">terrainEditor3d</a></li>
<li><a class="doc-link" href="../gradient-filter/">gradient-filter</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-decorator" aria-label="b3d-decorator"></button><a class="doc-link" href="../b3d-decorator/">b3d-decorator</a></div>
<ul id="tosi-nav-b3d-decorator">
<li><a class="doc-link" href="../scatter/">scatter</a></li>
<li><a class="doc-link" href="../procedural-rock/">procedural-rock</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-sdf-lattice" aria-label="Carved landforms"></button><a class="doc-link" href="../sdf-lattice/">Carved landforms</a></div>
<ul id="tosi-nav-sdf-lattice">
<li><a class="doc-link" href="../carve/">carve</a></li>
<li><a class="doc-link" href="../patch-field/">patch-field</a></li>
</ul></li>
<li><a class="doc-link" href="../city-layout/">city-layout</a></li>
<li><a class="doc-link" href="../b3d-city/">b3d-city</a></li>
<li><a class="doc-link" href="../city-traffic/">city-traffic</a></li>
<li><a class="doc-link" href="../window-lights/">window-lights</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-water" aria-label="Water"></button><a class="doc-link" href="../water/">Water</a></div>
<ul id="tosi-nav-water">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-water" aria-label="b3d-water"></button><a class="doc-link" href="../b3d-water/">b3d-water</a></div>
<ul id="tosi-nav-b3d-water">
<li><a class="doc-link" href="../medium/">medium</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-effects" aria-label="Effects"></button><a class="doc-link" href="../effects/">Effects</a></div>
<ul id="tosi-nav-effects">
<li><a class="doc-link" href="../b3d-effect/">b3d-effect</a></li>
<li><a class="doc-link" href="../b3d-particles/">b3d-particles</a></li>
<li><a class="doc-link" href="../b3d-sound/">b3d-sound</a></li>
<li><a class="doc-link" href="../b3d-trail/">b3d-trail</a></li>
<li><a class="doc-link" href="../b3d-exploder/">b3d-exploder</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-characters-and-vehicles" aria-label="Characters and vehicles"></button><a class="doc-link" href="../characters-and-vehicles/">Characters and vehicles</a></div>
<ul id="tosi-nav-characters-and-vehicles">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-biped" aria-label="b3d-biped"></button><a class="doc-link" href="../b3d-biped/">b3d-biped</a></div>
<ul id="tosi-nav-b3d-biped">
<li><a class="doc-link" href="../aim/">aim</a></li>
<li><a class="doc-link" href="../animation-layers/">animation-layers</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-character-core" aria-label="character core"></button><a class="doc-link" href="../character-core/">character core</a></div>
<ul id="tosi-nav-character-core">
<li><a class="doc-link" href="../character-settings/">character settings</a></li>
<li><a class="doc-link" href="../proxy-cover/">proxy-cover</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-skinned-glb" aria-label="skinned-glb"></button><a class="doc-link" href="../skinned-glb/">skinned-glb</a></div>
<ul id="tosi-nav-skinned-glb">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-rigged-body-glb" aria-label="rigged-body-glb"></button><a class="doc-link" href="../rigged-body-glb/">rigged-body-glb</a></div>
<ul id="tosi-nav-rigged-body-glb">
<li><a class="doc-link" href="../spring-vrm/">spring-vrm</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-glb-chunks" aria-label="glb-chunks"></button><a class="doc-link" href="../glb-chunks/">glb-chunks</a></div>
<ul id="tosi-nav-glb-chunks">
<li><a class="doc-link" href="../glb-rig/">glb-rig</a></li>
</ul></li>
<li><a class="doc-link" href="../skin-paint/">skin paint</a></li>
<li><a class="doc-link" href="../cloth-bake/">cloth bake</a></li>
<li><a class="doc-link" href="../eye-art/">eye art</a></li>
<li><a class="doc-link" href="../hair-place/">hair place</a></li>
<li><a class="doc-link" href="../mesh-sdf/">mesh sdf</a></li>
<li><a class="doc-link" href="../fit-extremes/">fit extremes</a></li>
</ul></li>
<li><a class="doc-link" href="../retarget/">retarget</a></li>
<li><a class="doc-link" href="../rigged-body/">rigged-body</a></li>
<li><a class="doc-link" href="../surroundings/">surroundings</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-rig-build" aria-label="auto-rig"></button><a class="doc-link" href="../rig-build/">auto-rig</a></div>
<ul id="tosi-nav-rig-build">
<li><a class="doc-link" href="../rig-markers/">rig markers</a></li>
</ul></li>
<li><a class="doc-link" href="../spring-chain-babylon/">spring bones</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-aircraft" aria-label="b3d-aircraft"></button><a class="doc-link" href="../b3d-aircraft/">b3d-aircraft</a></div>
<ul id="tosi-nav-b3d-aircraft">
<li><a class="doc-link" href="../fly-by-wire/">fly-by-wire</a></li>
<li><a class="doc-link" href="../b3d-hud/">b3d-hud</a></li>
</ul></li>
<li><a class="doc-link" href="../ground-vehicle/">ground-vehicle</a></li>
<li><a class="doc-link" href="../b3d-car/">b3d-car</a></li>
<li><a class="doc-link" href="../b3d-tank/">b3d-tank</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-elevator" aria-label="b3d-elevator"></button><a class="doc-link" href="../b3d-elevator/">b3d-elevator</a></div>
<ul id="tosi-nav-b3d-elevator">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-spatial-transform" aria-label="spatial-transform"></button><a class="doc-link" href="../spatial-transform/">spatial-transform</a></div>
<ul id="tosi-nav-spatial-transform">
<li><a class="doc-link" href="../portal-transform/">portal-transform</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-crowd" aria-label="b3d-crowd"></button><a class="doc-link" href="../b3d-crowd/">b3d-crowd</a></div>
<ul id="tosi-nav-b3d-crowd">
<li><a class="doc-link" href="../vertex-animation/">vertex-animation</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-input" aria-label="Input"></button><a class="doc-link" href="../input/">Input</a></div>
<ul id="tosi-nav-input">
<li><a class="doc-link" href="../b3d-controller/">b3d-controller</a></li>
<li><a class="doc-link" href="../b3d-input-focus/">b3d-input-focus</a></li>
<li><a class="doc-link" href="../glass-gamepad/">glass-gamepad (b3dGamepad)</a></li>
<li><a class="doc-link" href="../touch-orbit/">touch-orbit</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-inspect-view" aria-label="inspect-view"></button><a class="doc-link" href="../inspect-view/">inspect-view</a></div>
<ul id="tosi-nav-inspect-view">
<li><a class="doc-link" href="../seam-material/">seam-material</a></li>
</ul></li>
<li><a class="doc-link" href="../game-controller/">game-controller</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-input-internals" aria-label="How input works"></button><a class="doc-link" href="../input-internals/">How input works</a></div>
<ul id="tosi-nav-input-internals">
<li><a class="doc-link" href="../control-input/">control-input</a></li>
<li><a class="doc-link" href="../b3d-controllable/">b3d-controllable</a></li>
<li><a class="doc-link" href="../virtual-gamepad/">virtual-gamepad</a></li>
<li><a class="doc-link" href="../touch-gamepad/">touch-gamepad</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-interacting" aria-label="Interacting with the world"></button><a class="doc-link" href="../interacting/">Interacting with the world</a></div>
<ul id="tosi-nav-interacting">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-interactive" aria-label="b3d-interactive"></button><a class="doc-link" href="../b3d-interactive/">b3d-interactive</a></div>
<ul id="tosi-nav-b3d-interactive">
<li><a class="doc-link" href="../interaction/">interaction</a></li>
<li><a class="doc-link" href="../interactive-behavior/">interactive-behavior</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-trigger/">b3d-trigger</a></li>
<li><a class="doc-link" href="../b3d-collisions/">b3d-collisions</a></li>
<li><a class="doc-link" href="../b3d-physics/">b3d-physics</a></li>
<li><a class="doc-link" href="../b3d-beacon/">b3d-beacon</a></li>
<li><a class="doc-link" href="../b3d-manipulator/">b3d-manipulator</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-combat" aria-label="Combat"></button><a class="doc-link" href="../combat/">Combat</a></div>
<ul id="tosi-nav-combat">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-destroyable" aria-label="b3d-destroyable"></button><a class="doc-link" href="../b3d-destroyable/">b3d-destroyable</a></div>
<ul id="tosi-nav-b3d-destroyable">
<li><a class="doc-link" href="../destroyable-behavior/">destroyable-behavior</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-launcher" aria-label="b3d-launcher"></button><a class="doc-link" href="../b3d-launcher/">b3d-launcher</a></div>
<ul id="tosi-nav-b3d-launcher">
<li><a class="doc-link" href="../ballistics/">ballistics</a></li>
<li><a class="doc-link" href="../guidance/">guidance</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-warhead/">b3d-warhead</a></li>
<li><a class="doc-link" href="../b3d-turret/">b3d-turret</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-radar" aria-label="b3d-radar"></button><a class="doc-link" href="../b3d-radar/">b3d-radar</a></div>
<ul id="tosi-nav-b3d-radar">
<li><a class="doc-link" href="../b3d-radar-blip/">b3d-radar-blip</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-world-sim" aria-label="World Sim"></button><a class="doc-link" href="../world-sim/">World Sim</a></div>
<ul id="tosi-nav-world-sim">
<li><a class="doc-link" href="../world-contract/">world-contract</a></li>
<li><a class="doc-link" href="../world-store/">world-store</a></li>
<li><a class="doc-link" href="../world-view/">world-view</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-inventory" aria-label="inventory"></button><a class="doc-link" href="../inventory/">inventory</a></div>
<ul id="tosi-nav-inventory">
<li><a class="doc-link" href="../inventory-box/">inventory-box</a></li>
</ul></li>
<li><a class="doc-link" href="../min-sim-conformance/">min-sim-conformance</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-spawner" aria-label="b3d-spawner"></button><a class="doc-link" href="../b3d-spawner/">b3d-spawner</a></div>
<ul id="tosi-nav-b3d-spawner">
<li><a class="doc-link" href="../formations/">formations</a></li>
<li><a class="doc-link" href="../prefab/">prefab</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-death/">b3d-death</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-ui" aria-label="UI"></button><a class="doc-link" href="../ui/">UI</a></div>
<ul id="tosi-nav-ui">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-widgets3d" aria-label="widgets3d"></button><a class="doc-link" href="../widgets3d/">widgets3d</a></div>
<ul id="tosi-nav-widgets3d">
<li><a class="doc-link" href="../widget-box/">widget-box</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-widget-semantics" aria-label="widget semantics"></button><a class="doc-link" href="../widget-semantics/">widget semantics</a></div>
<ul id="tosi-nav-widget-semantics">
<li><a class="doc-link" href="../aria-mirror/">aria mirror</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-carry" aria-label="carry"></button><a class="doc-link" href="../carry/">carry</a></div>
<ul id="tosi-nav-carry">
<li><a class="doc-link" href="../carry-box/">carry-box</a></li>
</ul></li>
<li><a class="doc-link" href="../dials/">dials</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-ui-controls" aria-label="Controls"></button><a class="doc-link" href="../ui-controls/">Controls</a></div>
<ul id="tosi-nav-ui-controls">
<li><a class="doc-link" href="../vector-field/">Coordinate fields</a></li>
<li><a class="doc-link" href="../angle-field/">angle-field</a></li>
<li><a class="doc-link" href="../curve-field/">Curve editor</a></li>
<li><a class="doc-link" href="../footprint-field/">Footprint editor</a></li>
<li><a class="doc-link" href="../color-picker/">colorPicker3d</a></li>
<li><a class="doc-link" href="../material-picker/">materialPicker3d</a></li>
<li><a class="doc-link" href="../material-recipe/">material-recipe</a></li>
<li><a class="doc-link" href="../icon-grid/">Icon grid</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-color-field" aria-label="color3d"></button><a class="doc-link" href="../color-field/">color3d</a></div>
<ul id="tosi-nav-color-field">
<li><a class="doc-link" href="../color/">color</a></li>
</ul></li>
<li><a class="doc-link" href="../picker/">picker</a></li>
<li><a class="doc-link" href="../keyboard/">keyboard</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-table" aria-label="table"></button><a class="doc-link" href="../table/">table</a></div>
<ul id="tosi-nav-table">
<li><a class="doc-link" href="../selection/">selection</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-ui-containers" aria-label="Containers"></button><a class="doc-link" href="../ui-containers/">Containers</a></div>
<ul id="tosi-nav-ui-containers">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-box" aria-label="box"></button><a class="doc-link" href="../box/">box</a></div>
<ul id="tosi-nav-box">
<li><a class="doc-link" href="../flow-layout/">flow-layout</a></li>
<li><a class="doc-link" href="../anchor-layout/">anchor-layout</a></li>
</ul></li>
<li><a class="doc-link" href="../surface/">surface</a></li>
<li><a class="doc-link" href="../popup-surface/">popup-surface</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-ui-in-scene" aria-label="In the scene and XR"></button><a class="doc-link" href="../ui-in-scene/">In the scene and XR</a></div>
<ul id="tosi-nav-ui-in-scene">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-panel" aria-label="b3d-panel"></button><a class="doc-link" href="../b3d-panel/">b3d-panel</a></div>
<ul id="tosi-nav-b3d-panel">
<li><a class="doc-link" href="../frame-panel/">frame-panel</a></li>
<li><a class="doc-link" href="../xr-frames/">xr-frames</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-system-bar" aria-label="system-bar"></button><a class="doc-link" href="../system-bar/">system-bar</a></div>
<ul id="tosi-nav-system-bar">
<li><a class="doc-link" href="../bar-menu/">bar-menu</a></li>
</ul></li>
</ul></li>
<li><a class="doc-link" href="../b3d-svg-plane/">b3d-svg-plane</a></li>
<li><a class="doc-link" href="../svg-texture/">svg-texture</a></li>
<li><a class="doc-link" href="../gamepad-focus/">gamepad-focus</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-ui-theme" aria-label="Theme and icons"></button><a class="doc-link" href="../ui-theme/">Theme and icons</a></div>
<ul id="tosi-nav-ui-theme">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-w3d-theme" aria-label="w3d-theme"></button><a class="doc-link" href="../w3d-theme/">w3d-theme</a></div>
<ul id="tosi-nav-w3d-theme">
<li><a class="doc-link" href="../theme-editor/">theme-editor</a></li>
</ul></li>
<li><a class="doc-link" href="../svg-icons/">svg-icons</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-space" aria-label="Space"></button><a class="doc-link" href="../space/">Space</a></div>
<ul id="tosi-nav-space">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-galaxy" aria-label="b3d-galaxy"></button><a class="doc-link" href="../b3d-galaxy/">b3d-galaxy</a></div>
<ul id="tosi-nav-b3d-galaxy">
<li><a class="doc-link" href="../voxel-galaxy/">voxel-galaxy</a></li>
</ul></li>
<li><a class="doc-link" href="../b3d-star-system/">b3d-star-system</a></li>
<li><a class="doc-link" href="../b3d-star/">b3d-star</a></li>
<li><a class="doc-link" href="../b3d-planet/">b3d-planet</a></li>
<li><a class="doc-link" href="../gas-giant/">gas-giant</a></li>
<li><a class="doc-link" href="../rocky-world/">rocky-world</a></li>
<li><a class="doc-link" href="../b3d-black-hole/">b3d-black-hole</a></li>
<li><a class="doc-link" href="../sphere-map/">sphere-map</a></li>
<li><a class="doc-link" href="../planet-map/">planet-map</a></li>
<li><a class="doc-link" href="../space-backdrop/">space-backdrop</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-performance" aria-label="Performance"></button><a class="doc-link" href="../performance/">Performance</a></div>
<ul id="tosi-nav-performance">
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-b3d-probe" aria-label="b3d-probe"></button><a class="doc-link" href="../b3d-probe/">b3d-probe</a></div>
<ul id="tosi-nav-b3d-probe">
<li><a class="doc-link" href="../perf-probe/">perf-probe</a></li>
<li><a class="doc-link" href="../b3d-quality/">b3d-quality</a></li>
</ul></li>
<li><a class="doc-link" href="../cost-sweep/">Cost sweep</a></li>
<li><a class="doc-link" href="../draw-order/">Draw order</a></li>
<li><a class="doc-link" href="../debug-sink/">debug-sink</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-utilities" aria-label="utilities"></button><a class="doc-link" href="../utilities/">utilities</a></div>
<ul id="tosi-nav-utilities">
<li><a class="doc-link" href="../clock/">clock</a></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-upgrading" aria-label="Upgrading"></button><a class="doc-link" href="../upgrading/">Upgrading</a></div>
<ul id="tosi-nav-upgrading">
<li><a class="doc-link" href="../Migration/">Migration</a></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-CHANGELOG" aria-label="Changelog"></button><a class="doc-link" href="../CHANGELOG/">Changelog</a></div>
<ul id="tosi-nav-CHANGELOG">
<li><a class="doc-link" href="../v0.12.3/">0.12.3</a></li>
<li><a class="doc-link" href="../v0.12.2/">0.12.2</a></li>
<li><a class="doc-link" href="../v0.12.1/">0.12.1</a></li>
<li><a class="doc-link" href="../v0.12.0/">0.12.0</a></li>
<li><a class="doc-link" href="../v0.11.6/">0.11.6</a></li>
<li><a class="doc-link" href="../v0.11.5/">0.11.5</a></li>
<li><a class="doc-link" href="../v0.11.4/">0.11.4</a></li>
<li><a class="doc-link" href="../v0.11.3/">0.11.3</a></li>
<li><a class="doc-link" href="../v0.11.2/">0.11.2</a></li>
<li><a class="doc-link" href="../v0.11.1/">0.11.1</a></li>
<li><a class="doc-link" href="../v0.11.0/">0.11.0</a></li>
<li><a class="doc-link" href="../v0.10.20/">0.10.20</a></li>
<li><a class="doc-link" href="../v0.10.19/">0.10.19</a></li>
<li><a class="doc-link" href="../v0.10.18/">0.10.18</a></li>
<li><a class="doc-link" href="../v0.10.17/">0.10.17</a></li>
<li><a class="doc-link" href="../v0.10.16/">0.10.16</a></li>
<li><a class="doc-link" href="../v0.10.15/">0.10.15</a></li>
<li><a class="doc-link" href="../v0.10.14/">0.10.14</a></li>
<li><a class="doc-link" href="../v0.10.13/">0.10.13</a></li>
<li><a class="doc-link" href="../v0.10.12/">0.10.12</a></li>
<li><a class="doc-link" href="../v0.10.11/">0.10.11</a></li>
<li><a class="doc-link" href="../v0.10.10/">0.10.10</a></li>
<li><a class="doc-link" href="../v0.10.9/">0.10.9</a></li>
<li><a class="doc-link" href="../v0.10.8/">0.10.8</a></li>
<li><a class="doc-link" href="../v0.10.7/">0.10.7</a></li>
<li><a class="doc-link" href="../v0.10.6/">0.10.6</a></li>
<li><a class="doc-link" href="../v0.10.5/">0.10.5</a></li>
<li><a class="doc-link" href="../v0.10.4/">0.10.4</a></li>
<li><a class="doc-link" href="../v0.10.3/">0.10.3</a></li>
<li><a class="doc-link" href="../v0.10.2/">0.10.2</a></li>
<li><a class="doc-link" href="../v0.10.1/">0.10.1</a></li>
<li><a class="doc-link" href="../v0.10.0/">0.10.0</a></li>
<li><a class="doc-link" href="../v0.9.0/">0.9.0</a></li>
<li><a class="doc-link" href="../v0.8.15/">0.8.15</a></li>
<li><a class="doc-link" href="../v0.8.14/">0.8.14</a></li>
<li><a class="doc-link" href="../v0.8.13/">0.8.13</a></li>
<li><a class="doc-link" href="../v0.8.12/">0.8.12</a></li>
<li><a class="doc-link" href="../v0.8.11/">0.8.11</a></li>
<li><a class="doc-link" href="../v0.8.10/">0.8.10</a></li>
<li><a class="doc-link" href="../v0.8.9/">0.8.9</a></li>
<li><a class="doc-link" href="../v0.8.8/">0.8.8</a></li>
<li><a class="doc-link" href="../v0.8.7/">0.8.7</a></li>
<li><a class="doc-link" href="../v0.8.6/">0.8.6</a></li>
<li><a class="doc-link" href="../v0.8.5/">0.8.5</a></li>
<li><a class="doc-link" href="../v0.8.4/">0.8.4</a></li>
<li><a class="doc-link" href="../v0.8.3/">0.8.3</a></li>
<li><a class="doc-link" href="../v0.8.2/">0.8.2</a></li>
<li><a class="doc-link" href="../v0.8.1/">0.8.1</a></li>
<li><a class="doc-link" href="../v0.8.0/">0.8.0</a></li>
<li><a class="doc-link" href="../v0.7.8/">0.7.8</a></li>
<li><a class="doc-link" href="../v0.7.7/">0.7.7</a></li>
<li><a class="doc-link" href="../v0.7.6/">0.7.6</a></li>
<li><a class="doc-link" href="../v0.7.5/">0.7.5</a></li>
<li><a class="doc-link" href="../v0.7.4/">0.7.4</a></li>
<li><a class="doc-link" href="../v0.7.3/">0.7.3</a></li>
<li><a class="doc-link" href="../v0.7.2/">0.7.2</a></li>
<li><a class="doc-link" href="../v0.7.1/">0.7.1</a></li>
<li><a class="doc-link" href="../v0.7.0/">0.7.0</a></li>
<li><a class="doc-link" href="../v0.7.0-rc.1/">0.7.0-rc.1</a></li>
<li><a class="doc-link" href="../v0.6.2/">0.6.2</a></li>
<li><a class="doc-link" href="../v0.6.1/">0.6.1</a></li>
<li><a class="doc-link" href="../v0.6.0/">0.6.0</a></li>
<li><a class="doc-link" href="../v0.5.2/">0.5.2</a></li>
<li><a class="doc-link" href="../v0.5.1/">0.5.1</a></li>
<li><a class="doc-link" href="../v0.5.0/">0.5.0</a></li>
</ul></li>
</ul></li>
<li class="nav-branch"><div class="nav-branch-head"><button type="button" class="nav-toggle" aria-expanded="false" aria-controls="tosi-nav-reference" aria-label="Reference"></button><a class="doc-link" href="../reference/">Reference</a></div>
<ul id="tosi-nav-reference">
<li><a class="doc-link" href="../mersenne-twister/">Pseudo Random Numbers</a></li>
<li><a class="doc-link" href="../perlin-noise/">perlin-noise</a></li>
<li><a class="doc-link" href="../noise-texture/">Noise texture</a></li>
</ul></li>
<li><a class="doc-link" href="../design-notes/">Design notes</a></li>
<li><a class="doc-link" href="../acknowledgements/">Acknowledgements</a></li>
</ul>
</nav>
<ul class="doc-navbar">
<li><a href="https://tosijs.net" data-icon="tosi">tosijs</a></li>
<li><a href="https://github.com/tonioloewald/tosijs-3d" data-icon="github">github</a></li>
<li><a href="https://www.npmjs.com/package/tosijs-3d" data-icon="npm">npmjs</a></li>
</ul>
</tosi-doc-system>
<script type="module" src="../hydrate-6cqawqfh.js"></script>
</body>
</html>