biomorphic-shader-expert

Generates audio-reactive GLSL ES 3.0 fragment shaders with procedural organic structures for Three.js visualizers.

Updated Jul 13, 2026
One-click install
npx skills add https://github.com/Ohmnia/site-build --skill biomorphic-shader-expert-ohmnia
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: biomorphic-shader-expert
Source: https://github.com/Ohmnia/site-build/tree/main/.opencode/skills/biomorphic-shader-expert
Command: npx skills add https://github.com/Ohmnia/site-build --skill biomorphic-shader-expert-ohmnia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing real-time audio-reactive shaders that look like living organisms rather than rigid geometric animations requires deep expertise in procedural generation, SDFs, and GPU optimization. This Skill produces production-ready WebGL2 fragment shaders that respond naturally to music while maintaining 60-144 FPS performance. ## Core Features & Use Cases - Biomorphic Shader Generation: Creates GLSL ES 3.0 fragment shaders using SDFs, domain warping, FBM, Voronoi, curl noise, and reaction-diffusion techniques to simulate jellyfish, coral, cellular colonies, and alien ecosystems. - Audio Parameter Mapping: Maps bass to structural growth and treble to bio-luminescent detail using a fixed uniform contract (uParam_* and uGene_* parameters), ensuring shaders integrate directly with the target media player. - Performance-Constrained Output: Enforces branchless math, fixed loop counts, and cheap noise approximations so shaders compile in WebGL2 and run at high frame rates. - Use Case: Ask for a deep-sea jellyfish visualizer and receive a complete, commented fragment shader where bass drives membrane inflation, treble triggers bio-luminescent pulses, and DNA parameters control mutation and flow. ## Quick Start Generate a biomorphic fragment shader of a glowing coral reef that pulses with the bass and sparkles with the treble.

Frequently Asked Questions about biomorphic-shader-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an audio-reactive GLSL shader for a music visualizer?

Map audio features to shader uniforms: use bass energy for slow structural motion like cell expansion and membrane inflation, and treble for fine detail like bio-luminescence and edge highlights. Derive all animation from u_time multiplied by a speed parameter for consistent temporal behavior.

What GLSL techniques create organic biological visuals?

Combine signed distance fields with domain warping, FBM, Voronoi and Worley noise, curl noise flow fields, and smooth minimum blending. These produce forms resembling jellyfish, coral, veins, and cellular colonies rather than rigid geometry.

Does this shader code work with ShaderToy or WebGL1?

No. The generated shaders target GLSL ES 3.0 with #version 300 es and an out vec4 fragColor output, requiring WebGL2. They do not use ShaderToy uniforms, desktop GLSL features, or extensions.

How do I keep fragment shaders running at 60 FPS or higher?

Use branchless math, fixed loop counts, cheap FBM with few octaves, and approximate Voronoi. Avoid nested raymarching, dynamic loops, excessive normalize calls, and repeated sin/cos evaluations.

Why does my procedural shader flicker or pop between frames?

Flickering comes from frame-to-frame randomness or sudden topology changes. Use continuous noise functions seeded by time, smooth blending operators, and avoid discontinuous hash-based randomness in animated parameters.