Show HN: An otherworldly 3D scene in 16 kB of JavaScript

(trigger warning: I know HN isn't keen on anything related to crypto, and this is crypto-art.)Over the course of a couple of months this year I learned path tracing, signed distance fields, GLSL coding, and compacting JavaScript using a coding style you shoul…
Pablo Mosciski MD · 12 days ago · 2 minutes read


The Genesis of Origin: A Technological and Artistic Discovery

Birth of a Scientific Breakthrough

In an ongoing scientific pursuit, researchers tirelessly dedicated resources to a specific region, seeking patterns that had eluded them for centuries.

Then, a pivotal moment occurred.

Within a fraction of spacetime, a mysterious structure emerged, a spontaneous creation of otherworldly precision that defied all known laws. Yet, as quickly as it appeared, it vanished without a trace.

Although attempts at recreation failed, this ephemeral event left an indelible mark, proving the existence of an origin that transcended their understanding.

Computational Masterpiece

This enigmatic 3D artwork, entitled "Origin," is rendered using Monte Carlo path tracing, an algorithm that meticulously simulates light's interactions within a scene. The computational intensity demands multiple light rays per pixel, producing highly detailed and photorealistic images.

The intricate shapes in "Origin" are meticulously crafted using mathematical equations known as signed distance functions. These shapes are masterfully combined and distorted, creating new forms that embody both organic and liquid qualities.

The rendering process requires substantial time to produce a crisp image. By default, it optimizes for speed at 15 FPS, but for maximum detail, the user can disable tiling or use a preset and allow for extended rendering.

Diversity and Innovation

"Origin" encompasses a range of variations, each edition boasting unique cell forms, materials, and lighting setups. The intersection of custom parameters and controlled randomness results in diverse outputs, capturing the intricate beauty of organic shapes amidst a cascade of liquid droplets.

Code Efficiency: A Compact Enigma

Despite its complexity, this artwork is encapsulated in a remarkable 16 kilobyte code snippet, fitting onto a single sheet of paper without reliance on external libraries or frameworks. This artistic challenge required clever techniques such as variable shortening, custom minifiers, and the ingenious use of the comma operator to eliminate unnecessary keywords.

Shader Mastery

The majority of "Origin" is written in GLSL, a language optimized for GPU-based graphics processing. By incorporating a RLE decompressor, significant bytes were conserved while maintaining the code's integrity.

Patience Rewarded

Creating "Origin" required immense patience from both the artist and the viewer. The intricacies of shader coding and path tracing demanded time and dedication, but the resulting artwork stands as a testament to the rewards of perseverance.

Viewers are encouraged to witness the rendering process unfold patiently, as the artwork slowly transforms into its final, breathtaking form.