andras/sdf-2d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: andras:4d967490876d602ff79804709f71ddd124794ec8
Branches Tags
andras:main
andras:0.8.0
...
compare: andras:94206f299e3a546fc80df29ea9c75971a935cd10
Branches Tags
andras:main
andras:0.8.0

4 commits
4d96749087 ... 94206f299e

Author SHA1 Message Date
Andras Schmelczer
94206f299e Render docs
Some checks failed
Check / check (push) Failing after 20s
Details
Publish / build (push) Failing after 20s
Details
Publish / publish-npm (push) Has been skipped
Details
2026-06-10 22:31:01 +01:00
Andras Schmelczer
fb40343c40 Improve docs language 2026-06-10 22:29:50 +01:00
Andras Schmelczer
4d94fdeec8 Ensure all shapes are unique 2026-06-10 22:29:40 +01:00
Andras Schmelczer
c2f61a2f7e Update docs 2026-06-10 22:05:32 +01:00
42 changed files with 262 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/assets/search.js
View file

File diff suppressed because one or more lines are too long

4
docs/classes/drawables_drawable.Drawable.html
View file

@ -14,6 +14,6 @@ before being returned.</p>
</div></li><li><span><span class="tsd-kind-parameter">transform1d</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>scalar properties should be transformed by this number
before being returned.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources"><ul><li>Defined in drawables/drawable.ts:34</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mindistance"><code class="tsd-tag">Abstract</code><span>min<wbr/>Distance</span><a href="#mindistance" 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><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="mindistance-1"><span class="tsd-kind-call-signature">minDistance</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">vec2</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><a href="#mindistance-1" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>The lower bound of the distance between the target and the object.</p>
<p>It can return 0 by default, the only consequence of this, is a reduced performance.
Because this object won't benefit from tile-based rendering.</p>
<p>It can return 0 by default; the only consequence is reduced performance,
because this object won't benefit from tile-based rendering.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">target</span>: <span class="tsd-signature-type">vec2</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources"><ul><li>Defined in drawables/drawable.ts:24</li></ul></aside></div></li></ul></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Constructors"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Constructors</summary><div><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Constructor"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><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>Properties</summary><div><a href="#descriptor"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>descriptor</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Methods</summary><div><a href="#getobjecttoserialize" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>get<wbr/>Object<wbr/>To<wbr/>Serialize</span></a><a href="#mindistance"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>min<wbr/>Distance</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

4
docs/classes/drawables_lights_circle-light.CircleLight.html
View file

File diff suppressed because one or more lines are too long

4
docs/classes/drawables_lights_flashlight.Flashlight.html
View file

File diff suppressed because one or more lines are too long

4
docs/classes/drawables_shapes_colorful-circle.ColorfulCircle.html
View file

File diff suppressed because one or more lines are too long

4
docs/classes/drawables_shapes_polygon-factory.PolygonBase.html
View file

@ -10,6 +10,6 @@ before being returned.</p>
</div></li><li><span><span class="tsd-kind-parameter">transform1d</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>scalar properties should be transformed by this number
before being returned.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources"><p>Inherited from EmptyDrawable.getObjectToSerialize</p><ul><li>Defined in drawables/empty-drawable.ts:19</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited"><h3 class="tsd-anchor-link" id="mindistance"><span>min<wbr/>Distance</span><a href="#mindistance" 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><ul class="tsd-signatures tsd-is-inherited"><li class="tsd-is-inherited"><div class="tsd-signature tsd-anchor-link" id="mindistance-1"><span class="tsd-kind-call-signature">minDistance</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">vec2</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><a href="#mindistance-1" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>The lower bound of the distance between the target and the object.</p>
<p>It can return 0 by default, the only consequence of this, is a reduced performance.
Because this object won't benefit from tile-based rendering.</p>
<p>It can return 0 by default; the only consequence is reduced performance,
because this object won't benefit from tile-based rendering.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">target</span>: <span class="tsd-signature-type">vec2</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><aside class="tsd-sources"><p>Inherited from EmptyDrawable.minDistance</p><ul><li>Defined in drawables/empty-drawable.ts:14</li></ul></aside></div></li></ul></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Constructors"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Constructors</summary><div><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Constructor"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><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>Properties</summary><div><a href="#vertices"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>vertices</span></a><a href="#descriptor" class="tsd-is-inherited"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>descriptor</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Methods</summary><div><a href="#getobjecttoserialize" class="tsd-is-protected tsd-is-inherited"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>get<wbr/>Object<wbr/>To<wbr/>Serialize</span></a><a href="#mindistance" class="tsd-is-inherited"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>min<wbr/>Distance</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

11
docs/classes/graphics_rendering_fps-quality-autoscaler.FpsQualityAutoscaler.html
View file

File diff suppressed because one or more lines are too long

4
docs/classes/helper_delta-time-calculator.DeltaTimeCalculator.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>DeltaTimeCalculator | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/helper_delta-time-calculator.html">helper/delta-time-calculator</a></li><li><a href="" aria-current="page">DeltaTimeCalculator</a></li></ul><h1>Class DeltaTimeCalculator</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>A helper class for calculating the elapsed time between frames.</p>
<p>Handles the case, where the browser tab is not in focus and <code>requestAnimationFrame</code>
does not get called for performance reasons. In this case, the return deltaTime won't be
<p>Handles the case where the browser tab is not in focus and <code>requestAnimationFrame</code>
does not get called for performance reasons. In this case, the returned deltaTime won't be
an unreasonably large value.</p>
</div></section><aside class="tsd-sources"><ul><li>Defined in helper/delta-time-calculator.ts:8</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Constructor"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="#destroy" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>destroy</span></a>

4
docs/enums/graphics_graphics-library_texture_texture-options.WrapOptions.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>WrapOptions | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/graphics_graphics-library_texture_texture-options.html">graphics/graphics-library/texture/texture-options</a></li><li><a href="" aria-current="page">WrapOptions</a></li></ul><h1>Enumeration WrapOptions</h1></div><aside class="tsd-sources"><ul><li>Defined in graphics/graphics-library/texture/texture-options.ts:1</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Enumeration Members</h3><div class="tsd-index-list"><a href="#clamp_to_edge" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Enumeration Member"><use href="../assets/icons.svg#icon-16"></use></svg><span>CLAMP_<wbr/>TO_<wbr/>EDGE</span></a>
<a href="#mirrored_repeat" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Enumeration Member"><use href="../assets/icons.svg#icon-16"></use></svg><span>MIRRORED_<wbr/>REPEAT</span></a>
<a href="#repeat" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Enumeration Member"><use href="../assets/icons.svg#icon-16"></use></svg><span>REPEAT</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-Enumeration Members"><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>Enumeration Members</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="clamp_to_edge"><span>CLAMP_<wbr/>TO_<wbr/>EDGE</span><a href="#clamp_to_edge" 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-enum-member">CLAMP_TO_EDGE</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">&quot;CLAMP_TO_EDGE&quot;</span></div><aside class="tsd-sources"><ul><li>Defined in graphics/graphics-library/texture/texture-options.ts:2</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mirrored_repeat"><span>MIRRORED_<wbr/>REPEAT</span><a href="#mirrored_repeat" 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-enum-member">MIRRORED_REPEAT</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">&quot;MIRRORED_REPEAT&quot;</span></div><div class="tsd-comment tsd-typography"><p>On WebGL it only work with power of 2 texture sizes.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/graphics-library/texture/texture-options.ts:12</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="repeat"><span>REPEAT</span><a href="#repeat" 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-enum-member">REPEAT</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">&quot;REPEAT&quot;</span></div><div class="tsd-comment tsd-typography"><p>On WebGL it only work with power of 2 texture sizes.</p>
</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-Enumeration Members"><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>Enumeration Members</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="clamp_to_edge"><span>CLAMP_<wbr/>TO_<wbr/>EDGE</span><a href="#clamp_to_edge" 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-enum-member">CLAMP_TO_EDGE</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">&quot;CLAMP_TO_EDGE&quot;</span></div><aside class="tsd-sources"><ul><li>Defined in graphics/graphics-library/texture/texture-options.ts:2</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mirrored_repeat"><span>MIRRORED_<wbr/>REPEAT</span><a href="#mirrored_repeat" 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-enum-member">MIRRORED_REPEAT</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">&quot;MIRRORED_REPEAT&quot;</span></div><div class="tsd-comment tsd-typography"><p>On WebGL, this only works with power-of-2 texture sizes.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/graphics-library/texture/texture-options.ts:12</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="repeat"><span>REPEAT</span><a href="#repeat" 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-enum-member">REPEAT</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">&quot;REPEAT&quot;</span></div><div class="tsd-comment tsd-typography"><p>On WebGL, this only works with power-of-2 texture sizes.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/graphics-library/texture/texture-options.ts:7</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Enumeration Members"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Enumeration Members</summary><div><a href="#clamp_to_edge"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Enumeration Member"><use href="../assets/icons.svg#icon-16"></use></svg><span>CLAMP_<wbr/>TO_<wbr/>EDGE</span></a><a href="#mirrored_repeat"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Enumeration Member"><use href="../assets/icons.svg#icon-16"></use></svg><span>MIRRORED_<wbr/>REPEAT</span></a><a href="#repeat"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Enumeration Member"><use href="../assets/icons.svg#icon-16"></use></svg><span>REPEAT</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

8
docs/functions/compile.compile.html
View file

@ -1,10 +1,10 @@
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>compile | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/compile.html">compile</a></li><li><a href="" aria-current="page">compile</a></li></ul><h1>Function compile</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="compile"><span class="tsd-kind-call-signature">compile</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">canvas</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">descriptors</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/drawables_drawable-descriptor.DrawableDescriptor.html" class="tsd-signature-type tsd-kind-interface">DrawableDescriptor</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">settingsOverrides</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/graphics_rendering_settings_startup-settings.StartupSettings.html" class="tsd-signature-type tsd-kind-interface">StartupSettings</a><span class="tsd-signature-symbol">&gt;</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">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/graphics_rendering_renderer_renderer.Renderer.html" class="tsd-signature-type tsd-kind-interface">Renderer</a><span class="tsd-signature-symbol">&gt;</span><a href="#compile" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Compiles a new renderer instance. There can multiple renderers on a single page.</p>
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>compile | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/compile.html">compile</a></li><li><a href="" aria-current="page">compile</a></li></ul><h1>Function compile</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="compile"><span class="tsd-kind-call-signature">compile</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">canvas</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">descriptors</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/drawables_drawable-descriptor.DrawableDescriptor.html" class="tsd-signature-type tsd-kind-interface">DrawableDescriptor</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">settingsOverrides</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/graphics_rendering_settings_startup-settings.StartupSettings.html" class="tsd-signature-type tsd-kind-interface">StartupSettings</a><span class="tsd-signature-symbol">&gt;</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">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/graphics_rendering_renderer_renderer.Renderer.html" class="tsd-signature-type tsd-kind-interface">Renderer</a><span class="tsd-signature-symbol">&gt;</span><a href="#compile" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Compiles a new renderer instance. There can be multiple renderers on a single page.</p>
<blockquote>
<p>Asynchronous behaviour is required for parallel shader compiling.
Trying to draw before the returned promise resolves, results in no action taken.
Settings can be set before promise resolution and they will be applied later.</p>
Trying to draw before the returned promise resolves results in no action being taken.
Settings can be set before the promise resolves and they will be applied later.</p>
</blockquote>
<p>The descriptors of every to-be-drawn objects are required before creating the renderer,
<p>The descriptors of all to-be-drawn objects are required before creating the renderer,
allowing the compiler to only create the shaders that will actually be used.</p>
<p>Example usage:</p>
<pre><code class="js"><span class="hl-1"> </span><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-2">compile</span><span class="hl-1">, </span><span class="hl-2">hsl</span><span class="hl-1">, </span><span class="hl-2">CircleFactory</span><span class="hl-1">, </span><span class="hl-2">CircleLight</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-6">&#39;sdf-2d&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-7">canvas</span><span class="hl-1"> = </span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-4">querySelector</span><span class="hl-1">(</span><span class="hl-6">&#39;canvas&#39;</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-7">Circle</span><span class="hl-1"> = </span><span class="hl-4">CircleFactory</span><span class="hl-1">(</span><span class="hl-4">hsl</span><span class="hl-1">(</span><span class="hl-5">30</span><span class="hl-1">, </span><span class="hl-5">66</span><span class="hl-1">, </span><span class="hl-5">50</span><span class="hl-1">));</span><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-7">renderer</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">compile</span><span class="hl-1">(</span><span class="hl-2">canvas</span><span class="hl-1">, [</span><span class="hl-2">Circle</span><span class="hl-1">.</span><span class="hl-2">descriptor</span><span class="hl-1">, </span><span class="hl-2">CircleLight</span><span class="hl-1">.</span><span class="hl-2">descriptor</span><span class="hl-1">]);</span>

2
docs/functions/drawables_shapes_circle-factory.CircleFactory.html
View file

File diff suppressed because one or more lines are too long

2
docs/functions/drawables_shapes_droplet-factory.DropletFactory.html
View file

File diff suppressed because one or more lines are too long

2
docs/functions/drawables_shapes_hexagon-factory.HexagonFactory.html
View file

File diff suppressed because one or more lines are too long

2
docs/functions/drawables_shapes_inverted-tunnel-factory.InvertedTunnelFactory.html
View file

@ -1,2 +1,2 @@
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>InvertedTunnelFactory | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/drawables_shapes_inverted-tunnel-factory.html">drawables/shapes/inverted-tunnel-factory</a></li><li><a href="" aria-current="page">InvertedTunnelFactory</a></li></ul><h1>Function InvertedTunnelFactory</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="invertedtunnelfactory"><span class="tsd-kind-call-signature">InvertedTunnelFactory</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">color</span><span class="tsd-signature-symbol">:</span><br/>        <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</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><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">typeof</span> <span class="tsd-signature-type">InvertedTunnelBase</span><a href="#invertedtunnelfactory" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Providing a noise texture is required for this drawable.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">color</span>: <br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</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></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-keyword">typeof</span> <span class="tsd-signature-type">InvertedTunnelBase</span></h4><aside class="tsd-sources"><ul><li>Defined in drawables/shapes/inverted-tunnel-factory.ts:27</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">color</span>: <br/>    <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</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></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-keyword">typeof</span> <span class="tsd-signature-type">InvertedTunnelBase</span></h4><aside class="tsd-sources"><ul><li>Defined in drawables/shapes/inverted-tunnel-factory.ts:29</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

2
docs/functions/drawables_shapes_noisy-polygon-factory.NoisyPolygonFactory.html
View file

File diff suppressed because one or more lines are too long

2
docs/functions/drawables_shapes_polygon-factory.PolygonFactory.html
View file

File diff suppressed because one or more lines are too long

2
docs/functions/drawables_shapes_rotated-rectangle-factory.RotatedRectangleFactory.html
View file

File diff suppressed because one or more lines are too long

9
docs/functions/graphics_rendering_renderer_noise-renderer.renderNoise.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>renderNoise | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/graphics_rendering_renderer_noise-renderer.html">graphics/rendering/renderer/noise-renderer</a></li><li><a href="" aria-current="page">renderNoise</a></li></ul><h1>Function renderNoise</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="rendernoise"><span class="tsd-kind-call-signature">renderNoise</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">textureSize</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ReadonlyVec2</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">scale</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">amplitude</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">ignoreWebGL2</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</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">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol">&gt;</span><a href="#rendernoise" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Create a renderer, draw a 2D noise texture with it,
then destroy the used resources,
while returning the generated texture in the form of a canvas.</p>
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>renderNoise | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/graphics_rendering_renderer_noise-renderer.html">graphics/rendering/renderer/noise-renderer</a></li><li><a href="" aria-current="page">renderNoise</a></li></ul><h1>Function renderNoise</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="rendernoise"><span class="tsd-kind-call-signature">renderNoise</span><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">textureSize</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ReadonlyVec2</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">scale</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">amplitude</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">ignoreWebGL2</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</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">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol">&gt;</span><a href="#rendernoise" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Create a renderer, draw a 2D noise texture with it, then destroy the
resources it used, returning the generated texture in the form of a canvas.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">textureSize</span>: <span class="tsd-signature-type">ReadonlyVec2</span></span><div class="tsd-comment tsd-typography"><p>The resolution of the end result</p>
</div></li><li><span><span class="tsd-kind-parameter">scale</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>A starting value can be 15</p>
</div></li><li><span><span class="tsd-kind-parameter">amplitude</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>A starting value can be 1</p>
</div></li><li><span><span class="tsd-kind-parameter">scale</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>A good starting value is 15</p>
</div></li><li><span><span class="tsd-kind-parameter">amplitude</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>A good starting value is 1</p>
</div></li><li><span><span class="tsd-kind-parameter">ignoreWebGL2</span>: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></span><div class="tsd-comment tsd-typography"><p>Ignore WebGL2, even when it's available</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol">&gt;</span></h4><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/renderer/noise-renderer.ts:21</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

8
docs/functions/run-animation.runAnimation.html
View file

File diff suppressed because one or more lines are too long

32
docs/index.html
View file

@ -10,44 +10,44 @@
</ul>
<h2 id="usage-1st-option" class="tsd-anchor-link">Usage (1st option)<a href="#usage-1st-option" 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></h2>
<ul>
<li>To start using cutting-edge 2D graphics, first you have get a renderer instance. This is possible by calling the <a href="globals.html#compile">compile function</a>.
<li>To start using cutting-edge 2D graphics, you first need a renderer instance. You can get one by calling the <a href="globals.html#compile">compile function</a>.
<ul>
<li>For this, some <a href="interfaces/drawabledescriptor.html">DrawableDescriptors</a> has to be provided.</li>
<li>Optionally, default compile settings can overridden using <a href="interfaces/startupsettings.html">StartupSettings</a>.</li>
<li>For this, you have to provide one or more <a href="interfaces/drawabledescriptor.html">DrawableDescriptors</a>.</li>
<li>Optionally, the default compile settings can be overridden using <a href="interfaces/startupsettings.html">StartupSettings</a>.</li>
</ul>
</li>
<li>After acquiring a renderer, the drawing of objects can be started through the <a href="interfaces/renderer.html">Renderer</a> interface.</li>
<li>Once you have a renderer, you can start drawing objects through the <a href="interfaces/renderer.html">Renderer</a> interface.</li>
</ul>
<h2 id="usage-2nd-option" class="tsd-anchor-link">Usage (2nd option)<a href="#usage-2nd-option" 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></h2>
<p>If you're planning on creating animated content, use the <a href="globals.html#runanimation">runAnimation function</a> to spare yourself from writing boilerplate code.
Further documentation on its usage is available in its <a href="globals.html#runanimation">documentation</a>.</p>
<p>If you're planning to create animated content, use the <a href="globals.html#runanimation">runAnimation function</a> to save yourself from writing boilerplate code.
See its <a href="globals.html#runanimation">documentation</a> for more details.</p>
<h2 id="extending-drawables" class="tsd-anchor-link">Extending drawables<a href="#extending-drawables" 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></h2>
<blockquote>
<p>Iñigo Quilez has some great <a href="https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm">2D SDF-s</a></p>
<p>Iñigo Quilez has a great collection of <a href="https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm">2D SDFs</a></p>
</blockquote>
<ul>
<li>Subclass <a href="classes/drawable.html">Drawable</a></li>
<li>Implement its abstract methods</li>
<li>Add a static property to your class called <code>descriptor</code> of type <a href="interfaces/drawabledescriptor.html">DrawableDescriptors</a></li>
<li>Follow the instructions given in <a href="#usage">Usage</a></li>
<li>Add a static <code>descriptor</code> property of type <a href="interfaces/drawabledescriptor.html">DrawableDescriptor</a> to your class</li>
<li>Follow the instructions given in <a href="#usage-1st-option">Usage</a></li>
</ul>
<h2 id="useful-to-know" class="tsd-anchor-link">Useful to know<a href="#useful-to-know" 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></h2>
<h3 id="math" class="tsd-anchor-link">Math<a href="#math" 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>
<p>The <code>vec2</code>, <code>vec3</code>, and <code>vec4</code> types seen in the documentation come from the <a href="http://glmatrix.net/">glMatrix</a> library and are equivalent to regular JS Arrays or Float32Arrays. So, feel free to give <code>[x, y]</code> as an input for functions requiring <code>vec2</code>.</p>
<p>The <code>vec2</code>, <code>vec3</code>, and <code>vec4</code> types seen in the documentation come from the <a href="http://glmatrix.net/">glMatrix</a> library and are equivalent to regular JS Arrays or Float32Arrays, so feel free to pass <code>[x, y]</code> to functions that expect a <code>vec2</code>.</p>
<h3 id="coordinates" class="tsd-anchor-link">Coordinates<a href="#coordinates" 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>
<p>Anywhere, where positions need to be specified, the <code>y</code> values grow upwards. That means, when setting the view area, the origin is at the bottom left corner of the display.</p>
<p>Wherever positions need to be specified, the <code>y</code> axis grows upwards. This means that when you set the view area, the origin is at the bottom-left corner of the display.</p>
<h3 id="tile-based-rendering" class="tsd-anchor-link">Tile-based rendering<a href="#tile-based-rendering" 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>
<p>For optimising the evaluation of the distance field, the display is divided up into a grid of tiles. The shaders for each tile are compiled to support a fix maximum number of objects on it. When using the built-in drawables it is possible that after a certain number of on-screen objects new ones won't be visible.</p>
<p>Mitigating this issue is quite easy. Instead of the following code:</p>
<p>To optimise the evaluation of the distance field, the display is divided into a grid of tiles. The shaders for each tile are compiled to support a fixed maximum number of objects. When using the built-in drawables, this means that beyond a certain number of on-screen objects, new ones may stop appearing.</p>
<p>Mitigating this is easy. Instead of the following code:</p>
<pre><code class="js"><span class="hl-0">this</span><span class="hl-1">.</span><span class="hl-2">renderer</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">compile</span><span class="hl-1">(</span><span class="hl-2">canvas</span><span class="hl-1">, [</span><span class="hl-2">Circle</span><span class="hl-1">.</span><span class="hl-2">descriptor</span><span class="hl-1">, </span><span class="hl-2">CircleLight</span><span class="hl-1">.</span><span class="hl-2">descriptor</span><span class="hl-1">]);</span>
</code><button type="button">Copy</button></pre>
<p>Modify it to something similar:</p>
<p>modify it to something like this:</p>
<pre><code class="js"><span class="hl-0">this</span><span class="hl-1">.</span><span class="hl-2">renderer</span><span class="hl-1"> = </span><span class="hl-3">await</span><span class="hl-1"> </span><span class="hl-4">compile</span><span class="hl-1">(</span><span class="hl-2">canvas</span><span class="hl-1">, [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> ...</span><span class="hl-2">Circle</span><span class="hl-1">.</span><span class="hl-2">descriptor</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">shaderCombinationSteps:</span><span class="hl-1"> [</span><span class="hl-5">0</span><span class="hl-1">, </span><span class="hl-5">1</span><span class="hl-1">, </span><span class="hl-5">2</span><span class="hl-1">, </span><span class="hl-5">24</span><span class="hl-1">, </span><span class="hl-5">64</span><span class="hl-1">],</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> ...</span><span class="hl-2">CircleLight</span><span class="hl-1">.</span><span class="hl-2">descriptor</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">shaderCombinationSteps:</span><span class="hl-1"> [</span><span class="hl-5">0</span><span class="hl-1">, </span><span class="hl-5">1</span><span class="hl-1">, </span><span class="hl-5">2</span><span class="hl-1">, </span><span class="hl-5">4</span><span class="hl-1">],</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">]);</span>
</code><button type="button">Copy</button></pre>
<p>The usage of too large numbers is not advised for compatibility and performance reasons alike.</p>
<p>Using very large numbers is not advised, for both compatibility and performance reasons.</p>
<blockquote>
<p>Steps are very useful for tile-based rendering, because it is possible for one tile (at a given moment) to be empty or contain just a few objects, while others have a large cluster of objects. The compiled shaders only take into account the necessary number of objects on each tile.</p>
<p>Steps are especially useful for tile-based rendering: at any given moment, one tile may be empty or contain just a few objects, while another holds a large cluster. The compiled shaders only account for the number of objects actually present on each tile.</p>
</blockquote>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#sdf-2d-logo-documentation"><span>SDF-<wbr/>2<wbr/>D logo <wbr/>Documentation</span></a><ul><li><a href="#links"><span>Links</span></a></li><li><a href="#usage-1st-option"><span>Usage (1st option)</span></a></li><li><a href="#usage-2nd-option"><span>Usage (2nd option)</span></a></li><li><a href="#extending-drawables"><span>Extending drawables</span></a></li><li><a href="#useful-to-know"><span>Useful to know</span></a></li><li><ul><li><a href="#math"><span>Math</span></a></li><li><a href="#coordinates"><span>Coordinates</span></a></li><li><a href="#tile-based-rendering"><span>Tile-<wbr/>based rendering</span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

10
docs/interfaces/drawables_drawable-descriptor.DrawableDescriptor.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>DrawableDescriptor | SDF-2D - v0.7.6</title><link rel="icon" href="../assets/favicon.ico"/><meta name="description" content="Documentation for SDF-2D"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">SDF-2D - v0.7.6</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/drawables_drawable-descriptor.html">drawables/drawable-descriptor</a></li><li><a href="" aria-current="page">DrawableDescriptor</a></li></ul><h1>Interface DrawableDescriptor</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Used for containing the required information to compile drawables into
shader code.</p>
<p>Each [[Drawable]] must have a static property of this type, called descriptor.</p>
<p>For more information on how to create your own DrawableDescriptor-s, look at the
<p>For more information on how to create your own DrawableDescriptors, look at the
code of [[CircleFactory]] or [[InvertedTunnelFactory]].</p>
</div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">DrawableDescriptor</span> <span class="tsd-signature-symbol">{</span><br/>    <a class="tsd-kind-property" href="#empty">empty</a><span class="tsd-signature-symbol">:</span> <a href="../classes/drawables_drawable.Drawable.html" class="tsd-signature-type tsd-kind-class">Drawable</a><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#objectcountscaler">objectCountScaler</a><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#propertyuniformmapping">propertyUniformMapping</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">property</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">string</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#sdf">sdf</a><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{</span><br/>        <span class="tsd-kind-property">distanceFunctionName</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/>        <span class="tsd-kind-property">isInverted</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/>        <span class="tsd-kind-property">shader</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/>    <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#shadercombinationsteps">shaderCombinationSteps</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">;</span><br/>    <a class="tsd-kind-property" href="#uniformcountmacroname">uniformCountMacroName</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in drawables/drawable-descriptor.ts:12</li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="#empty" 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>empty</span></a>
<a href="#objectcountscaler" 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>object<wbr/>Count<wbr/>Scaler?</span></a>
@ -23,11 +23,11 @@ Its signature should look like this:</p>
</code><button type="button">Copy</button></pre>
</div></li><li class="tsd-parameter"><h5><code class="tsd-tag">Optional</code><span class="tsd-kind-property">isInverted</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span></h5><div class="tsd-comment tsd-typography"><p>By default, drawables are not inverted.</p>
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">shader</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>The actual GLSL code for observing the drawables represented by this descriptor.</p>
<p>Your code should work with both version 100 and version 300 es</p>
</div></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">shader</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>The actual GLSL code that defines the drawables represented by this descriptor.</p>
<p>Your code should work with both GLSL version 100 and version 300 es.</p>
</div></li></ul></div><aside class="tsd-sources"><ul><li>Defined in drawables/drawable-descriptor.ts:28</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="shadercombinationsteps"><span>shader<wbr/>Combination<wbr/>Steps</span><a href="#shadercombinationsteps" 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">shaderCombinationSteps</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>Number of possible drawables around each tile.</p>
<p>For each step, a shader will be generated. And at runtime the closes matching
shader will be used to render a given part of the scene.</p>
<p>For each step, a shader is generated, and at runtime the closest matching
shader is used to render a given part of the scene.</p>
<p>Must contain 0 as a value.</p>
</div><aside class="tsd-sources"><ul><li>Defined in drawables/drawable-descriptor.ts:67</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="uniformcountmacroname"><span>uniform<wbr/>Count<wbr/>Macro<wbr/>Name</span><a href="#uniformcountmacroname" 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">uniformCountMacroName</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>The name of the uniform int used in the code to refer to the
number of drawables of this type.</p>

8
docs/interfaces/graphics_rendering_renderer_renderer.Renderer.html
View file

@ -11,10 +11,10 @@
<a href="#setviewarea" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>View<wbr/>Area</span></a>
<a href="#worldtodisplaycoordinates" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>world<wbr/>To<wbr/>Display<wbr/>Coordinates</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="canvassize"><code class="tsd-tag">Readonly</code><span>canvas<wbr/>Size</span><a href="#canvassize" 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">canvasSize</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ReadonlyVec2</span></div><div class="tsd-comment tsd-typography"><p>Get the actual resolution of the canvas without triggering a reflow.</p>
<p>A ResizeObserver is utilised fot achieving this.</p>
<p>A ResizeObserver is used to achieve this.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/renderer/renderer.ts:17</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="insights"><code class="tsd-tag">Readonly</code><span>insights</span><a href="#insights" 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">insights</span><span class="tsd-signature-symbol">:</span> <a href="graphics_rendering_renderer_renderer-info.RendererInfo.html" class="tsd-signature-type tsd-kind-interface">RendererInfo</a> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">null</span></div><div class="tsd-comment tsd-typography"><p>Get useful information about the hardware and the SDF2D renderer.</p>
<p>Its scheme is subject to change.</p>
<p>During context lost it might be null.</p>
<p>Its schema is subject to change.</p>
<p>During a context-lost event, it might be null.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/renderer/renderer.ts:96</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="viewareasize"><code class="tsd-tag">Readonly</code><span>view<wbr/>Area<wbr/>Size</span><a href="#viewareasize" 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">viewAreaSize</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ReadonlyVec2</span></div><div class="tsd-comment tsd-typography"><p>Get the viewArea size set by the last <code>setViewArea</code>.</p>
<p>By default, <code>canvasSize</code> is used for the view area size.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/renderer/renderer.ts:24</li></ul></aside></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Methods"><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>Methods</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="adddrawable"><span>add<wbr/>Drawable</span><a href="#adddrawable" 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><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="adddrawable-1"><span class="tsd-kind-call-signature">addDrawable</span><span class="tsd-signature-symbol">&lt;</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#adddrawablet">T</a> <span class="tsd-signature-keyword">extends</span> <a href="../classes/drawables_drawable.Drawable.html" class="tsd-signature-type tsd-kind-class">Drawable</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">drawable</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#adddrawablet">T</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#adddrawable-1" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Schedule a drawable to be rendered during the next <code>renderDrawables</code> call.</p>
@ -34,7 +34,7 @@ Just as in mouse events' clientX and clientY.</p>
when calling <code>renderDrawables</code>.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/renderer/renderer.ts:79</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="setruntimesettings"><span>set<wbr/>Runtime<wbr/>Settings</span><a href="#setruntimesettings" 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><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="setruntimesettings-1"><span class="tsd-kind-call-signature">setRuntimeSettings</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">overrides</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><a href="graphics_rendering_settings_runtime-settings.RuntimeSettings.html" class="tsd-signature-type tsd-kind-interface">RuntimeSettings</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#setruntimesettings-1" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Patch the current runtime settings with new values.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">overrides</span>: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol">&lt;</span><a href="graphics_rendering_settings_runtime-settings.RuntimeSettings.html" class="tsd-signature-type tsd-kind-interface">RuntimeSettings</a><span class="tsd-signature-symbol">&gt;</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/renderer/renderer.ts:63</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="setviewarea"><span>set<wbr/>View<wbr/>Area</span><a href="#setviewarea" 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><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="setviewarea-1"><span class="tsd-kind-call-signature">setViewArea</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">topLeft</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ReadonlyVec2</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">size</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ReadonlyVec2</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#setviewarea-1" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Set the camera transformation.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">topLeft</span>: <span class="tsd-signature-type">ReadonlyVec2</span></span><div class="tsd-comment tsd-typography"><p>top (!) left. By default, equals to [0, canvasHeight].</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">topLeft</span>: <span class="tsd-signature-type">ReadonlyVec2</span></span><div class="tsd-comment tsd-typography"><p>top (!) left. By default, equal to [0, canvasHeight].</p>
</div></li><li><span><span class="tsd-kind-parameter">size</span>: <span class="tsd-signature-type">ReadonlyVec2</span></span><div class="tsd-comment tsd-typography"><p>need not be equal to the canvas size, though their aspect ratio
should be the same to avoid stretching.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/renderer/renderer.ts:33</li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="worldtodisplaycoordinates"><span>world<wbr/>To<wbr/>Display<wbr/>Coordinates</span><a href="#worldtodisplaycoordinates" 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><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="worldtodisplaycoordinates-1"><span class="tsd-kind-call-signature">worldToDisplayCoordinates</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">worldCoordinates</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ReadonlyVec2</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">vec2</span><a href="#worldtodisplaycoordinates-1" 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></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>The inverse of <code>displayToWorldCoordinates</code>, returns the screen space position

26
docs/interfaces/graphics_rendering_settings_runtime-settings.RuntimeSettings.html
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>

6
docs/interfaces/graphics_rendering_settings_startup-settings.StartupSettings.html
View file

@ -10,11 +10,11 @@ that need to be given before shader compilation.</p>
<a href="#palettesize" 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>palette<wbr/>Size</span></a>
<a href="#shadowtracecount" 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>shadow<wbr/>Trace<wbr/>Count</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="backgroundcolor"><span>background<wbr/>Color</span><a href="#backgroundcolor" 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">backgroundColor</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></div><div class="tsd-comment tsd-typography"><p>The default background color of the scene, can have transparency on every platform.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/startup-settings.ts:67</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enablecontextlostsimulator"><span>enable<wbr/>Context<wbr/>Lost<wbr/>Simulator</span><a href="#enablecontextlostsimulator" 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">enableContextLostSimulator</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Many context lost event will be simulated when enabled.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/startup-settings.ts:67</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enablecontextlostsimulator"><span>enable<wbr/>Context<wbr/>Lost<wbr/>Simulator</span><a href="#enablecontextlostsimulator" 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">enableContextLostSimulator</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Many context-lost events will be simulated when enabled.</p>
<p>Useful for testing.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/startup-settings.ts:62</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="enablestopwatch"><span>enable<wbr/>Stopwatch</span><a href="#enablestopwatch" 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">enableStopwatch</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Creates a stopwatch used for measuring the GPU render time
when its required extension is available.</p>
<p>You should only have one renderer with enabled stopwatch.</p>
<p>You should only have one renderer with the stopwatch enabled.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/startup-settings.ts:16</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="ignorewebgl2"><span>ignore<wbr/>Web<wbr/>GL2</span><a href="#ignorewebgl2" 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">ignoreWebGL2</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 fall back to WebGL
even when WebGL2 is present.</p>
<p>Useful for testing compatibility.</p>
@ -35,5 +35,5 @@ maintaining compatibility with low-end devices.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/startup-settings.ts:55</li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="shadowtracecount"><span>shadow<wbr/>Trace<wbr/>Count</span><a href="#shadowtracecount" 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">shadowTraceCount</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The raytracing algorithm used for shadows requires a step count.
Sensible values for this are between 8 and 32.</p>
<p>The higher the number, the harder the shadows will get.
Some ambient occlusion like effects can be visible on lower trace counts.</p>
Some ambient-occlusion-like effects can be visible at lower trace counts.</p>
</div><aside class="tsd-sources"><ul><li>Defined in graphics/rendering/settings/startup-settings.ts:25</li></ul></aside></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><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>Properties</summary><div><a href="#backgroundcolor"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>background<wbr/>Color</span></a><a href="#enablecontextlostsimulator"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>enable<wbr/>Context<wbr/>Lost<wbr/>Simulator</span></a><a href="#enablestopwatch"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>enable<wbr/>Stopwatch</span></a><a href="#ignorewebgl2"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>ignore<wbr/>Web<wbr/>GL2</span></a><a href="#lightoverlapreduction"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>light<wbr/>Overlap<wbr/>Reduction</span></a><a href="#lightpenetrationratio"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>light<wbr/>Penetration<wbr/>Ratio</span></a><a href="#palettesize"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>palette<wbr/>Size</span></a><a href="#shadowtracecount"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>shadow<wbr/>Trace<wbr/>Count</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">SDF-2D - v0.7.6</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>

8
src/compile.ts
View file

@ -4,12 +4,12 @@ import { StartupSettings } from './graphics/rendering/settings/startup-settings'
import { DrawableDescriptor, Renderer } from './main';
/**
* Compiles a new renderer instance. There can multiple renderers on a single page.
* Compiles a new renderer instance. There can be multiple renderers on a single page.
* > Asynchronous behaviour is required for parallel shader compiling.
* > Trying to draw before the returned promise resolves, results in no action taken.
* > Settings can be set before promise resolution and they will be applied later.
* > Trying to draw before the returned promise resolves results in no action being taken.
* > Settings can be set before the promise resolves and they will be applied later.
*
* The descriptors of every to-be-drawn objects are required before creating the renderer,
* The descriptors of all to-be-drawn objects are required before creating the renderer,
* allowing the compiler to only create the shaders that will actually be used.
*
* Example usage:

10
src/drawables/drawable-descriptor.ts
View file

@ -6,7 +6,7 @@ import { Drawable } from './drawable';
*
* Each [[Drawable]] must have a static property of this type, called descriptor.
*
* For more information on how to create your own DrawableDescriptor-s, look at the
* For more information on how to create your own DrawableDescriptors, look at the
* code of [[CircleFactory]] or [[InvertedTunnelFactory]].
*/
export interface DrawableDescriptor {
@ -27,9 +27,9 @@ export interface DrawableDescriptor {
*/
sdf?: {
/**
* The actual GLSL code for observing the drawables represented by this descriptor.
* The actual GLSL code that defines the drawables represented by this descriptor.
*
* Your code should work with both version 100 and version 300 es
* Your code should work with both GLSL version 100 and version 300 es.
*/
shader: string;
/**
@ -59,8 +59,8 @@ export interface DrawableDescriptor {
/**
* Number of possible drawables around each tile.
*
* For each step, a shader will be generated. And at runtime the closes matching
* shader will be used to render a given part of the scene.
* For each step, a shader is generated, and at runtime the closest matching
* shader is used to render a given part of the scene.
*
* Must contain 0 as a value.
*/

4
src/drawables/drawable.ts
View file

@ -17,8 +17,8 @@ export abstract class Drawable {
/**
* The lower bound of the distance between the target and the object.
*
* It can return 0 by default, the only consequence of this, is a reduced performance.
* Because this object won't benefit from tile-based rendering.
* It can return 0 by default; the only consequence is reduced performance,
* because this object won't benefit from tile-based rendering.
* @param target
*/
public abstract minDistance(target: vec2): number;

2
src/drawables/shapes/circle-factory.ts
View file

@ -15,8 +15,6 @@ class CircleBase extends EmptyDrawable {
}
}
// Suffixing the GLSL names with a per-factory-invocation id lets multiple
// circle types (e.g. different colors) coexist in one compiled shader.
let _id = 0;
/**

38
src/drawables/shapes/droplet-factory.ts
View file

@ -19,6 +19,8 @@ class DropletBase extends EmptyDrawable {
}
}
let _id = 0;
/**
* @category Drawable
*/
@ -27,28 +29,28 @@ export const DropletFactory = (color: vec3 | vec4 | number): typeof DropletBase
public static descriptor: DrawableDescriptor = {
sdf: {
shader: `
uniform vec2 froms[DROPLET_COUNT];
uniform vec2 toFromDeltas[DROPLET_COUNT];
uniform float fromRadii[DROPLET_COUNT];
uniform float toRadii[DROPLET_COUNT];
uniform vec2 dropletFroms${_id}[DROPLET_COUNT${_id}];
uniform vec2 dropletToFromDeltas${_id}[DROPLET_COUNT${_id}];
uniform float dropletFromRadii${_id}[DROPLET_COUNT${_id}];
uniform float dropletToRadii${_id}[DROPLET_COUNT${_id}];
float dropletMinDistance(vec2 target, out vec4 color) {
float dropletMinDistance${_id}(vec2 target, out vec4 color) {
color = ${codeForColorAccess(color)};
float minDistance = 1000.0;
for (int i = 0; i < DROPLET_COUNT; i++) {
vec2 targetFromDelta = target - froms[i];
for (int i = 0; i < DROPLET_COUNT${_id}; i++) {
vec2 targetFromDelta = target - dropletFroms${_id}[i];
float h = clamp(
dot(targetFromDelta, toFromDeltas[i])
/ max(dot(toFromDeltas[i], toFromDeltas[i]), 0.00000001),
dot(targetFromDelta, dropletToFromDeltas${_id}[i])
/ max(dot(dropletToFromDeltas${_id}[i], dropletToFromDeltas${_id}[i]), 0.00000001),
0.0, 1.0
);
float currentDistance = -mix(
fromRadii[i], toRadii[i], h
dropletFromRadii${_id}[i], dropletToRadii${_id}[i], h
) + distance(
targetFromDelta, toFromDeltas[i] * h
targetFromDelta, dropletToFromDeltas${_id}[i] * h
);
minDistance = min(minDistance, currentDistance);
@ -57,15 +59,15 @@ export const DropletFactory = (color: vec3 | vec4 | number): typeof DropletBase
return minDistance;
}
`,
distanceFunctionName: 'dropletMinDistance',
distanceFunctionName: `dropletMinDistance${_id}`,
},
propertyUniformMapping: {
from: 'froms',
toFromDelta: 'toFromDeltas',
fromRadius: 'fromRadii',
toRadius: 'toRadii',
from: `dropletFroms${_id}`,
toFromDelta: `dropletToFromDeltas${_id}`,
fromRadius: `dropletFromRadii${_id}`,
toRadius: `dropletToRadii${_id}`,
},
uniformCountMacroName: 'DROPLET_COUNT',
uniformCountMacroName: `DROPLET_COUNT${_id}`,
shaderCombinationSteps: [0, 1, 4, 16, 32],
empty: new Droplet(vec2.create(), vec2.create(), 0, 0),
};
@ -96,5 +98,7 @@ export const DropletFactory = (color: vec3 | vec4 | number): typeof DropletBase
}
}
_id++;
return Droplet;
};

24
src/drawables/shapes/hexagon-factory.ts
View file

@ -15,6 +15,8 @@ class HexagonBase extends EmptyDrawable {
}
}
let _id = 0;
/**
* @category Drawable
*/
@ -23,16 +25,16 @@ export const HexagonFactory = (color: vec3 | vec4 | number): typeof HexagonBase
public static descriptor: DrawableDescriptor = {
sdf: {
shader: `
uniform vec2 hexagonCenters[HEXAGON_COUNT];
uniform float hexagonSize[HEXAGON_COUNT];
uniform vec2 hexagonCenters${_id}[HEXAGON_COUNT${_id}];
uniform float hexagonSize${_id}[HEXAGON_COUNT${_id}];
float hexagonMinDistance(vec2 target, out vec4 color) {
float hexagonMinDistance${_id}(vec2 target, out vec4 color) {
color = ${codeForColorAccess(color)};
float minDistance = 1000.0;
for (int i = 0; i < HEXAGON_COUNT; i++) {
for (int i = 0; i < HEXAGON_COUNT${_id}; i++) {
const vec3 k = vec3(-0.866025404,0.5,0.577350269);
float r = hexagonSize[i];
vec2 p = abs(target - hexagonCenters[i]);
float r = hexagonSize${_id}[i];
vec2 p = abs(target - hexagonCenters${_id}[i]);
float cosa = 0.8660;
float sina = 0.5;
p = vec2(cosa * p.x - sina * p.y, sina * p.x + cosa * p.y);
@ -45,13 +47,13 @@ export const HexagonFactory = (color: vec3 | vec4 | number): typeof HexagonBase
return minDistance;
}
`,
distanceFunctionName: 'hexagonMinDistance',
distanceFunctionName: `hexagonMinDistance${_id}`,
},
propertyUniformMapping: {
center: 'hexagonCenters',
radius: 'hexagonSize',
center: `hexagonCenters${_id}`,
radius: `hexagonSize${_id}`,
},
uniformCountMacroName: 'HEXAGON_COUNT',
uniformCountMacroName: `HEXAGON_COUNT${_id}`,
shaderCombinationSteps: [0, 1, 2, 3, 8, 16],
empty: new Hexagon(vec2.create(), 0),
};
@ -68,5 +70,7 @@ export const HexagonFactory = (color: vec3 | vec4 | number): typeof HexagonBase
}
}
_id++;
return Hexagon;
};

71
src/drawables/shapes/inverted-tunnel-factory.ts
View file

@ -19,6 +19,8 @@ class InvertedTunnelBase extends EmptyDrawable {
}
}
let _id = 0;
/**
* Providing a noise texture is required for this drawable.
*
@ -31,10 +33,10 @@ export const InvertedTunnelFactory = (
public static descriptor: DrawableDescriptor = {
sdf: {
shader: `
uniform vec2 froms[INVERTED_TUNNEL_COUNT];
uniform vec2 toFromDeltas[INVERTED_TUNNEL_COUNT];
uniform float fromRadii[INVERTED_TUNNEL_COUNT];
uniform float toRadii[INVERTED_TUNNEL_COUNT];
uniform vec2 invertedTunnelFroms${_id}[INVERTED_TUNNEL_COUNT${_id}];
uniform vec2 invertedTunnelToFromDeltas${_id}[INVERTED_TUNNEL_COUNT${_id}];
uniform float invertedTunnelFromRadii${_id}[INVERTED_TUNNEL_COUNT${_id}];
uniform float invertedTunnelToRadii${_id}[INVERTED_TUNNEL_COUNT${_id}];
// Other drawables share this declaration; the include guard keeps
// the combined shader from declaring it twice.
@ -43,39 +45,44 @@ export const InvertedTunnelFactory = (
uniform sampler2D noiseTexture;
#endif
#ifdef WEBGL2_IS_AVAILABLE
float invertedTunnelTerrain(float h) {
return texture(
noiseTexture,
vec2(h, 0.5)
)[0] - 0.5;
}
#else
float invertedTunnelTerrain(float h) {
return texture2D(
noiseTexture,
vec2(h, 0.5)
)[0] - 0.5;
}
// Shared between every inverted-tunnel variant; the include guard
// keeps the combined shader from defining it twice.
#ifndef INVERTED_TUNNEL_TERRAIN_DECLARED
#define INVERTED_TUNNEL_TERRAIN_DECLARED
#ifdef WEBGL2_IS_AVAILABLE
float invertedTunnelTerrain(float h) {
return texture(
noiseTexture,
vec2(h, 0.5)
)[0] - 0.5;
}
#else
float invertedTunnelTerrain(float h) {
return texture2D(
noiseTexture,
vec2(h, 0.5)
)[0] - 0.5;
}
#endif
#endif
float invertedTunnelMinDistance(vec2 target, out vec4 color) {
float invertedTunnelMinDistance${_id}(vec2 target, out vec4 color) {
color = ${codeForColorAccess(color)};
float minDistance = -1000.0;
for (int i = 0; i < INVERTED_TUNNEL_COUNT; i++) {
for (int i = 0; i < INVERTED_TUNNEL_COUNT${_id}; i++) {
vec2 targetFromDelta = target - froms[i];
vec2 targetFromDelta = target - invertedTunnelFroms${_id}[i];
float h = dot(targetFromDelta, toFromDeltas[i])
/ max(dot(toFromDeltas[i], toFromDeltas[i]), 0.00000001);
float h = dot(targetFromDelta, invertedTunnelToFromDeltas${_id}[i])
/ max(dot(invertedTunnelToFromDeltas${_id}[i], invertedTunnelToFromDeltas${_id}[i]), 0.00000001);
float clampedH = clamp(h, 0.0, 1.0);
float currentDistance = -mix(
fromRadii[i], toRadii[i], clampedH
invertedTunnelFromRadii${_id}[i], invertedTunnelToRadii${_id}[i], clampedH
) + distance(
targetFromDelta, toFromDeltas[i] * clampedH
targetFromDelta, invertedTunnelToFromDeltas${_id}[i] * clampedH
) - invertedTunnelTerrain(h) / 12.0;
minDistance = max(minDistance, -currentDistance);
@ -85,15 +92,15 @@ export const InvertedTunnelFactory = (
}
`,
isInverted: true,
distanceFunctionName: 'invertedTunnelMinDistance',
distanceFunctionName: `invertedTunnelMinDistance${_id}`,
},
propertyUniformMapping: {
from: 'froms',
toFromDelta: 'toFromDeltas',
fromRadius: 'fromRadii',
toRadius: 'toRadii',
from: `invertedTunnelFroms${_id}`,
toFromDelta: `invertedTunnelToFromDeltas${_id}`,
fromRadius: `invertedTunnelFromRadii${_id}`,
toRadius: `invertedTunnelToRadii${_id}`,
},
uniformCountMacroName: 'INVERTED_TUNNEL_COUNT',
uniformCountMacroName: `INVERTED_TUNNEL_COUNT${_id}`,
shaderCombinationSteps: [0, 1, 4, 16, 32],
empty: new InvertedTunnel(vec2.create(), vec2.create(), 0, 0),
};
@ -124,5 +131,7 @@ export const InvertedTunnelFactory = (
}
}
_id++;
return InvertedTunnel;
};

44
src/drawables/shapes/noisy-polygon-factory.ts
View file

@ -8,6 +8,8 @@ interface NoisyPolygonBase extends PolygonBase {
randomOffset: number;
}
let _id = 0;
/**
* @category Drawable
*/
@ -19,10 +21,10 @@ export const NoisyPolygonFactory = (
public static descriptor: DrawableDescriptor = {
sdf: {
shader: `
uniform vec2 noisyPolygon${vertexCount}Vertices[NOISY_POLYGON${vertexCount}_COUNT * ${vertexCount}];
uniform vec2 noisyPolygon${vertexCount}Centers[NOISY_POLYGON${vertexCount}_COUNT];
uniform float noisyPolygon${vertexCount}Lengths[NOISY_POLYGON${vertexCount}_COUNT];
uniform float noisyPolygon${vertexCount}Randoms[NOISY_POLYGON${vertexCount}_COUNT];
uniform vec2 noisyPolygon${vertexCount}Vertices${_id}[NOISY_POLYGON${vertexCount}_COUNT${_id} * ${vertexCount}];
uniform vec2 noisyPolygon${vertexCount}Centers${_id}[NOISY_POLYGON${vertexCount}_COUNT${_id}];
uniform float noisyPolygon${vertexCount}Lengths${_id}[NOISY_POLYGON${vertexCount}_COUNT${_id}];
uniform float noisyPolygon${vertexCount}Randoms${_id}[NOISY_POLYGON${vertexCount}_COUNT${_id}];
// Other drawables (and other vertex-count variants of this one)
// share these declarations; the include guards keep the combined
@ -45,7 +47,7 @@ export const NoisyPolygonFactory = (
#endif
#endif
vec2 noisyPolygon${vertexCount}LineDistance(vec2 target, vec2 from, vec2 to) {
vec2 noisyPolygon${vertexCount}LineDistance${_id}(vec2 target, vec2 from, vec2 to) {
vec2 targetFromDelta = target - from;
vec2 toFromDelta = to - from;
float h = clamp(
@ -61,18 +63,18 @@ export const NoisyPolygonFactory = (
);
}
float noisyPolygon${vertexCount}MinDistance(vec2 target, out vec4 color) {
float noisyPolygon${vertexCount}MinDistance${_id}(vec2 target, out vec4 color) {
color = ${codeForColorAccess(color)};
float minDistance = 100.0;
for (int j = 0; j < NOISY_POLYGON${vertexCount}_COUNT; j++) {
vec2 startEnd = noisyPolygon${vertexCount}Vertices[j * ${vertexCount}];
for (int j = 0; j < NOISY_POLYGON${vertexCount}_COUNT${_id}; j++) {
vec2 startEnd = noisyPolygon${vertexCount}Vertices${_id}[j * ${vertexCount}];
vec2 vb = startEnd;
vec2 center = noisyPolygon${vertexCount}Centers[j];
float l = noisyPolygon${vertexCount}Lengths[j];
float randomOffset = noisyPolygon${vertexCount}Randoms[j];
vec2 center = noisyPolygon${vertexCount}Centers${_id}[j];
float l = noisyPolygon${vertexCount}Lengths${_id}[j];
float randomOffset = noisyPolygon${vertexCount}Randoms${_id}[j];
vec2 targetCenterDelta = target - center;
float targetDistance = length(targetCenterDelta);
vec2 targetTangent = targetCenterDelta / clamp(targetDistance, 0.01, 1000.0);
@ -88,8 +90,8 @@ export const NoisyPolygonFactory = (
float s = 1.0;
for (int k = 1; k < ${vertexCount}; k++) {
vec2 va = vb;
vb = noisyPolygon${vertexCount}Vertices[j * ${vertexCount} + k];
vec2 ds = noisyPolygon${vertexCount}LineDistance(noisyTarget, va, vb);
vb = noisyPolygon${vertexCount}Vertices${_id}[j * ${vertexCount} + k];
vec2 ds = noisyPolygon${vertexCount}LineDistance${_id}(noisyTarget, va, vb);
bvec3 cond = bvec3(noisyTarget.y >= va.y, noisyTarget.y < vb.y, ds.y > 0.0);
if (all(cond) || all(not(cond))) {
@ -99,7 +101,7 @@ export const NoisyPolygonFactory = (
d = min(d, ds.x);
}
vec2 ds = noisyPolygon${vertexCount}LineDistance(noisyTarget, vb, startEnd);
vec2 ds = noisyPolygon${vertexCount}LineDistance${_id}(noisyTarget, vb, startEnd);
bvec3 cond = bvec3(noisyTarget.y >= vb.y, noisyTarget.y < startEnd.y, ds.y > 0.0);
if (all(cond) || all(not(cond))) {
s *= -1.0;
@ -112,15 +114,15 @@ export const NoisyPolygonFactory = (
return minDistance;
}
`,
distanceFunctionName: `noisyPolygon${vertexCount}MinDistance`,
distanceFunctionName: `noisyPolygon${vertexCount}MinDistance${_id}`,
},
propertyUniformMapping: {
length: `noisyPolygon${vertexCount}Lengths`,
random: `noisyPolygon${vertexCount}Randoms`,
center: `noisyPolygon${vertexCount}Centers`,
vertices: `noisyPolygon${vertexCount}Vertices`,
length: `noisyPolygon${vertexCount}Lengths${_id}`,
random: `noisyPolygon${vertexCount}Randoms${_id}`,
center: `noisyPolygon${vertexCount}Centers${_id}`,
vertices: `noisyPolygon${vertexCount}Vertices${_id}`,
},
uniformCountMacroName: `NOISY_POLYGON${vertexCount}_COUNT`,
uniformCountMacroName: `NOISY_POLYGON${vertexCount}_COUNT${_id}`,
shaderCombinationSteps: [0, 1, 2, 3, 8, 16],
empty: new NoisyPolygon(
new Array(vertexCount).fill(vec2.create())
@ -183,5 +185,7 @@ export const NoisyPolygonFactory = (
}
}
_id++;
return NoisyPolygon as any;
};

32
src/drawables/shapes/polygon-factory.ts
View file

@ -14,6 +14,8 @@ export class PolygonBase extends EmptyDrawable {
}
}
let _id = 0;
/**
* @category Drawable
*/
@ -25,9 +27,9 @@ export const PolygonFactory = (
public static descriptor: DrawableDescriptor = {
sdf: {
shader: `
uniform vec2 polygon${vertexCount}Vertices[POLYGON${vertexCount}_COUNT * ${vertexCount}];
uniform vec2 polygon${vertexCount}Vertices${_id}[POLYGON${vertexCount}_COUNT${_id} * ${vertexCount}];
vec2 polygon${vertexCount}LineDistance(vec2 target, vec2 from, vec2 to) {
vec2 polygon${vertexCount}LineDistance${_id}(vec2 target, vec2 from, vec2 to) {
vec2 targetFromDelta = target - from;
vec2 toFromDelta = to - from;
float h = clamp(
@ -43,21 +45,21 @@ export const PolygonFactory = (
);
}
float polygon${vertexCount}MinDistance(vec2 target, out vec4 color) {
float polygon${vertexCount}MinDistance${_id}(vec2 target, out vec4 color) {
color = ${codeForColorAccess(color)};
float minDistance = 100.0;
for (int j = 0; j < POLYGON${vertexCount}_COUNT; j++) {
vec2 startEnd = polygon${vertexCount}Vertices[j * ${vertexCount}];
for (int j = 0; j < POLYGON${vertexCount}_COUNT${_id}; j++) {
vec2 startEnd = polygon${vertexCount}Vertices${_id}[j * ${vertexCount}];
vec2 vb = startEnd;
float d = 10000.0;
float s = 1.0;
for (int k = 1; k < ${vertexCount}; k++) {
vec2 va = vb;
vb = polygon${vertexCount}Vertices[j * ${vertexCount} + k];
vec2 ds = polygon${vertexCount}LineDistance(target, va, vb);
vb = polygon${vertexCount}Vertices${_id}[j * ${vertexCount} + k];
vec2 ds = polygon${vertexCount}LineDistance${_id}(target, va, vb);
bvec3 cond = bvec3(target.y >= va.y, target.y < vb.y, ds.y > 0.0);
if (all(cond) || all(not(cond))) {
@ -67,7 +69,7 @@ export const PolygonFactory = (
d = min(d, ds.x);
}
vec2 ds = polygon${vertexCount}LineDistance(target, vb, startEnd);
vec2 ds = polygon${vertexCount}LineDistance${_id}(target, vb, startEnd);
bvec3 cond = bvec3(target.y >= vb.y, target.y < startEnd.y, ds.y > 0.0);
if (all(cond) || all(not(cond))) {
s *= -1.0;
@ -80,13 +82,13 @@ export const PolygonFactory = (
return minDistance;
}
`,
distanceFunctionName: `polygon${vertexCount}MinDistance`,
distanceFunctionName: `polygon${vertexCount}MinDistance${_id}`,
},
propertyUniformMapping: {
vertices: `polygon${vertexCount}Vertices`,
vertices: `polygon${vertexCount}Vertices${_id}`,
},
objectCountScaler: 1 / vertexCount,
uniformCountMacroName: `POLYGON${vertexCount}_COUNT`,
uniformCountMacroName: `POLYGON${vertexCount}_COUNT${_id}`,
shaderCombinationSteps: [0, 1, 2, 3, 8, 16],
empty: new Polygon(new Array(vertexCount).fill(vec2.create())),
};
@ -146,9 +148,9 @@ export const PolygonFactory = (
private get actualVertices(): Array<vec2> {
return this.vertices.length < vertexCount
? ([
...this.vertices,
...new Array(vertexCount - this.vertices.length).fill(this.vertices[0]),
] as Array<vec2>)
...this.vertices,
...new Array(vertexCount - this.vertices.length).fill(this.vertices[0]),
] as Array<vec2>)
: this.vertices;
}
@ -178,5 +180,7 @@ export const PolygonFactory = (
}
}
_id++;
return Polygon;
};

32
src/drawables/shapes/rotated-rectangle-factory.ts
View file

@ -16,6 +16,8 @@ class RotatedRectangleBase extends EmptyDrawable {
}
}
let _id = 0;
/**
* @category Drawable
*/
@ -27,23 +29,23 @@ export const RotatedRectangleFactory = (
sdf: {
// Source: https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
shader: `
uniform vec2 rotatedRectangleTopCenters[ROTATED_RECTANGLE_COUNT];
uniform vec2 rotatedRectangleBottomCenters[ROTATED_RECTANGLE_COUNT];
uniform float rotatedRectangleWidths[ROTATED_RECTANGLE_COUNT];
uniform vec2 rotatedRectangleTopCenters${_id}[ROTATED_RECTANGLE_COUNT${_id}];
uniform vec2 rotatedRectangleBottomCenters${_id}[ROTATED_RECTANGLE_COUNT${_id}];
uniform float rotatedRectangleWidths${_id}[ROTATED_RECTANGLE_COUNT${_id}];
float rotatedRectangleMinDistance(vec2 target, out vec4 color) {
float rotatedRectangleMinDistance${_id}(vec2 target, out vec4 color) {
color = ${codeForColorAccess(color)};
float minDistance = 1000.0;
for (int i = 0; i < ROTATED_RECTANGLE_COUNT; i++) {
vec2 top = rotatedRectangleTopCenters[i];
vec2 bottom = rotatedRectangleBottomCenters[i];
for (int i = 0; i < ROTATED_RECTANGLE_COUNT${_id}; i++) {
vec2 top = rotatedRectangleTopCenters${_id}[i];
vec2 bottom = rotatedRectangleBottomCenters${_id}[i];
float height = length(bottom - top);
vec2 d = height > 0.00000001 ? (bottom - top) / height : vec2(0.0, 1.0);
vec2 q = (target - (top + bottom) * 0.5);
q = mat2(d.x, -d.y, d.y, d.x) * q;
q = abs(q) - vec2(height, rotatedRectangleWidths[i]) * 0.5;
q = abs(q) - vec2(height, rotatedRectangleWidths${_id}[i]) * 0.5;
float dist = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0);
minDistance = min(minDistance, dist);
}
@ -51,20 +53,20 @@ export const RotatedRectangleFactory = (
return minDistance;
}
`,
distanceFunctionName: 'rotatedRectangleMinDistance',
distanceFunctionName: `rotatedRectangleMinDistance${_id}`,
},
propertyUniformMapping: {
topCenter: 'rotatedRectangleTopCenters',
bottomCenter: 'rotatedRectangleBottomCenters',
width: 'rotatedRectangleWidths',
topCenter: `rotatedRectangleTopCenters${_id}`,
bottomCenter: `rotatedRectangleBottomCenters${_id}`,
width: `rotatedRectangleWidths${_id}`,
},
uniformCountMacroName: 'ROTATED_RECTANGLE_COUNT',
uniformCountMacroName: `ROTATED_RECTANGLE_COUNT${_id}`,
shaderCombinationSteps: [0, 1, 2, 3, 8, 16],
empty: new RotatedRectangle(vec2.create(), vec2.create(), 0),
};
/**
* It is just an estimate by calculating a bounding circle
* This is only an estimate, computed from a bounding circle.
* @param target
*/
public minDistance(target: vec2): number {
@ -91,5 +93,7 @@ export const RotatedRectangleFactory = (
}
}
_id++;
return RotatedRectangle;
};

4
src/graphics/graphics-library/texture/texture-options.ts
View file

@ -2,12 +2,12 @@ export enum WrapOptions {
CLAMP_TO_EDGE = 'CLAMP_TO_EDGE',
/**
* On WebGL it only work with power of 2 texture sizes.
* On WebGL, this only works with power-of-2 texture sizes.
*/
REPEAT = 'REPEAT',
/**
* On WebGL it only work with power of 2 texture sizes.
* On WebGL, this only works with power-of-2 texture sizes.
*/
MIRRORED_REPEAT = 'MIRRORED_REPEAT',
}

5
src/graphics/rendering/fps-quality-autoscaler.ts
View file

@ -6,7 +6,7 @@ import { RuntimeSettings } from './settings/runtime-settings';
/**
* Set the quality of rendering based on FPS values.
*
* When using this the size of the canvas must be fixed with CSS.
* When using this, the size of the canvas must be fixed with CSS.
*
* The `addDeltaTime` method should be called once every frame.
*
@ -52,7 +52,8 @@ export class FpsQualityAutoscaler {
private deltaTimeSinceLastAdjustment = 0;
/**
* Autoscaling is also done by calling this function
* Record the time taken by the latest frame. Autoscaling is also performed
* as part of this call.
* @param deltaTimeInMilliseconds
*/
public addDeltaTime(deltaTimeInMilliseconds: DOMHighResTimeStamp) {

9
src/graphics/rendering/renderer/noise-renderer.ts
View file

@ -10,13 +10,12 @@ import randomVertex100 from '../shaders/random-vs-100.glsl';
import randomVertex from '../shaders/random-vs.glsl';
/**
* Create a renderer, draw a 2D noise texture with it,
* then destroy the used resources,
* while returning the generated texture in the form of a canvas.
* Create a renderer, draw a 2D noise texture with it, then destroy the
* resources it used, returning the generated texture in the form of a canvas.
*
* @param textureSize The resolution of the end result
* @param scale A starting value can be 15
* @param amplitude A starting value can be 1
* @param scale A good starting value is 15
* @param amplitude A good starting value is 1
* @param ignoreWebGL2 Ignore WebGL2, even when it's available
*/
export const renderNoise = async (

8
src/graphics/rendering/renderer/renderer.ts
View file

@ -12,7 +12,7 @@ export interface Renderer {
/**
* Get the actual resolution of the canvas without triggering a reflow.
*
* A ResizeObserver is utilised fot achieving this.
* A ResizeObserver is used to achieve this.
*/
readonly canvasSize: ReadonlyVec2;
@ -26,7 +26,7 @@ export interface Renderer {
/**
* Set the camera transformation.
*
* @param topLeft top (!) left. By default, equals to [0, canvasHeight].
* @param topLeft top (!) left. By default, equal to [0, canvasHeight].
* @param size need not be equal to the canvas size, though their aspect ratio
* should be the same to avoid stretching.
*/
@ -89,9 +89,9 @@ export interface Renderer {
/**
* Get useful information about the hardware and the SDF2D renderer.
*
* Its scheme is subject to change.
* Its schema is subject to change.
*
* During context lost it might be null.
* During a context-lost event, it might be null.
*/
readonly insights: RendererInfo | null;
}

26
src/graphics/rendering/settings/runtime-settings.ts
View file

@ -9,16 +9,16 @@ import { TextureWithOptions } from '../../graphics-library/texture/texture-optio
*/
export interface RuntimeSettings {
/**
* When set to `true` rendering will be done on the screen's real resolution.
* When set to `true`, rendering will be done at the screen's real resolution.
*/
enableHighDpiRendering: boolean;
/**
* 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.
* To speed this process up, the screen is divided into tiles,
* so each one has to deal with fewer objects.
*
* For each tile, it is decided which objects are near its close vicinity.
* 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.
@ -27,24 +27,24 @@ export interface RuntimeSettings {
/**
* By default, every pixel is outside of objects. Flipping this value to `true` 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.
*/
isWorldInverted: boolean;
/**
* When lights reach the end of the display, they are slowly faded out. The length
* of this phaseout can be set through this value.
* 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.
*/
lightCutoffDistance: number;
/**
* Its length should be less than the one specified in [[StartupSettings]].paletteSize.
*
* The possible colors for the objects. Each color is referenced by its index in the
* palette.
*
* Can have transparency, but only if WebGL2 support is enabled.
* Its length should be less than the `paletteSize` specified in [[StartupSettings]].
*
* Colors can have transparency, but only if WebGL2 support is enabled.
*/
colorPalette: Array<vec3 | vec4>;
@ -76,10 +76,10 @@ export interface RuntimeSettings {
/**
* It is possible to use your own textures in your SDF definitions.
*
* 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
* 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.
* A texture can be a canvas, an img element, an Image, and so on.
*/
textures: {
[textureName: string]: TexImageSource | TextureWithOptions;

6
src/graphics/rendering/settings/startup-settings.ts
View file

@ -11,7 +11,7 @@ export interface StartupSettings {
* Creates a stopwatch used for measuring the GPU render time
* when its required extension is available.
*
* You should only have one renderer with enabled stopwatch.
* You should only have one renderer with the stopwatch enabled.
*/
enableStopwatch: boolean;
@ -20,7 +20,7 @@ export interface StartupSettings {
* Sensible values for this are between 8 and 32.
*
* The higher the number, the harder the shadows will get.
* Some ambient occlusion like effects can be visible on lower trace counts.
* Some ambient-occlusion-like effects can be visible at lower trace counts.
*/
shadowTraceCount: number;
@ -55,7 +55,7 @@ export interface StartupSettings {
paletteSize: number;
/**
* Many context lost event will be simulated when enabled.
* Many context-lost events will be simulated when enabled.
*
* Useful for testing.
*/

4
src/helper/delta-time-calculator.ts
View file

@ -1,8 +1,8 @@
/**
* A helper class for calculating the elapsed time between frames.
*
* Handles the case, where the browser tab is not in focus and `requestAnimationFrame`
* does not get called for performance reasons. In this case, the return deltaTime won't be
* Handles the case where the browser tab is not in focus and `requestAnimationFrame`
* does not get called for performance reasons. In this case, the returned deltaTime won't be
* an unreasonably large value.
*/
export class DeltaTimeCalculator {

6
src/run-animation.ts
View file

@ -8,8 +8,8 @@ import { DrawableDescriptor, Renderer } from './main';
/**
* Implements the boilerplate code required to run real-time animations
* in the browser. An FPS based autoscaler is also used. This creates an additional `fps`
* key in the renderers `insights` property.
* in the browser. An FPS-based autoscaler is also used. This creates an additional `fps`
* key in the renderer's `insights` property.
*
* Example usage:
*
@ -17,7 +17,7 @@ import { DrawableDescriptor, Renderer } from './main';
* <canvas id="main" style="width: 300px; height: 150px"></canvas>
* ```
* > The canvas needs to have a fixed size specified by CSS.
*
* ```js
* import { CircleFactory, CircleLight, hsl, runAnimation } from 'sdf-2d';
*