Karsten Schmidt<p>Update on the <a href="https://mastodon.thi.ng/tags/Ziglang" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Ziglang</span></a> <a href="https://mastodon.thi.ng/tags/WebAssembly" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAssembly</span></a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebGL</span></a> bridge for <a href="https://thi.ng/wasm-api" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/wasm-api</span><span class="invisible"></span></a>...</p><p>The overall approach is quite highlevel & very close to <a href="https://thi.ng/webgl" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/webgl</span><span class="invisible"></span></a> in JS/TS (which is also doing all the heavy lifting behind the scenes)</p><p>Supported so far:</p><p>- declarative shader attributes, varyings, uniforms w/ partial code generation<br>- declarative attribute buffer creation<br>- optional support for instancing, e.g. as shown in the video[1]<br>- per-model spec uniform overrides & setters (without having to juggle shader uniform locations etc.)</p><p>Planned:</p><p>- texture & FBO/RBO creation/management<br>- multipass shader pipeline creation</p><p>Another nice workflow aspect shown in the video: Using `mprocs`[2] to run multiple processes, here: Vite dev server, the Zig build system (to build a WASM binary) and <a href="https://thi.ng/meta-css" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/meta-css</span><span class="invisible"></span></a> (highlevel CSS toolchain). `mprocs` allows relaunching processes via key press (`R`), so even though it's not fully-automatic hot reload, I can make changes to the Zig source code, press `R` to rebuild, optimize & copy the WASM file. This then is detected by Vite which then reloads it in the browser... there's a slight delay (sure can be improved), but that all works great!</p><p>[1] The 3 triangles are instances of the same single geometry<br>[2] <a href="https://github.com/pvolok/mprocs" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">github.com/pvolok/mprocs</span><span class="invisible"></span></a></p><p><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ThingUmbrella</span></a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebGL</span></a> <a href="https://mastodon.thi.ng/tags/WebAssembly" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAssembly</span></a> <a href="https://mastodon.thi.ng/tags/Zig" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Zig</span></a> <a href="https://mastodon.thi.ng/tags/Ziglang" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Ziglang</span></a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TypeScript</span></a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.thi.ng/tags/HotReload" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HotReload</span></a> <a href="https://mastodon.thi.ng/tags/Workflow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Workflow</span></a></p>