andras/sdf-2d
andras/sdf-2d
Watch
1
0
Fork
You've already forked sdf-2d
 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

Fix custom drawable API docs

Browse source
This commit is contained in:
Andras Schmelczer 2026-10-27 21:18:05 +00:00
commit 5892830104
2 changed files with 157 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/functions/compile.compile.html
View file

@ -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">&#39;sdf-2d&#39;</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">&#39;canvas&#39;</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">&#39;sdf-2d&#39;</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">&#39;canvas&#39;</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>

4
docs/functions/run-animation.runAnimation.html
View file

@ -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">&lt;</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">&quot;main&quot;</span><span class="hl-1"> </span><span class="hl-10">style</span><span class="hl-1">=</span><span class="hl-11">&quot;width: 300px; height: 150px&quot;</span><span class="hl-8">&gt;&lt;/</span><span class="hl-9">canvas</span><span class="hl-8">&gt;</span>
<pre><code class="html"><span class="hl-1"> </span><span class="hl-10">&lt;</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">&quot;main&quot;</span><span class="hl-1"> </span><span class="hl-12">style</span><span class="hl-1">=</span><span class="hl-13">&quot;width: 300px; height: 150px&quot;</span><span class="hl-10">&gt;&lt;/</span><span class="hl-11">canvas</span><span class="hl-10">&gt;</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">&#39;sdf-2d&#39;</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">&#39;canvas&#39;</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">=&gt;</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">&#39;sdf-2d&#39;</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">&#39;canvas&#39;</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">=&gt;</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>