92 lines
8.7 KiB
HTML
92 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><link rel="alternate" type="text/gemini" href="gemini://mossfet.xyz/blog/metaballs/index.gmi" title="Mossfet's site" />
|
|
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all" />
|
|
<body>
|
|
<div style="margin: 2%"><header>
|
|
<nav class="navbar">
|
|
|
|
<a href="/index.xml"><img src="/images/feed.svg" style="height: 20px; width: 20px; float: left;" alt="RSS Feed"></a>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/blog">Blog</a></li>
|
|
<li><a href="/links">Links</a></li>
|
|
<li><a href="https://git.solarpunk.moe/mossfet.site">Source</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="section border">
|
|
<nav class="ring">
|
|
<div class="ring-prev">
|
|
|
|
<a href="https://mossfet.xyz/blog/site/">Previous post - I made a website</a>
|
|
|
|
</div>
|
|
<div class="ring-next">
|
|
|
|
<a href="https://mossfet.xyz/blog/newsite/">Next post - Reworking the site frontend</a>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
<hr>
|
|
<article>
|
|
<div class="blog-header">
|
|
<h1 class="blog-title">Metaballs</h1>
|
|
|
|
<h5>Written May 17, 2022</h5>
|
|
|
|
<h5>Last modifed May 24, 2022</h5>
|
|
<h5>Written by Mossfet</h5>
|
|
</div>
|
|
<div class="blog-content">
|
|
<h3 id="1-tic-80">1: TIC-80</h3>
|
|
<p>A few months ago, I stumbled across the concept of ‘metaballs’ on YouTube. I was already trying to work on a semi-successful 3D graphics project on the <a href="https://tic80.com/">TIC-80</a>, a fantasy console similar to the Pico-8, so when I gave up on that, I decided to try my hand at writing them there as well.</p>
|
|
<p>You can find the result <a href="https://tic80.com/play?cart=2784">here</a></p>
|
|
<p>It didn’t go horribly, but I was pretty dissatisfied with the performance and the limitation to a few colour bands. The TIC-80’s standard library is tiny, and doesn’t seem to have any support for hardware acceleration or multithreading. The most efficient way I could find was essentially to run the calculation on every pixel in sequence on every frame. Combined with the inherent limitations of an interpreted language being run in a browser and it ran at around 10fps for three balls on my admittedly low-power Chromebook, and that’s taking into account the low resolution of the TIC-80 - 240 by 136. If this were scaled up to something like 1080p it would probably run around 60 times slower. So I tried again</p>
|
|
<h3 id="2-godot">2: Godot</h3>
|
|
<p>About a week ago, I decided to rewrite in in Godot. I ran a shader on it that did the calculations per-pixel, and instead of set colour bands I was able to make a gradient. I’m not entirely sure whether I prefer the bands or the gradient, but I’m glad I was able to try both. More importantly, it was able to run at 1080p at 60 frames per second, so the performance was more than satisfactory for me. I haven’t published the code because frankly it’s not that interesting, thought if you want it for whatever reason, message me.</p>
|
|
<p>I’m currently working on a game in Godot, so I’m glad to take all the excuses to learn new concepts in it as I can get.</p>
|
|
<h3 id="3-opengl">3: OpenGL</h3>
|
|
<p>I had done <a href="https://learnopengl.com/">an OpenGL course</a> around a year ago, and wanted to have a go at Metaballs on there as well. As the code for this project is largely based on the OpenGL course, it is written in C++ and uses the GLFW library. I followed the course up to drawing a triangle, but instead focused on making two triangles that form a rectangle that covers the whole screen (I am told that this is how game developers usually apply a shader to the whole screen). The shader was very similar to the one done in Godot but had some very cursed code that attempted to convert between the coordinate system that the ball uses (-1.0, -1.0 for the top-left, 1.0, 1.0 for the top right), and normal pixel coordinates.
|
|
I could refactor it into something better but frankly I am tired and have a short attention span.</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-C" data-lang="C"><span style="display:flex;"><span><span style="color:#75715e">// This is not happy code
|
|
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">return</span> (<span style="color:#ae81ff">500.0</span> <span style="color:#f92672">*</span> ball.z <span style="color:#f92672">/</span> (<span style="color:#a6e22e">pow</span>(<span style="color:#a6e22e">abs</span>(gl_FragCoord.x <span style="color:#f92672">-</span> (<span style="color:#ae81ff">0.5</span> <span style="color:#f92672">+</span> ball.x <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>) <span style="color:#f92672">*</span> <span style="color:#ae81ff">1920.0</span>), <span style="color:#ae81ff">2</span>) <span style="color:#f92672">+</span> <span style="color:#a6e22e">pow</span>(<span style="color:#a6e22e">abs</span>(gl_FragCoord.y <span style="color:#f92672">-</span> (<span style="color:#ae81ff">0.5</span> <span style="color:#f92672">+</span> ball.y <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>) <span style="color:#f92672">*</span> <span style="color:#ae81ff">1080.0</span>), <span style="color:#ae81ff">2</span>)));
|
|
</span></span></code></pre></div><p>All in all the code took me around four straight hours to write. Sadly, as the laptop it was written on has now died due to a faulty charging port (might see about repairing it in future), the program is lost. I didn’t get a chance to benchmark it, either. If I do manage to fix it, I will back up the program and benchmark it against the Vulkan implementation.</p>
|
|
<h3 id="4-vulkan">4: Vulkan</h3>
|
|
<p>This was probably a mistake. Being a much more complex to use graphics API than OpenGL, it was far more verbose to complete. Like OpenGL, I followed <a href="https://vulkan-tutorial.com/">a course</a> to set up the boilerplate I needed (and introduce me to Vulkan’s various concepts). I have to say, I’m pretty proud of it. Like the original TIC-80 project (though I’m not sure if that’s what actually ended up on the site), it features randomly placed metaballs, something missing on both the Godot and OpenGL implementation. I also experimented with balls with negative ‘size’, if size is even the correct term here, and the results were very fun. You can ask for either purely positive metaballs or negative metaballs as well with a command-line option. While I was unable to get the validation layer for a proper FPS count compiled on my Chromebook, I was able to use Mangohud to measure the program’s FPS. The results were mixed, with 60 FPS on the default resolution (800x600), and around 30 FPS when fullscreened (1336x768) on my Chromebook.</p>
|
|
<h3 id="5-whats-next">5: What’s next?</h3>
|
|
<p>I have a few ideas for where I want to go with this project. The obvious one is leave it here. With Vulkan, I’ve gone about as ’low-level’ as I’m willing to go. I might return to <a href="http://craftinginterpreters.com/">the interpreter tutorial I was working on</a>, and I’ll obviously continue working on this site. Some other options are DirectX (thought I’m not sure how that would work, as I don’t own a Windows computer), and Unreal Engine (again, Windows only makes it a bit awkward since I don’t own a Windows computer).</p>
|
|
|
|
</div>
|
|
</article>
|
|
<hr>
|
|
<nav class="ring">
|
|
<div class="ring-prev">
|
|
|
|
<a href="https://mossfet.xyz/blog/site/">Previous post - I made a website</a>
|
|
|
|
</div>
|
|
<div class="ring-next">
|
|
|
|
<a href="https://mossfet.xyz/blog/newsite/">Next post - Reworking the site frontend</a>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
</section>
|
|
<footer class="footer">
|
|
<div>
|
|
This site (frontend and backend) is licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a> or later, with images and text also available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC-BY-SA 4.0</a>, at your discretion.
|
|
</div>
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
<div class="webring"><a href="https://fediring.net/previous?host=mossfet.xyz" title="Previous Webring site">Previous</a> <a href="https://fediring.net">Fediring</a> <a href="https://fediring.net/next?host=mossfet.xyz" title="Next webring site">Next</a></div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|