The feature ended up getting killed, but was a fun process :).

Then, In the build – with a single draw call I could select and highlight each country using his ISO code. The pixelated effect was created by rendering it on a smaller RT using gl.NEAREST sampling

Digging into my hard drive – 2023, when I created a workflow, that starting from an SVG it would create a 3D globe. Retaining informations like each country id, capital city position, and more. It would also store "flat to 3d" attributes to be able to animate it in the build.

@active_theory Things like: Our custom framework (hydra), 3D engine (hydra3d), javascript transpiler (hydraX), nodejs dev server, in browser cloud based scene editor, internal package manager, custom houdini/blender/c4d exporter, hybrid native/web AR, and much more!.

This is just the tip of the iceberg! Over the last 13 years @active_theory built a lot of in house tech / tools / workflows. Happy to give my little contribution with such talented team.

FBO Debugger.We have a little tool to easily inspect values in render targets. Useful for GPGPU stuff

Shader errors.When a shader cannot be compiled, we have a "pretty" view in console to easily found the issue

Performance page.We have a "performance" page that outputs all the possible debugging information for a certain device. This is helpful for replicating issues or when asking more information from the client

Render Monitor.Using `EXT_disjoint_timer_query` extension we measure the time elapsed for certain queries and draw calls. Helpful to detect what are the expensive calls and shaders in the build and log the elapsed time in Spector. For example this composite operation took 1.19ms

Spector.We use Spector.js a lot to debug things. When the chrome extension is running, we attach custom information to our shader using `__SPECTOR_Metadata` This is helpful to easily find the filename of the shader in our codebase.

Render Count.Helps monitoring the number of resources created and in memory on the GPU. Number of textures, shaders, buffers, etc. There is a flag to log info when the resource gets created. This is important to make sure we are uploading GPU resources at the “right time”.

Render Stats. Helps monitoring the amount of things happening in a single frame: number of draw calls, triangles count, post processing passes, etc. It’s easily extendable, adding project-specific.

Debugging webgl is notably hard sometimes. Here are some of the tools we have built at @active_theory to help debugging web graphics. 🧵.

RT @RobertESouth: Some simple deferred SSR added to bolt-gl this morning. 30 raymarch steps. Definitely not perfect but a neat effect. #web….

🧱.

– Split text within HTML elements into individual lines, words, and/or characters.

More to come! 🥳.

– Ensures text is evenly distributed across multiple lines, enhancing readability and visual appeal.

– Dynamically adjust text to fit within a specified container.

– Enables web applications to play audio even when an iPhone or iPad’s physical mute switch is engaged.