konrad.earth - WebGL

Japan Shader

2025-05-26T00:00:00+00:00

Mountains fading out toward the horizon. This is what we’re looking to re-create in a shader. Photo taken from Oyunohara View Point, Wakayama Prefecture </p> </figcaption> </figure>

The mountains in traditional japanese art prints, ridge behind ridge, each one paler than the last until they finally fade into the sky, always struck me as a stylistic choice. A way of flattening distance onto the canvas. Then I walked the Kumano Kodo, on the Kii Peninsula south of Osaka, and found out that these paintings are much closer to reality than I thought they were. Near ridges dark green. The next one blue-grey. Four or five more behind that, each fainter, the last barely separable from the sky. Dense folded ranges, a lot of humidity, and atmospheric scattering does the rest.</p>

Having worked with elevation models and ray marching before</a>, I figured it would be an interesting challenge to try and recreate this prorammatically. Not a static image, but an interactive applet where you can pick a point on the map and have the mountain ranges laid out before you, in the traditional Japanese art style. So before we dive into how this is done, enjoy some dynamically rendered Japanese mountains, drawn live by your GPU:</p>

</iframe>


Metaballs
2020-05-16T09:00:00+01:00
Metaballs</a>
are a fun way of creating blobby looking shapes.
The idea stems from a method for rendering molecules,
where each atom contributes to the overall electron density1</a></sup>.</p>
In the easy case of hydrogen, this contribution is a radially symmetric shape centered around the
atom’s center \(c\):</p>
$$
f(v; c) = a \exp(- \|v - c\|_2^2)
$$</p>
To render a collection of such atoms, one then takes the sum over these contributions,
and renders a level-set:</p>
$$
\left\{\,v \,\middle|\, \sum_{i=1}^n a_i\exp(- \|v - c_i\|_2^2) = L\,\right\}
$$</p>
Here’s a visualization in two dimensions with moving centers:</p>

  </iframe>
  
    


Soap Bubbles
2019-06-06T09:00:00+01:00
Have you ever wondered about the rainbows on CDs, gasoline puddles or soap bubbles?
All of these have the same cause: The interference of light on thin surfaces</a>.
Today, we’ll try to render something that looks like a soap bubble.</p>
Some Physics</h2>
When a ray of light hits the surface of the soap bubble,
it is either instantly reflected, or it enters the soap film and is refracted.
When it is refracted, it can then be reflected off the other end of the soap,
and then leave it again at a slightly different spot.
There are countless other possiblities for the ray to bounce around,
but these are the two that we will focus on here:</p>


Because the width of the soap layer is comparable to the wavelength of visible light,
the resulting color of the light rays will change considerably depending on the
incidence angle.</p>
Finished visualization</h2>
Putting it all together,
we get this nice little interactive visualization.</p>

  </iframe>
  
    


Particle Life
2019-01-31T09:00:00+01:00
Particle Simulations are great.
Life Simulations are fun.
Meet Particle Life – the intersection of these two worlds.</p>
Inspired by Biologist Lynn Margulis’</a>
theory of endosymbiosis, Jeffrey Ventrella invented his Clusters</a>.
The main idea is simulating microorganisms that have pretty basic interaction patterns.
Some species are drawn towards certain others, while some will be repelled by others.
Implementing a particle simulation with these rules leads to very interesting patterns.</p>
Compared to physics-based particle simulations, this approach explicitly violates the
Conservation of Momentum</a>.
This allows for self-propelling structures, clusters that look like biological cells, and much more.</p>
Porting this simulation to WebGL code was pretty straight-forward using
CindyJS</a>.
Play around with the simulation here:</p>

  </iframe>

konrad.earth - WebGL

Japan Shader

The shader</h1> The core of this app is the WebGL shader. For each pixel on the screen, it marches along the corresponding ray in 3d space and checks whether the ray intersects with the terrain at any point. The ray marching loop is quite simple:</p>

Metaballs

Soap Bubbles

Finished visualization</h2> Putting it all together, we get this nice little interactive visualization.</p> </iframe> </svg> </button> </div>

Particle Life

Finished visualization</h2>
Putting it all together, we get this nice little interactive visualization.</p>
</iframe>