Render docs
Some checks failed
Check / check (push) Failing after 20s
Publish / build (push) Failing after 20s
Publish / publish-npm (push) Has been skipped

This commit is contained in:
Andras Schmelczer 2026-06-10 22:31:01 +01:00
parent fb40343c40
commit 94206f299e
22 changed files with 61 additions and 61 deletions

View file

@ -12,34 +12,34 @@ that can be changed during runtime.</p>
<a href="#textures" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>textures</span></a>
<a href="#tilemultiplier" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>tile<wbr/>Multiplier</span></a>
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="ambientlight"><span>ambient<wbr/>Light</span><a href="#ambientlight" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">ambientLight</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">vec3</span></div><div class="tsd-comment tsd-typography"><p>A light affecting every pixel (even the ones inside objects).</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:91</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="colorpalette"><span>color<wbr/>Palette</span><a href="#colorpalette" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">colorPalette</span><span class="tsd-signature-symbol">:</span> (<br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">IndexedCollection</span><br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><br/>)<span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>Its length should be less than the one specified in [[StartupSettings]].paletteSize.</p>
<p>The possible colors for the objects. Each color is referenced by its index in the
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:91</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="colorpalette"><span>color<wbr/>Palette</span><a href="#colorpalette" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">colorPalette</span><span class="tsd-signature-symbol">:</span> (<br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">IndexedCollection</span><br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><br/>)<span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>The possible colors for the objects. Each color is referenced by its index in the
palette.</p>
<p>Can have transparency, but only if WebGL2 support is enabled.</p>
<p>Its length should be less than the <code>paletteSize</code> specified in [[StartupSettings]].</p>
<p>Colors can have transparency, but only if WebGL2 support is enabled.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:49</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="distancerenderscale"><span>distance<wbr/>Render<wbr/>Scale</span><a href="#distancerenderscale" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">distanceRenderScale</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The resolution of the distance field rendering will be scaled up or down with this value.</p>
<p>Because of interpolation, this can be set much lower than the <code>lightsRenderScale</code>, while
maintaining closely the same perceived quality.</p>
<p>Setting this is a great way to balance quality and performance.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:59</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enablehighdpirendering"><span>enable<wbr/>High<wbr/>Dpi<wbr/>Rendering</span><a href="#enablehighdpirendering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">enableHighDpiRendering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>When set to <code>true</code> rendering will be done on the screen's real resolution.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:59</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enablehighdpirendering"><span>enable<wbr/>High<wbr/>Dpi<wbr/>Rendering</span><a href="#enablehighdpirendering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">enableHighDpiRendering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>When set to <code>true</code>, rendering will be done at the screen's real resolution.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:14</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="isworldinverted"><span>is<wbr/>World<wbr/>Inverted</span><a href="#isworldinverted" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">isWorldInverted</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>By default, every pixel is outside of objects. Flipping this value to <code>true</code> will
result in every pixel being inside a large object. From then it only makes sense to
result in every pixel being inside a large object. From then on, it only makes sense to
draw inverted objects.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:33</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="lightcutoffdistance"><span>light<wbr/>Cutoff<wbr/>Distance</span><a href="#lightcutoffdistance" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">lightCutoffDistance</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>When lights reach the end of the display, they are slowly faded out. The length
of this phaseout can be set through this value.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:33</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="lightcutoffdistance"><span>light<wbr/>Cutoff<wbr/>Distance</span><a href="#lightcutoffdistance" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">lightCutoffDistance</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>When lights reach the edge of the display, they are slowly faded out. The length
of this fade-out can be set through this value.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:39</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="lightsrenderscale"><span>lights<wbr/>Render<wbr/>Scale</span><a href="#lightsrenderscale" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">lightsRenderScale</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The resolution of the final frame will be scaled by this value.</p>
<p>Setting this is a great way to balance quality and performance.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:66</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="motionblur"><span>motion<wbr/>Blur</span><a href="#motionblur" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">motionBlur</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>Set the extent of the motion blur.</p>
<p>The values must be between 0 and 1. Where 0 means no motion blur,
and values just below 1 mean an extreme amount of motion blur.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:74</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="textures"><span>textures</span><a href="#textures" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">textures</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">textureName</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">TexImageSource</span> <span class="tsd-signature-symbol">|</span> <a href="../types/graphics_graphics-library_texture_texture-options.TextureWithOptions.html" class="tsd-signature-type tsd-kind-type-alias">TextureWithOptions</a> <span class="tsd-signature-symbol">}</span></div><div class="tsd-comment tsd-typography"><p>It is possible to use your own textures in your SDF definitions.</p>
<p>The keys of the object should be the name used to reference them in the GLSL code,
and the values should be the textures themselves or a TextureWithOptions specifying
<p>The keys of the object should be the names used to reference them in the GLSL code,
and the values should be the textures themselves, or a TextureWithOptions specifying
the texture's [[TextureOptions]].
It can be a canvas, img element, Image and so on.</p>
A texture can be a canvas, an img element, an Image, and so on.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/runtime-settings.ts:84</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="tilemultiplier"><span>tile<wbr/>Multiplier</span><a href="#tilemultiplier" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">tileMultiplier</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>First, the SDF of the scene is evaluated at every single pixel.
For speeding this process up, the screen is divided up into tiles,
this way each having to deal with a fewer objects.</p>
<p>For each tile, it is decided which objects are near its close vicinity.
To speed this process up, the screen is divided into tiles,
so each one has to deal with fewer objects.</p>
<p>For each tile, it is decided which objects are in its vicinity.
This comes with some overhead for the CPU, while saving the GPU from loads of
calculations. The workload can be balanced between the CPU and the GPU by setting
this number.</p>