307 lines
No EOL
15 KiB
HTML
307 lines
No EOL
15 KiB
HTML
<!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.3</title>
|
|
<meta name="description" content="Documentation for SDF-2D - v0.7.3">
|
|
<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.3</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.3</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/sdf-2d.pdf">this technical report</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/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-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#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> |