blog.hvidtfeldts.netSyntopia | Generative Art, 3D Fractals, Creative Computing

Syntopia Generative Art, 3D Fractals, Creative Computing Menu About Generative Art Links Search for: Building 4D Polytopes March 28, 2018 OpenGL , WebGL 4D , Coxeter , Polychora , Polytopes , Stereographic Mikael Hvidtfeldt Christensen The idea behind this post goes back to a Fractal Forums discussion back in 2012, where Knighty came up with a clever scheme for ray marching polytopes. It also discusses the mathematics behind Jenn 3D (a tool for creating explicit geometry). It is probably my most ambitious post yet – lots of interactive WebGL components – which also means it not very mobile friendly, I’m afraid. Due to the complexity of the post, I did not use WordPress for this. Instead the blog post is hosted on GitHub, and can be found here: https://syntopia.github.io/Polytopia/polytopes.html Please let me know if you have ideas for improvements or corrections! View all 4 comments Strange Attractors March 28, 2018 WebGL Strange Attractors , WebGL Mikael Hvidtfeldt Christensen ‘Strange Attractors’ is an experiment I did a couple of months ago: https://syntopia.github.io/StrangeAttractors It renders Strange Attractors using WebGL, and can export high resolution PNG’s and OBJ/STL 3D objects. Chrome is strongly preferred, and a good GPU helps as well. Leave a comment Path Tracing 3D Fractals January 18, 2015 Fragmentarium , GPU , Mandelbulb , Raytracing Mikael Hvidtfeldt Christensen In some ways path tracing is one of the simplest and most intuitive ways to do ray tracing. Imagine you want to simulate how the photons from one or more light sources bounce around a scene before reaching a camera. Each time a photon hits a surface, we choose a new randomly reflected direction and continue, adjusting the intensity according to how likely the chosen reflection is. Though this approach works, only a very tiny fraction of paths would terminate at the camera. So instead, we might start from the camera and trace the ray from here and until we hit a light source. And, if the light source is large and slowly varying (for instance when using Image Based Lighting), this may provide good results. But if the light source is small, e.g. like the sun, we have the same problem: the chance that we hit a light source using a path of random reflections is very low, and our image will be very noisy and slowly converging. There are ways around this: one way is to trace rays starting from both the camera and the lights, and connect them (bidirectional path tracing), another is to test for possible direct lighting at each surface intersection (this is sometimes called ‘next event estimation’). Even though the concept of path tracing might be simple, introductions to path tracing often get very mathematical. This blog post is an attempt to introduce path tracing as an operational tool without going through too many formal definitions. The examples are built around Fragmentarium (and thus GLSL) snippets, but the discussion should be quite general. Let us start by considering how light behaves when hitting a very simple material: a perfect diffuse material. Diffuse reflections A Lambertian material is an ideal diffuse material, which has the same radiance when viewed from any angle. Imagine that a Lambertian surface is hit by a light source. Consider the image above, showing some photons hitting a patch of a surface. By pure geometrical reasoning, we can see that the amount of light that hits this patch of the surface will be proportional to the cosine of the angle between the surface normal and the light ray: \( cos(\theta)=\vec{n} \cdot \vec{l} \) By definition of a Lambertian material this amount of incoming light will then be reflected with the same probability in all directions. Now, to find the total light intensity in a given (outgoing) direction, we need to integrate over all possible incoming directions in the hemisphere: \( L_{out}(\vec\omega_o) = \int K*L_{in}(\vec\omega_i)cos(\theta)d\vec\omega_i \) where K is a constant that determines how much of the incoming light is absorbed in the material, and how much is reflected. Notice, that there must be an upper bound to the value of K – too high a value would mean we emitted more light than we received. This is referred to as the ‘conservation of energy’ constraint, which puts the following bound on K: \( \int Kcos(\theta)d\vec\omega_i \leq 1 \) Since K is a constant, this integral is easy to solve (see e.g. equation 30 here ): \( K \leq 1/\pi \) Instead of using the constant K, when talking about a diffuse materials reflectivity, it is common to use the Albedo, defined as \( Albedo = K\pi \). The Albedo is thus always between 0 and 1 for a physical diffuse materials. Using the Albedo definition, we have: \( L_{out}(\vec\omega_o) = \int (Albedo/\pi)*L_{in}(\vec\omega_i)cos(\theta)d\vec\omega_i \) The above is the Rendering Equation for a diffuse material. It describes how light scatters at a single point. Our diffuse material is a special case of the more general formula: \( L_{out}(\vec\omega_o) = \int BRDF(\vec\omega_i,\vec\omega_o)*L_{in}(\vec\omega_i)cos(\theta)d\vec\omega_i \) Where the BRDF (Bidirectional Reflectance Distribution Function) is a function that describes the reflection properties of the given material: i.e. do we have a shiny, metallic surface or a diffuse material. Completely diffuse material (click for large version) How to solve the rendering equation An integral is a continuous quantity, which we must turn into something discrete before we can handle it on the computer. To evaluate the integral, we will use Monte Carlo sampling , which is a very simple: to provide an estimate for an integral, we will take a number of samples and use the average values of these samples multiplied by the integration interval length. \( \int_a^b f(x)dx \approx \frac{b-a}{N}\sum _{i=1}^N f(X_i) \) If we apply this to our diffuse rendering equation above, we get the following discrete summation: \( \begin{align} L_{out}(\vec\omega_o) &= \int (Albedo/\pi)*L_{in}(\vec\omega_i)cos(\theta)d\vec\omega_i \\ & = \frac{2\pi}{N}\sum_{\vec\omega_i} (\frac{Albedo}{\pi}) L_{in}(\vec\omega_i) (\vec{n} \cdot \vec\omega_i) \\ & = \frac{2 Albedo}{N}\sum_{\vec\omega_i} L_{in}(\vec\omega_i) (\vec{n} \cdot \vec\omega_i) \end{align} \) Test render (click for large version) Building a path tracer (in GLSL) Now we are able to build a simple path tracer for diffuse materials. All we need to do is to shoot rays starting from the camera, and when a ray hits a surface, we will choose a random direction in the hemisphere defined by the surface normal. We will continue with this until we hit a light source. Each time the ray changes direction, we will modulate the light intensity by the factor found above: \( 2*Color*Albedo*L_{in}(\vec\omega_i) (\vec{n} \cdot \vec\omega_i) \) The idea is to repeat this many times for each pixel, and then average the samples. This is why the sum and the division by N is no longer present in the formula. Also notice, that we have added a (material specific) color. Until now we have assumed that our materials handled all wavelengths the same way, but of course some materials absorb some wavelengths, while reflecting others. We will describe this using a three-component material color, which will modulate the light ray at each surface intersection. All of this boils down to very few lines of codes: vec3 color(vec3 from, vec3 dir) { vec3 hit = vec3(0.0); vec3 hitNormal = vec3(0.0); vec3 luminance = vec3(1.0); for (int i=0; iRayDepth; i++) { if (trace(from,dir,hit,hitNormal)) { dir = getSample(hitNormal); // new direction (towards light) luminance *= getColor()*2.0*Albedo*dot(dir,hitNormal); from = hit + hitNormal*minDist*2.0; // new start point } else { return luminance * getBackground( dir ); } } return vec3(0.0); // Ray never reached a light source } The getBackground() method simulates the light sources in a given direction (i.e. infinitely far away). As we will see below, this fits nicely together with using...