Fix custom drawable API docs
This commit is contained in:
parent
0addc7d6ff
commit
5892830104
8 changed files with 157 additions and 39 deletions
|
|
@ -1,28 +1,32 @@
|
|||
:root {
|
||||
--light-hl-0: #0000FF;
|
||||
--dark-hl-0: #569CD6;
|
||||
--light-hl-0: #AF00DB;
|
||||
--dark-hl-0: #C586C0;
|
||||
--light-hl-1: #000000;
|
||||
--dark-hl-1: #D4D4D4;
|
||||
--light-hl-2: #001080;
|
||||
--dark-hl-2: #9CDCFE;
|
||||
--light-hl-3: #AF00DB;
|
||||
--dark-hl-3: #C586C0;
|
||||
--light-hl-4: #795E26;
|
||||
--dark-hl-4: #DCDCAA;
|
||||
--light-hl-5: #098658;
|
||||
--dark-hl-5: #B5CEA8;
|
||||
--light-hl-6: #A31515;
|
||||
--dark-hl-6: #CE9178;
|
||||
--light-hl-7: #0070C1;
|
||||
--dark-hl-7: #4FC1FF;
|
||||
--light-hl-8: #800000;
|
||||
--dark-hl-8: #808080;
|
||||
--light-hl-9: #800000;
|
||||
--dark-hl-9: #569CD6;
|
||||
--light-hl-10: #E50000;
|
||||
--dark-hl-10: #9CDCFE;
|
||||
--light-hl-11: #0000FF;
|
||||
--dark-hl-11: #CE9178;
|
||||
--light-hl-3: #A31515;
|
||||
--dark-hl-3: #CE9178;
|
||||
--light-hl-4: #0000FF;
|
||||
--dark-hl-4: #569CD6;
|
||||
--light-hl-5: #267F99;
|
||||
--dark-hl-5: #4EC9B0;
|
||||
--light-hl-6: #098658;
|
||||
--dark-hl-6: #B5CEA8;
|
||||
--light-hl-7: #008000;
|
||||
--dark-hl-7: #6A9955;
|
||||
--light-hl-8: #795E26;
|
||||
--dark-hl-8: #DCDCAA;
|
||||
--light-hl-9: #0070C1;
|
||||
--dark-hl-9: #4FC1FF;
|
||||
--light-hl-10: #800000;
|
||||
--dark-hl-10: #808080;
|
||||
--light-hl-11: #800000;
|
||||
--dark-hl-11: #569CD6;
|
||||
--light-hl-12: #E50000;
|
||||
--dark-hl-12: #9CDCFE;
|
||||
--light-hl-13: #0000FF;
|
||||
--dark-hl-13: #CE9178;
|
||||
--light-code-background: #FFFFFF;
|
||||
--dark-code-background: #1E1E1E;
|
||||
}
|
||||
|
|
@ -40,6 +44,8 @@
|
|||
--hl-9: var(--light-hl-9);
|
||||
--hl-10: var(--light-hl-10);
|
||||
--hl-11: var(--light-hl-11);
|
||||
--hl-12: var(--light-hl-12);
|
||||
--hl-13: var(--light-hl-13);
|
||||
--code-background: var(--light-code-background);
|
||||
} }
|
||||
|
||||
|
|
@ -56,6 +62,8 @@
|
|||
--hl-9: var(--dark-hl-9);
|
||||
--hl-10: var(--dark-hl-10);
|
||||
--hl-11: var(--dark-hl-11);
|
||||
--hl-12: var(--dark-hl-12);
|
||||
--hl-13: var(--dark-hl-13);
|
||||
--code-background: var(--dark-code-background);
|
||||
} }
|
||||
|
||||
|
|
@ -72,6 +80,8 @@
|
|||
--hl-9: var(--light-hl-9);
|
||||
--hl-10: var(--light-hl-10);
|
||||
--hl-11: var(--light-hl-11);
|
||||
--hl-12: var(--light-hl-12);
|
||||
--hl-13: var(--light-hl-13);
|
||||
--code-background: var(--light-code-background);
|
||||
}
|
||||
|
||||
|
|
@ -88,6 +98,8 @@
|
|||
--hl-9: var(--dark-hl-9);
|
||||
--hl-10: var(--dark-hl-10);
|
||||
--hl-11: var(--dark-hl-11);
|
||||
--hl-12: var(--dark-hl-12);
|
||||
--hl-13: var(--dark-hl-13);
|
||||
--code-background: var(--dark-code-background);
|
||||
}
|
||||
|
||||
|
|
@ -103,4 +115,6 @@
|
|||
.hl-9 { color: var(--hl-9); }
|
||||
.hl-10 { color: var(--hl-10); }
|
||||
.hl-11 { color: var(--hl-11); }
|
||||
.hl-12 { color: var(--hl-12); }
|
||||
.hl-13 { color: var(--hl-13); }
|
||||
pre, code, math[display='block'] { background: var(--code-background); }
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<p>When using this, the size of the canvas must be fixed with CSS.</p>
|
||||
<p>The <code>addDeltaTime</code> method should be called once every frame.</p>
|
||||
<p>Usage:</p>
|
||||
<pre><code class="js"><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><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-7">autoscaler</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-4">FpsQualityAutoscaler</span><span class="hl-1">(</span><span class="hl-2">renderer</span><span class="hl-1">);</span>
|
||||
<pre><code class="js"><span class="hl-1"> </span><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><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-9">autoscaler</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-8">FpsQualityAutoscaler</span><span class="hl-1">(</span><span class="hl-2">renderer</span><span class="hl-1">);</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</div></section><aside class="tsd-sources">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ Settings can be set before the promise resolves and they will be applied later.<
|
|||
<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">'sdf-2d'</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">'canvas'</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>
|
||||
<pre><code class="js"><span class="hl-1"> </span><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">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-0">from</span><span class="hl-1"> </span><span class="hl-3">'sdf-2d'</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><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">querySelector</span><span class="hl-1">(</span><span class="hl-3">'canvas'</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-9">Circle</span><span class="hl-1"> = </span><span class="hl-8">CircleFactory</span><span class="hl-1">(</span><span class="hl-8">hsl</span><span class="hl-1">(</span><span class="hl-6">30</span><span class="hl-1">, </span><span class="hl-6">66</span><span class="hl-1">, </span><span class="hl-6">50</span><span class="hl-1">));</span><br/><span class="hl-1"> </span><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">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>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@
|
|||
in the browser. An FPS-based autoscaler is also used. This creates an additional <code>fps</code>
|
||||
key in the renderer's <code>insights</code> property.</p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="html"><span class="hl-1"> </span><span class="hl-8"><</span><span class="hl-9">canvas</span><span class="hl-1"> </span><span class="hl-10">id</span><span class="hl-1">=</span><span class="hl-11">"main"</span><span class="hl-1"> </span><span class="hl-10">style</span><span class="hl-1">=</span><span class="hl-11">"width: 300px; height: 150px"</span><span class="hl-8">></</span><span class="hl-9">canvas</span><span class="hl-8">></span>
|
||||
<pre><code class="html"><span class="hl-1"> </span><span class="hl-10"><</span><span class="hl-11">canvas</span><span class="hl-1"> </span><span class="hl-12">id</span><span class="hl-1">=</span><span class="hl-13">"main"</span><span class="hl-1"> </span><span class="hl-12">style</span><span class="hl-1">=</span><span class="hl-13">"width: 300px; height: 150px"</span><span class="hl-10">></</span><span class="hl-11">canvas</span><span class="hl-10">></span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<blockquote>
|
||||
<p>The canvas needs to have a fixed size specified by CSS.</p>
|
||||
</blockquote>
|
||||
<pre><code class="js"><span class="hl-3">import</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-2">hsl</span><span class="hl-1">, </span><span class="hl-2">runAnimation</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-6">'sdf-2d'</span><span class="hl-1">;</span><br/><br/><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">'canvas'</span><span class="hl-1">);</span><br/><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">180</span><span class="hl-1">, </span><span class="hl-5">100</span><span class="hl-1">, </span><span class="hl-5">40</span><span class="hl-1">));</span><br/><br/><span class="hl-4">runAnimation</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><span class="hl-2">renderer</span><span class="hl-1">, </span><span class="hl-2">time</span><span class="hl-1">) </span><span class="hl-0">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">renderer</span><span class="hl-1">.</span><span class="hl-4">addDrawable</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-4">Circle</span><span class="hl-1">([</span><span class="hl-5">150</span><span class="hl-1"> + </span><span class="hl-5">50</span><span class="hl-1"> * </span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-4">cos</span><span class="hl-1">(</span><span class="hl-2">time</span><span class="hl-1"> / </span><span class="hl-5">1000</span><span class="hl-1">), </span><span class="hl-5">75</span><span class="hl-1"> + </span><span class="hl-5">50</span><span class="hl-1"> * </span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-4">sin</span><span class="hl-1">(</span><span class="hl-2">time</span><span class="hl-1"> / </span><span class="hl-5">1000</span><span class="hl-1">)], </span><span class="hl-5">25</span><span class="hl-1">)</span><br/><span class="hl-1"> );</span><br/><span class="hl-1"> </span><span class="hl-2">renderer</span><span class="hl-1">.</span><span class="hl-4">addDrawable</span><span class="hl-1">(</span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-4">CircleLight</span><span class="hl-1">([</span><span class="hl-5">150</span><span class="hl-1">, </span><span class="hl-5">75</span><span class="hl-1">], </span><span class="hl-4">hsl</span><span class="hl-1">(</span><span class="hl-5">270</span><span class="hl-1">, </span><span class="hl-5">100</span><span class="hl-1">, </span><span class="hl-5">40</span><span class="hl-1">), </span><span class="hl-5">0.1</span><span class="hl-1">));</span><br/><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> </span><span class="hl-0">true</span><span class="hl-1">;</span><br/><span class="hl-1">});</span>
|
||||
<pre><code class="js"><span class="hl-0">import</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-2">hsl</span><span class="hl-1">, </span><span class="hl-2">runAnimation</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'sdf-2d'</span><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">querySelector</span><span class="hl-1">(</span><span class="hl-3">'canvas'</span><span class="hl-1">);</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-9">Circle</span><span class="hl-1"> = </span><span class="hl-8">CircleFactory</span><span class="hl-1">(</span><span class="hl-8">hsl</span><span class="hl-1">(</span><span class="hl-6">180</span><span class="hl-1">, </span><span class="hl-6">100</span><span class="hl-1">, </span><span class="hl-6">40</span><span class="hl-1">));</span><br/><br/><span class="hl-8">runAnimation</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><span class="hl-2">renderer</span><span class="hl-1">, </span><span class="hl-2">time</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">renderer</span><span class="hl-1">.</span><span class="hl-8">addDrawable</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-8">Circle</span><span class="hl-1">([</span><span class="hl-6">150</span><span class="hl-1"> + </span><span class="hl-6">50</span><span class="hl-1"> * </span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-8">cos</span><span class="hl-1">(</span><span class="hl-2">time</span><span class="hl-1"> / </span><span class="hl-6">1000</span><span class="hl-1">), </span><span class="hl-6">75</span><span class="hl-1"> + </span><span class="hl-6">50</span><span class="hl-1"> * </span><span class="hl-2">Math</span><span class="hl-1">.</span><span class="hl-8">sin</span><span class="hl-1">(</span><span class="hl-2">time</span><span class="hl-1"> / </span><span class="hl-6">1000</span><span class="hl-1">)], </span><span class="hl-6">25</span><span class="hl-1">)</span><br/><span class="hl-1"> );</span><br/><span class="hl-1"> </span><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">CircleLight</span><span class="hl-1">([</span><span class="hl-6">150</span><span class="hl-1">, </span><span class="hl-6">75</span><span class="hl-1">], </span><span class="hl-8">hsl</span><span class="hl-1">(</span><span class="hl-6">270</span><span class="hl-1">, </span><span class="hl-6">100</span><span class="hl-1">, </span><span class="hl-6">40</span><span class="hl-1">), </span><span class="hl-6">0.1</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-4">true</span><span class="hl-1">;</span><br/><span class="hl-1">});</span>
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -16,11 +16,12 @@
|
|||
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 DrawableDescriptors, look at the
|
||||
code of [[CircleFactory]] or [[InvertedTunnelFactory]].</p>
|
||||
<a href="https://sdf-2d-docs.schmelczer.dev/index.html#custom-drawable-example">complete custom drawable example</a>,
|
||||
or 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>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:13</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>
|
||||
|
|
@ -45,7 +46,7 @@ code of [[CircleFactory]] or [[InvertedTunnelFactory]].</p>
|
|||
the value of <code>empty</code> is used to pad out arrays.</p>
|
||||
</div><aside class="tsd-sources">
|
||||
<ul>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:73</li></ul></aside></section>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:78</li></ul></aside></section>
|
||||
<section class="tsd-panel tsd-member">
|
||||
<h3 class="tsd-anchor-link" id="objectcountscaler"><code class="tsd-tag">Optional</code><span>object<wbr/>Count<wbr/>Scaler</span><a href="#objectcountscaler" 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">objectCountScaler</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span></div>
|
||||
|
|
@ -54,7 +55,7 @@ the value of <code>empty</code> is used to pad out arrays.</p>
|
|||
<p>By default, its value is 1</p>
|
||||
</div><aside class="tsd-sources">
|
||||
<ul>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:57</li></ul></aside></section>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:62</li></ul></aside></section>
|
||||
<section class="tsd-panel tsd-member">
|
||||
<h3 class="tsd-anchor-link" id="propertyuniformmapping"><span>property<wbr/>Uniform<wbr/>Mapping</span><a href="#propertyuniformmapping" 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">propertyUniformMapping</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">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></div>
|
||||
|
|
@ -62,7 +63,7 @@ the value of <code>empty</code> is used to pad out arrays.</p>
|
|||
getObjectToSerialize and the name of the arrays used in the GLSL code.</p>
|
||||
</div><aside class="tsd-sources">
|
||||
<ul>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:17</li></ul></aside></section>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:18</li></ul></aside></section>
|
||||
<section class="tsd-panel tsd-member">
|
||||
<h3 class="tsd-anchor-link" id="sdf"><code class="tsd-tag">Optional</code><span>sdf</span><a href="#sdf" 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">sdf</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{</span> <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> <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> <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></div>
|
||||
|
|
@ -74,10 +75,14 @@ getObjectToSerialize and the name of the arrays used in the GLSL code.</p>
|
|||
<li class="tsd-parameter">
|
||||
<h5><span class="tsd-kind-property">distanceFunctionName</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
|
||||
<div class="tsd-comment tsd-typography"><p>The name of the function defined in the value of <code>shader</code>.
|
||||
Its signature should look like this:</p>
|
||||
<pre><code class="glsl"> float (in vec2 target, out float colorIndex)
|
||||
Its signature must be:</p>
|
||||
<pre><code class="glsl">float distanceFunction(in vec2 target, out vec4 color)
|
||||
</code><button type="button">Copy</button></pre>
|
||||
|
||||
<p>Replace <code>distanceFunction</code> with the name given here. Return the signed
|
||||
distance to the closest drawable at <code>target</code> and assign its RGBA color
|
||||
to <code>color</code> on every code path. Both WebGL and WebGL2 pass a <code>vec4</code> to
|
||||
this output parameter.</p>
|
||||
</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>
|
||||
|
|
@ -89,7 +94,7 @@ Its signature should look like this:</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>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:29</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>
|
||||
|
|
@ -99,7 +104,7 @@ 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>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:72</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>
|
||||
|
|
@ -107,7 +112,7 @@ shader is used to render a given part of the scene.</p>
|
|||
number of drawables of this type.</p>
|
||||
</div><aside class="tsd-sources">
|
||||
<ul>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:23</li></ul></aside></section></section></details></div>
|
||||
<li>Defined in drawables/drawable-descriptor.ts:24</li></ul></aside></section></section></details></div>
|
||||
<div class="col-sidebar">
|
||||
<div class="page-menu">
|
||||
<div class="tsd-navigation settings">
|
||||
|
|
|
|||
|
|
@ -31,6 +31,83 @@ See its [documentation](functions/run-animation.runAnimation.html) for more deta
|
|||
- Add a static `descriptor` property of type [DrawableDescriptor](interfaces/drawables_drawable-descriptor.DrawableDescriptor.html) to your class
|
||||
- Follow the instructions given in [Usage](#usage-1st-option)
|
||||
|
||||
### Custom drawable example
|
||||
|
||||
The function named by `sdf.distanceFunctionName` must have the signature
|
||||
`float distanceFunction(in vec2 target, out vec4 color)` 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 `color` on every code path.
|
||||
|
||||
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
|
||||
`sdf-2d` and `gl-matrix` installed. Documentation CI runs this exact code with both
|
||||
WebGL 1 and WebGL 2.
|
||||
|
||||
|
||||
```js
|
||||
import { compile, Drawable } from 'sdf-2d';
|
||||
import { vec2 } from 'gl-matrix';
|
||||
|
||||
class CustomCircle extends Drawable {
|
||||
constructor(center, radius) {
|
||||
super();
|
||||
this.center = center;
|
||||
this.radius = radius;
|
||||
}
|
||||
|
||||
static descriptor = {
|
||||
propertyUniformMapping: {
|
||||
center: 'customCircleCenters',
|
||||
radius: 'customCircleRadii',
|
||||
},
|
||||
uniformCountMacroName: 'CUSTOM_CIRCLE_COUNT',
|
||||
shaderCombinationSteps: [0, 1, 4],
|
||||
// Unused array entries are filled with this zero-radius circle and moved away.
|
||||
empty: new CustomCircle([0, 0], 0),
|
||||
sdf: {
|
||||
distanceFunctionName: 'customCircleDistance',
|
||||
shader: `
|
||||
uniform vec2 customCircleCenters[CUSTOM_CIRCLE_COUNT];
|
||||
uniform float customCircleRadii[CUSTOM_CIRCLE_COUNT];
|
||||
|
||||
float customCircleDistance(in vec2 target, out vec4 color) {
|
||||
color = vec4(1.0, 0.25, 0.0, 1.0);
|
||||
float minDistance = 1000.0;
|
||||
for (int i = 0; i < CUSTOM_CIRCLE_COUNT; i++) {
|
||||
float d = distance(target, customCircleCenters[i]) - customCircleRadii[i];
|
||||
minDistance = min(minDistance, d);
|
||||
}
|
||||
return minDistance;
|
||||
}
|
||||
`,
|
||||
},
|
||||
};
|
||||
|
||||
minDistance(target) {
|
||||
return vec2.distance(this.center, target) - this.radius;
|
||||
}
|
||||
|
||||
getObjectToSerialize(transform2d, transform1d) {
|
||||
return {
|
||||
center: vec2.transformMat2d(vec2.create(), this.center, transform2d),
|
||||
radius: this.radius * transform1d,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 320;
|
||||
canvas.height = 240;
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
const renderer = await compile(canvas, [CustomCircle.descriptor]);
|
||||
renderer.setRuntimeSettings({ ambientLight: [1, 1, 1], motionBlur: 0 });
|
||||
renderer.addDrawable(new CustomCircle([160, 120], 50));
|
||||
renderer.renderDrawables();
|
||||
|
||||
// Call renderer.destroy() when the renderer is no longer needed.
|
||||
```
|
||||
|
||||
## Useful to know
|
||||
|
||||
### Math
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ 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 DrawableDescriptors, look at the
|
||||
* code of [[CircleFactory]] or [[InvertedTunnelFactory]].
|
||||
* [complete custom drawable example](https://sdf-2d-docs.schmelczer.dev/index.html#custom-drawable-example),
|
||||
* or the code of [[CircleFactory]] or [[InvertedTunnelFactory]].
|
||||
*/
|
||||
export interface DrawableDescriptor {
|
||||
/**
|
||||
|
|
@ -34,10 +35,14 @@ export interface DrawableDescriptor {
|
|||
shader: string;
|
||||
/**
|
||||
* The name of the function defined in the value of `shader`.
|
||||
* Its signature should look like this:
|
||||
* Its signature must be:
|
||||
* ```glsl
|
||||
* float (in vec2 target, out float colorIndex)
|
||||
* float distanceFunction(in vec2 target, out vec4 color)
|
||||
* ```
|
||||
* Replace `distanceFunction` with the name given here. Return the signed
|
||||
* distance to the closest drawable at `target` and assign its RGBA color
|
||||
* to `color` on every code path. Both WebGL and WebGL2 pass a `vec4` to
|
||||
* this output parameter.
|
||||
*/
|
||||
distanceFunctionName: string;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue