Welcome to 8tyOne

Shadertoy Integration

2 5 2 5
0 8 0 8
1 2 1 2
0 0 0 c

Thanks to GROK and ChatGP I finally figured out how to use SDF code examples from Shadertoy on my website. As a demonstrator I took a hopping, bunny-like yellow character from the Shadertoy page and integrated. With the help of GROK, I replaced the static camera with an interactive one. The OrbitControls now allow the view to change when the mouse button is held and the mouse is moved (based on a dummy perspective camera for the controls, while the shader itself uses an orthographic camera). I kept the original camera logic but combined it with user interaction.

Change Log

[ 2025 | 08 | 12 ]

  • Successful Integration
  • Orbit Controls + Zoom Function enabled

Demonstrator

The jumping yallow creature, terrain, and candy shapes are all built from SDF primitives combined into a single distance field, then rendered with raymarching.

What is an SDF?

A Signed Distance Field is a function that tells you how far a point in space is from the surface of an object. The sign indicates inside vs. outside:

  • Negative → inside the object.
  • Zero → exactly on the surface.
  • Positive → outside the object.

Key Advantages

  • Compact math-based scene description.
  • Smooth blending of shapes.
  • Infinite resolution (no meshes, no polygons).
Just a happy yellow creature