advanced

#18 Morphing Shapes

Interpolating between SDFs

Since SDFs are just numbers representing distance, you can blend between two completely different shapes by interpolating their distance values with mix(sdf1, sdf2, t). As t animates from 0 to 1, one shape smoothly morphs into the other — a circle melts into a square, a triangle flows into a star. Smoothing the blend factor with a cubic curve (the hermite S-curve) makes the transition feel natural rather than linear. This technique works with any SDF shape you can define.

Key Concepts

Try this shader live in the Shader Sandbox editor with real-time preview.
Open in Sandbox

Source Code


    


    

      
        
          ← Previous
          Glow & Bloom
        
      
      
        
          Next →
          Texture Sampling
        
      
    


    

      
All Tutorials

      

        
          
            1
            Hello World
          
        
          
            2
            UV Coordinates
          
        
          
            3
            Animation
          
        
          
            4
            Shapes: Circle
          
        
          
            5
            Shapes: Rectangles
          
        
          
            6
            Patterns & Tiling
          
        
          
            7
            Smooth Functions
          
        
          
            8
            Noise
          
        
          
            9
            2D Lighting
          
        
          
            10
            Intro to Raymarching
          
        
          
            11
            Rotation & Transforms
          
        
          
            12
            Color Spaces
          
        
          
            13
            Polar Coordinates
          
        
          
            14
            Domain Repetition
          
        
          
            15
            Smooth Blending (SDF)
          
        
          
            16
            Voronoi Noise
          
        
          
            17
            Glow & Bloom
          
        
          
            18
            Morphing Shapes
          
        
          
            19
            Texture Sampling
          
        
          
            20
            Post Processing
          
        
          
            21
            Domain Warping
          
        
          
            22
            Reflections
          
        
          
            23
            Soft Shadows
          
        
          
            24
            Fog & Atmosphere
          
        
          
            25
            Mandelbrot Fractal
          
        
          
            26
            Julia Set
          
        
          
            27
            Water & Waves
          
        
          
            28
            Fire & Smoke
          
        
          
            29
            3D Domain Repetition
          
        
          
            30
            FBM Terrain