Rerender docs
This commit is contained in:
parent
8220095e4e
commit
4357bb01c3
158 changed files with 2352 additions and 9364 deletions
371
docs/index.html
371
docs/index.html
|
|
@ -1,318 +1,53 @@
|
|||
<!doctype html>
|
||||
<html class="default no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>SDF-2D - v0.7.6</title>
|
||||
<meta name="description" content="Documentation for SDF-2D - v0.7.6">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="tsd-page-toolbar">
|
||||
<div class="container">
|
||||
<div class="table-wrap">
|
||||
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
|
||||
<div class="field">
|
||||
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
|
||||
<input id="tsd-search-field" type="text" />
|
||||
</div>
|
||||
<ul class="results">
|
||||
<li class="state loading">Preparing search index...</li>
|
||||
<li class="state failure">The search index is not available</li>
|
||||
</ul>
|
||||
<a href="index.html" class="title">SDF-2D - v0.7.6</a>
|
||||
</div>
|
||||
<div class="table-cell" id="tsd-widgets">
|
||||
<div id="tsd-filter">
|
||||
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
||||
<div class="tsd-filter-group">
|
||||
<div class="tsd-select" id="tsd-filter-visibility">
|
||||
<span class="tsd-select-label">All</span>
|
||||
<ul class="tsd-select-list">
|
||||
<li data-value="public">Public</li>
|
||||
<li data-value="protected">Public/Protected</li>
|
||||
<li data-value="private" class="selected">All</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="checkbox" id="tsd-filter-inherited" checked />
|
||||
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tsd-page-title">
|
||||
<div class="container">
|
||||
<ul class="tsd-breadcrumb">
|
||||
<li>
|
||||
<a href="globals.html">Globals</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h1>SDF-2D - v0.7.6</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container container-main">
|
||||
<div class="row">
|
||||
<div class="col-8 col-content">
|
||||
<div class="tsd-panel tsd-typography">
|
||||
<a href="#-documentation" id="-documentation" style="color: inherit; text-decoration: none;">
|
||||
<h1><img src="media/logo-colored.svg" alt="SDF-2D logo"> Documentation</h1>
|
||||
</a>
|
||||
<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>
|
||||
<a href="#links" id="links" style="color: inherit; text-decoration: none;">
|
||||
<h2>Links</h2>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="https://github.com/schmelczerandras/sdf-2d">Repository</a></li>
|
||||
<li><a href="https://sdf2d.schmelczer.dev/">Demo</a></li>
|
||||
<li><a href="https://github.com/schmelczerandras/sdf-2d-minimal-example">Minimal example</a></li>
|
||||
<li><a href="https://github.com/schmelczerandras/sdf-2d-more-complex-example">More complex example</a></li>
|
||||
<li><a href="https://github.com/schmelczerandras/sdf-2d-demo">Source code of the demo</a></li>
|
||||
</ul>
|
||||
<a href="#usage-1st-option" id="usage-1st-option" style="color: inherit; text-decoration: none;">
|
||||
<h2>Usage (1st option)</h2>
|
||||
</a>
|
||||
<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>.<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>
|
||||
</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>
|
||||
</ul>
|
||||
<a href="#usage-2nd-option" id="usage-2nd-option" style="color: inherit; text-decoration: none;">
|
||||
<h2>Usage (2nd option)</h2>
|
||||
</a>
|
||||
<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>
|
||||
<a href="#extending-drawables" id="extending-drawables" style="color: inherit; text-decoration: none;">
|
||||
<h2>Extending drawables</h2>
|
||||
</a>
|
||||
<blockquote>
|
||||
<p>Iñigo Quilez has some great <a href="https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm">2D SDF-s</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>
|
||||
</ul>
|
||||
<a href="#useful-to-know" id="useful-to-know" style="color: inherit; text-decoration: none;">
|
||||
<h2>Useful to know</h2>
|
||||
</a>
|
||||
<a href="#math" id="math" style="color: inherit; text-decoration: none;">
|
||||
<h3>Math</h3>
|
||||
</a>
|
||||
<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>
|
||||
<a href="#coordinates" id="coordinates" style="color: inherit; text-decoration: none;">
|
||||
<h3>Coordinates</h3>
|
||||
</a>
|
||||
<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>
|
||||
<a href="#tile-based-rendering" id="tile-based-rendering" style="color: inherit; text-decoration: none;">
|
||||
<h3>Tile-based rendering</h3>
|
||||
</a>
|
||||
<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>
|
||||
<pre><code class="language-js"><span class="hljs-built_in">this</span>.renderer = <span class="hljs-keyword">await</span> compile(canvas, [Circle.descriptor, CircleLight.descriptor]);
|
||||
</code></pre>
|
||||
<p>Modify it to something similar:</p>
|
||||
<pre><code class="language-js"><span class="hljs-built_in">this</span>.renderer = <span class="hljs-keyword">await</span> compile(canvas, [
|
||||
{
|
||||
...Circle.descriptor,
|
||||
<span class="hljs-attr">shaderCombinationSteps</span>: [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">24</span>, <span class="hljs-number">64</span>],
|
||||
},
|
||||
{
|
||||
...CircleLight.descriptor,
|
||||
<span class="hljs-attr">shaderCombinationSteps</span>: [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>],
|
||||
},
|
||||
]);
|
||||
</code></pre>
|
||||
<p>The usage of too large numbers is not advised for compatibility and performance reasons alike.</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>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
||||
<nav class="tsd-navigation primary">
|
||||
<ul>
|
||||
<li class="globals ">
|
||||
<a href="globals.html"><em>Globals</em></a>
|
||||
</li>
|
||||
<li class=" tsd-kind-namespace">
|
||||
<a href="modules/__global.html">__global</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="tsd-navigation secondary menu-sticky">
|
||||
<ul class="before-current">
|
||||
<li class=" tsd-kind-enum">
|
||||
<a href="enums/filteringoptions.html" class="tsd-kind-icon">Filtering<wbr>Options</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-enum">
|
||||
<a href="enums/wrapoptions.html" class="tsd-kind-icon">Wrap<wbr>Options</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/circlebase.html" class="tsd-kind-icon">Circle<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/circlelight.html" class="tsd-kind-icon">Circle<wbr>Light</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/colorfulcircle.html" class="tsd-kind-icon">Colorful<wbr>Circle</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/deltatimecalculator.html" class="tsd-kind-icon">Delta<wbr>Time<wbr>Calculator</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/drawable.html" class="tsd-kind-icon">Drawable</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/dropletbase.html" class="tsd-kind-icon">Droplet<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/flashlight.html" class="tsd-kind-icon">Flashlight</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/fpsqualityautoscaler.html" class="tsd-kind-icon">Fps<wbr>Quality<wbr>Autoscaler</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/hexagonbase.html" class="tsd-kind-icon">Hexagon<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/invertedtunnelbase.html" class="tsd-kind-icon">Inverted<wbr>Tunnel<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/metacirclebase.html" class="tsd-kind-icon">Meta<wbr>Circle<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/polygonbase.html" class="tsd-kind-icon">Polygon<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-class">
|
||||
<a href="classes/rotatedrectanglebase.html" class="tsd-kind-icon">Rotated<wbr>Rectangle<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-interface">
|
||||
<a href="interfaces/drawabledescriptor.html" class="tsd-kind-icon">Drawable<wbr>Descriptor</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-interface">
|
||||
<a href="interfaces/noisypolygonbase.html" class="tsd-kind-icon">Noisy<wbr>Polygon<wbr>Base</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-interface">
|
||||
<a href="interfaces/renderer.html" class="tsd-kind-icon">Renderer</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-interface">
|
||||
<a href="interfaces/rendererinfo.html" class="tsd-kind-icon">Renderer<wbr>Info</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-interface">
|
||||
<a href="interfaces/runtimesettings.html" class="tsd-kind-icon">Runtime<wbr>Settings</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-interface">
|
||||
<a href="interfaces/startupsettings.html" class="tsd-kind-icon">Startup<wbr>Settings</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-interface">
|
||||
<a href="interfaces/textureoptions.html" class="tsd-kind-icon">Texture<wbr>Options</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-type-alias">
|
||||
<a href="globals.html#texturewithoptions" class="tsd-kind-icon">Texture<wbr>With<wbr>Options</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-variable">
|
||||
<a href="globals.html#_id" class="tsd-kind-icon">_id</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#circlefactory" class="tsd-kind-icon">Circle<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#dropletfactory" class="tsd-kind-icon">Droplet<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#hexagonfactory" class="tsd-kind-icon">Hexagon<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#invertedtunnelfactory" class="tsd-kind-icon">Inverted<wbr>Tunnel<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#metacirclefactory" class="tsd-kind-icon">Meta<wbr>Circle<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#noisypolygonfactory" class="tsd-kind-icon">Noisy<wbr>Polygon<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#polygonfactory" class="tsd-kind-icon">Polygon<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#rotatedrectanglefactory" class="tsd-kind-icon">Rotated<wbr>Rectangle<wbr>Factory</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#compile" class="tsd-kind-icon">compile</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#hex" class="tsd-kind-icon">hex</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#hsl" class="tsd-kind-icon">hsl</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#rendernoise" class="tsd-kind-icon">render<wbr>Noise</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#rgb" class="tsd-kind-icon">rgb</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#rgb255" class="tsd-kind-icon">rgb255</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#rgba" class="tsd-kind-icon">rgba</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#rgba255" class="tsd-kind-icon">rgba255</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-function">
|
||||
<a href="globals.html#runanimation" class="tsd-kind-icon">run<wbr>Animation</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-object-literal">
|
||||
<a href="globals.html#defaultruntimesettings" class="tsd-kind-icon">default<wbr>Runtime<wbr>Settings</a>
|
||||
</li>
|
||||
<li class=" tsd-kind-object-literal">
|
||||
<a href="globals.html#defaultstartupsettings" class="tsd-kind-icon">default<wbr>Startup<wbr>Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<h2>Legend</h2>
|
||||
<div class="tsd-legend-group">
|
||||
<ul class="tsd-legend">
|
||||
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
|
||||
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
|
||||
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
|
||||
</ul>
|
||||
<ul class="tsd-legend">
|
||||
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
|
||||
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
|
||||
</ul>
|
||||
<ul class="tsd-legend">
|
||||
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
|
||||
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
|
||||
</ul>
|
||||
<ul class="tsd-legend">
|
||||
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
|
||||
</ul>
|
||||
<ul class="tsd-legend">
|
||||
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="overlay"></div>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</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.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"><h1>SDF-2D - v0.7.6</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://github.com/schmelczerandras/sdf-2d">Repository</a></li>
|
||||
<li><a href="https://sdf2d.schmelczer.dev/">Demo</a></li>
|
||||
<li><a href="https://github.com/schmelczerandras/sdf-2d-minimal-example">Minimal example</a></li>
|
||||
<li><a href="https://github.com/schmelczerandras/sdf-2d-more-complex-example">More complex example</a></li>
|
||||
<li><a href="https://github.com/schmelczerandras/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, first you have get a renderer instance. This is possible 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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue