Skip to main content
100%

basic kodelife raymarch with outlines

✓ Published0🌍 Public
Aaman-tiwari
Last edited Sep 29, 2018
Created on Sep 29, 2018

A raymarched scene shows a red and blue sphere smoothly blending into a moving box, with a black outline appearing when rays pass close to the surface. The shader, written in GLSL 150 and run in Kodelife, uses signed distance functions for the sphere and box, a smooth minimum operation for the blend, and a central-difference method for surface normals. Lighting is computed from a fixed directional light, while the raymarching loop performs up to 50 steps to find surface hits or near misses.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist d5d76528348514dffd9547a2cd438944

This visualization renders a 3D raymarched scene using a single shader written in HLSL. It displays a collection of geometric primitives—planes, spheres, boxes, ellipsoids, tori, cylinders, cones, prisms, capsules, and pyramids—each defined by signed distance functions (SDFs) and composited in a shader. The code includes multiple SDF implementations with both distance-bound and correct-distance variants, demonstrating how shape intersections and subtractions are computed. The scene is rendered through a fragment shader that applies raymarching techniques, with an anti-aliasing toggle controlled by the `AA` constant.

Aandybak
67% match
Loading thumbnail…

Gist 308bcb11118691fecda084c5b1aba814

This visualization shows a raymarched 3D scene where a box and a sphere blend together, with a small protective void around the object. The shape repeats in a mirrored grid pattern that scrolls over time, driven by the `_Time.x` uniform. The code defines signed distance functions in a Unity shader file (`weirdboxes.cginc`), using custom `fBox`, `fBoxCheap`, and `pModMirror2` functions to compute the scene geometry, with a guard term that adds a thin hollow shell around the result.

Aandybak
66% match
Loading thumbnail…

Gist 9ac5da62d5cfb04afdbd9a658b9ff06a

A raymarched SDF scene animates a rotating polar-mirrored structure, alternating between a box and a sphere while a central guard region constrains the shape. The effect relies on a custom distance function in `polar.cginc`, using `pModPolar` for angular repetition, `Box` and `Sphere` primitives, and a `fBoxCheap` guard. Time-driven rotation via `_Time.x` continuously modifies the mirror angle. The rendering approach is typical of shader-based raymarching, with no external data source or JavaScript library involved.

Aandybak
63% match
Loading thumbnail…

Gist 9f1866b3965ddc7be2705538ed72f3c9

This visualization renders a raymarched shader scene in Unity, showing two intersecting spheres whose sizes and positions are modulated by a repeating sine wave. The code in `spheres.cginc` defines a distance function that combines a static sphere with a second sphere whose radius oscillates via `_SinTime`, using a smooth maximum operation to merge their shapes. The scene is generated entirely on the GPU through the shader, with no external data source, and the repeating pattern is created by applying a modulo operation to the position coordinates.

Aandybak
62% match
Loading thumbnail…

Gist 327439fea1dac34da901622a2fbe7ff8

This example renders a 3D scene of a box and a sphere using a signed distance function. The shader code defines `fBox` and `fBoxCheap` to compute box distances, while `DistanceFunction` combines a sphere, a box, and a guard region with an absolute offset. The scene is visualized by ray marching, likely through a graphics API such as OpenGL or Vulkan, as the code is written in a CGINC shader include file. The final image shows the primitive shapes intersecting, with the guard acting as a thin shell around the box’s interior.

Aandybak
62% match
Loading thumbnail…

Gist c08a235f038fea8e1aed05be87241736

This animated WebGL shader piece generates a sequence of vibrant, radial visual effects. Using fragment shaders, it computes pixel colors in real time based on normalized coordinates, time, and mouse position. The first effect creates a pulsing red-orange ring with rotating angular patterns, while the others layer polar modular repetitions, wave distortions, and sine-based color modulation to produce intricate, evolving mandala-like forms. The result is a dynamic, abstract composition with flowing shapes and shifting hues.

ZZeukkari
56% match
Loading thumbnail…

Untitled

This visualization demonstrates a first-person raycasting engine rendered on an HTML canvas using the p5.js library. It shows a top-down map view alongside a player-controlled camera that casts rays to detect wall collisions, simulating a 3D perspective effect. The code uses p5.js functions like `fill`, `rect`, `circle`, and `line` for drawing, while the WebGL-accelerated canvas handles the animation loop. The scene features a grid-based maze with red player indicators and directional lines.

Rrahulram70
56% match
Loading thumbnail…

Gist 8232daa7d3b24a25b9f7566ff1da4522

This WebGL visualization uses p5.js to render a dynamic 3D scene composed of primitive shapes, including planes, boxes, spheres, cylinders, cones, ellipsoids, and toruses. The code applies normalMaterial to map normal vectors to RGB colors, with ambient and directional lighting enhancing the depth of each geometry. Through camera positioning and rotation transformations, the shapes appear to float and spin in space. The example demonstrates p5.js’s WEBGL renderer capabilities for creating three-dimensional compositions from basic geometric primitives, highlighting the library’s built-in shape functions and material systems.

Aabonello
54% match