Utilities/Function

  • 04boilerplateFree
  • 02color
  • 01noise
  • 12postprocessing
  • 06patterns
  • 03distortion
  • 02sdf
  • 06function
  • 04interactivityNew

Enroll in Fragments ↵

Utilities to kickstart your creative coding projects.

    function6

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
Sketches142Writing27

Fragments

Learn creative coding with shaders. For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Loading...

2025 Phobon

phobon.io↗Shadercraft↗

Pages

Home↗Techniques↗Utilities↗Breakdowns↗Sketches↗Writing↗

Contact

X @thenoumenon↗hey@fragments.supply↗OKAY DEV @phobon↗
All rights reserved.
utilities/screen-aspect-uv.webp

Screen Aspect UV

TSL function that adjusts UV coordinates for screen aspect ratio. Fixes distortion in shaders with one function call.

r3f
vanilla
utilities/repeating-pattern.webp

Repeating Pattern

Create seamless, infinitely repeating patterns with domain repetition. TSL function for tiling textures in shaders.

r3f
vanilla
utilities/bloom.webp

Bloom

Bloom effect creating glowing halos around bright areas. Post-processing function for luminous highlights in shaders.

r3f
vanilla
utilities/bloom-edge-pattern.webp

Bloom Edge Pattern

TSL function for glowing edge patterns and bloomed outlines. Add luminous effects to your shaders instantly.

r3f
vanilla
utilities/tonemapping.webp

Domain Index

Calculate domain indices for pattern repetition. Create unique variations across repeated instances in shaders.

r3f
vanilla
utilities/code-window.webp

Coordinate Functions

Convert between Cartesian and polar coordinates in TSL. Essential for radial patterns and circular effects.

r3f
vanilla

Be the first to know what's next