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

Update docs

Browse source
This commit is contained in:
Andras Schmelczer 2026-06-10 22:05:32 +01:00
parent 4d96749087
commit c2f61a2f7e
6 changed files with 26 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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>