sdf-2d/docs/index.html
Andras Schmelczer 5de6827db1
All checks were successful
Check / check (push) Successful in 26s
Publish / build (push) Successful in 30s
Publish / publish-npm (push) Has been skipped
Remove old links
2026-10-28 22:48:02 +00:00

106 lines
23 KiB
HTML

<!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SDF-2D - v0.8.0</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.8.0</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">
<h1>SDF-2D - v0.8.0</h1></div>
<div class="tsd-panel tsd-typography"><h1 id="sdf-2d-logo-documentation" class="tsd-anchor-link"><img src="media/logo-colored.svg" alt="SDF-2D logo"> Documentation<a href="#sdf-2d-logo-documentation" 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></h1>
<p>The motivation behind this library and more in-depth information about the rendering techniques utilised can be found in <a href="media/thesis-andras-schmelczer.pdf">my thesis</a>.</p>
<h2 id="links" class="tsd-anchor-link">Links<a href="#links" 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><a href="https://git.schmelczer.dev/andras/sdf-2d">Repository</a></li>
<li><a href="https://sdf2d.schmelczer.dev/">Demo</a></li>
<li><a href="https://git.schmelczer.dev/andras/sdf-2d-demo">Source code of the demo</a></li>
</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, you first need a renderer instance. You can get one by calling the <a href="functions/compile.compile.html" class="tsd-kind-function">compile function</a>.
<ul>
<li>For this, you have to provide one or more <a href="interfaces/drawables_drawable-descriptor.DrawableDescriptor.html" class="tsd-kind-interface">DrawableDescriptors</a>.</li>
<li>Optionally, the default compile settings can be overridden using <a href="interfaces/graphics_rendering_settings_startup-settings.StartupSettings.html" class="tsd-kind-interface"> graphics/rendering/settings/startup-settings!StartupSettings</a>.</li>
</ul>
</li>
<li>Once you have a renderer, you can start drawing objects through the <a href="interfaces/graphics_rendering_renderer_renderer.Renderer.html" class="tsd-kind-interface"> graphics/rendering/renderer/renderer!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 to create animated content, use the <a href="functions/run-animation.runAnimation.html" class="tsd-kind-function">runAnimation function</a> to save yourself from writing boilerplate code.
See its <a href="functions/run-animation.runAnimation.html" class="tsd-kind-function">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 a great collection of <a href="https://iquilezles.org/articles/distfunctions2d/">2D SDFs</a></p>
</blockquote>
<ul>
<li>Subclass <a href="classes/drawables_drawable.Drawable.html" class="tsd-kind-class"> drawables/drawable!Drawable</a></li>
<li>Implement its abstract methods</li>
<li>Add a static <code>descriptor</code> property of type <a href="interfaces/drawables_drawable-descriptor.DrawableDescriptor.html" class="tsd-kind-interface"> drawables/drawable-descriptor!DrawableDescriptor</a> to your class</li>
<li>Follow the instructions given in <a href="#usage-1st-option">Usage</a></li>
</ul>
<h3 id="custom-drawable-example" class="tsd-anchor-link">Custom drawable example<a href="#custom-drawable-example" 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 function named by <code>sdf.distanceFunctionName</code> must have the signature
<code>float distanceFunction(in vec2 target, out vec4 color)</code> in both GLSL 100 and GLSL 300 ES.
It returns the signed distance (negative inside, zero on the boundary, positive outside)
and writes the closest drawable's RGBA color to <code>color</code> on every code path.</p>
<p>This complete example defines a custom orange circle, maps its serialized properties
to shader uniforms, and compiles and renders it. Use it in a JavaScript module with
<code>sdf-2d</code> and <code>gl-matrix</code> installed. Documentation CI runs this exact code with both
WebGL 1 and WebGL 2.</p>
<pre><code class="js"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">compile</span><span class="hl-1">, </span><span class="hl-2">Drawable</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;sdf-2d&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">vec2</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;gl-matrix&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">class</span><span class="hl-1"> </span><span class="hl-5">CustomCircle</span><span class="hl-1"> </span><span class="hl-4">extends</span><span class="hl-1"> </span><span class="hl-5">Drawable</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">constructor</span><span class="hl-1">(</span><span class="hl-2">center</span><span class="hl-1">, </span><span class="hl-2">radius</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">super</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">center</span><span class="hl-1"> = </span><span class="hl-2">center</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">radius</span><span class="hl-1"> = </span><span class="hl-2">radius</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-4">static</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">propertyUniformMapping:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">center:</span><span class="hl-1"> </span><span class="hl-3">&#39;customCircleCenters&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">radius:</span><span class="hl-1"> </span><span class="hl-3">&#39;customCircleRadii&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">uniformCountMacroName:</span><span class="hl-1"> </span><span class="hl-3">&#39;CUSTOM_CIRCLE_COUNT&#39;</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-6">0</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">4</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-7">// Unused array entries are filled with this zero-radius circle and moved away.</span><br/><span class="hl-1"> </span><span class="hl-2">empty:</span><span class="hl-1"> </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-8">CustomCircle</span><span class="hl-1">([</span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-6">0</span><span class="hl-1">], </span><span class="hl-6">0</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-2">sdf:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">distanceFunctionName:</span><span class="hl-1"> </span><span class="hl-3">&#39;customCircleDistance&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">shader:</span><span class="hl-1"> </span><span class="hl-3">`</span><br/><span class="hl-3"> uniform vec2 customCircleCenters[CUSTOM_CIRCLE_COUNT];</span><br/><span class="hl-3"> uniform float customCircleRadii[CUSTOM_CIRCLE_COUNT];</span><br/><br/><span class="hl-3"> float customCircleDistance(in vec2 target, out vec4 color) {</span><br/><span class="hl-3"> color = vec4(1.0, 0.25, 0.0, 1.0);</span><br/><span class="hl-3"> float minDistance = 1000.0;</span><br/><span class="hl-3"> for (int i = 0; i &lt; CUSTOM_CIRCLE_COUNT; i++) {</span><br/><span class="hl-3"> float d = distance(target, customCircleCenters[i]) - customCircleRadii[i];</span><br/><span class="hl-3"> minDistance = min(minDistance, d);</span><br/><span class="hl-3"> }</span><br/><span class="hl-3"> return minDistance;</span><br/><span class="hl-3"> }</span><br/><span class="hl-3"> `</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">minDistance</span><span class="hl-1">(</span><span class="hl-2">target</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-2">vec2</span><span class="hl-1">.</span><span class="hl-8">distance</span><span class="hl-1">(</span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">center</span><span class="hl-1">, </span><span class="hl-2">target</span><span class="hl-1">) - </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">radius</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-8">getObjectToSerialize</span><span class="hl-1">(</span><span class="hl-2">transform2d</span><span class="hl-1">, </span><span class="hl-2">transform1d</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">center:</span><span class="hl-1"> </span><span class="hl-2">vec2</span><span class="hl-1">.</span><span class="hl-8">transformMat2d</span><span class="hl-1">(</span><span class="hl-2">vec2</span><span class="hl-1">.</span><span class="hl-8">create</span><span class="hl-1">(), </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">center</span><span class="hl-1">, </span><span class="hl-2">transform2d</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-2">radius:</span><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">radius</span><span class="hl-1"> * </span><span class="hl-2">transform1d</span><span class="hl-1">,</span><br/><span class="hl-1"> };</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-9">canvas</span><span class="hl-1"> = </span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-8">createElement</span><span class="hl-1">(</span><span class="hl-3">&#39;canvas&#39;</span><span class="hl-1">);</span><br/><span class="hl-2">canvas</span><span class="hl-1">.</span><span class="hl-2">width</span><span class="hl-1"> = </span><span class="hl-6">320</span><span class="hl-1">;</span><br/><span class="hl-2">canvas</span><span class="hl-1">.</span><span class="hl-2">height</span><span class="hl-1"> = </span><span class="hl-6">240</span><span class="hl-1">;</span><br/><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-2">body</span><span class="hl-1">.</span><span class="hl-8">appendChild</span><span class="hl-1">(</span><span class="hl-2">canvas</span><span class="hl-1">);</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-9">renderer</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-8">compile</span><span class="hl-1">(</span><span class="hl-2">canvas</span><span class="hl-1">, [</span><span class="hl-2">CustomCircle</span><span class="hl-1">.</span><span class="hl-2">descriptor</span><span class="hl-1">]);</span><br/><span class="hl-2">renderer</span><span class="hl-1">.</span><span class="hl-8">setRuntimeSettings</span><span class="hl-1">({ </span><span class="hl-2">ambientLight:</span><span class="hl-1"> [</span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">], </span><span class="hl-2">motionBlur:</span><span class="hl-1"> </span><span class="hl-6">0</span><span class="hl-1"> });</span><br/><span class="hl-2">renderer</span><span class="hl-1">.</span><span class="hl-8">addDrawable</span><span class="hl-1">(</span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-8">CustomCircle</span><span class="hl-1">([</span><span class="hl-6">160</span><span class="hl-1">, </span><span class="hl-6">120</span><span class="hl-1">], </span><span class="hl-6">50</span><span class="hl-1">));</span><br/><span class="hl-2">renderer</span><span class="hl-1">.</span><span class="hl-8">renderDrawables</span><span class="hl-1">();</span><br/><br/><span class="hl-7">// Call renderer.destroy() when the renderer is no longer needed.</span>
</code><button type="button">Copy</button></pre>
<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 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>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>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-4">this</span><span class="hl-1">.</span><span class="hl-2">renderer</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-8">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 like this:</p>
<pre><code class="js"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">renderer</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-8">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-6">0</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">2</span><span class="hl-1">, </span><span class="hl-6">24</span><span class="hl-1">, </span><span class="hl-6">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-6">0</span><span class="hl-1">, </span><span class="hl-6">1</span><span class="hl-1">, </span><span class="hl-6">2</span><span class="hl-1">, </span><span class="hl-6">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>Using very large numbers is not advised, for both compatibility and performance reasons.</p>
<blockquote>
<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>
<ul>
<li><a href="#custom-drawable-example"><span>Custom drawable example</span></a></li></ul></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.8.0</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>