Skip to content

ISF_README.md

Latest commit

 

History

History
146 lines (112 loc) · 4.46 KB

ISF_README.md

File metadata and controls

146 lines (112 loc) · 4.46 KB

ISF (Interactive Shader Format) Implementation

This project now includes a proper implementation for loading and displaying ISF shaders based on the msfeldstein/interactive-shader-format-js library.

What's New

1. Improved ISF Manager (isf-improved.js)

  • Proper WebGL2/WebGL context handling
  • Centralized animation loop for all ISF renderers
  • Automatic TIME and RENDERSIZE uniform management
  • Metadata parsing for ISF shader parameters
  • Dynamic UI control generation

2. Example Shaders (shaders/ directory)

  • rainbow.fs - Simple animated rainbow generator
  • tapestryfract.fs - Complex fractal generator with parameters
  • badtv.fs - TV static/glitch effect (requires input image)

3. Enhanced User Interface

  • Dropdown selection for built-in and file-based shaders
  • Automatic generation of parameter controls based on ISF metadata
  • Real-time parameter adjustment with sliders, checkboxes, and color pickers

How to Use

Loading ISF Shaders

  1. Click on a layer's "Load ISF" button
  2. Select from available options:
    • Built-in test shaders (simple demos)
    • File-based shaders (from shaders/ directory)
    • "Load from file..." to browse for ISF files

ISF Shader Parameters

When you load an ISF shader that includes parameter definitions in its JSON metadata, controls will automatically appear:

  • Float parameters: Range sliders with value display
  • Boolean parameters: Checkboxes
  • Color parameters: Color pickers

Supported ISF Features

✅ Working:

  • TIME uniform (for animations)
  • RENDERSIZE uniform (canvas dimensions)
  • Custom float/bool/color parameters
  • Multiple shader instances
  • Real-time parameter adjustment

⚠️ Partially Supported:

  • Image inputs (basic support, needs improvement)
  • Multi-pass rendering (depends on shader complexity)

❌ Not Yet Implemented:

  • Audio inputs
  • Buffer/feedback effects
  • Custom vertex shaders

Technical Details

ISF Manager Architecture

The ISFManager class centralizes ISF rendering:

// Initialize the manager
const isfManager = new ISFManager();
isfManager.startAnimationLoop();

// Create a renderer for a layer
const renderer = isfManager.createISFRenderer(layer, source, canvas);

Key Improvements Over Previous Implementation

  1. Proper Library Usage: Uses ISFRenderer constructor correctly
  2. WebGL2 Context: Better texture and uniform support
  3. Centralized Rendering: Single animation loop handles all instances
  4. Metadata Parsing: Automatic UI generation from ISF JSON
  5. Error Handling: Better error reporting and fallbacks

File Structure

LESSGO/
├── index.html              # Updated with proper ISF library
├── isf-improved.js         # New ISF Manager implementation
├── app.js                  # Updated ISF integration
├── style.css               # Added ISF control styling
└── shaders/
    ├── rainbow.fs          # Simple generator example
    ├── tapestryfract.fs    # Complex fractal example
    └── badtv.fs            # Image effect example

Creating Your Own ISF Shaders

ISF shaders are GLSL fragment shaders with JSON metadata. Example structure:

/*{
    "CREDIT": "Your Name",
    "DESCRIPTION": "What your shader does",  
    "CATEGORIES": ["Generator"],
    "INPUTS": [
        {
            "NAME": "speed",
            "TYPE": "float",
            "DEFAULT": 1.0,
            "MIN": 0.0,
            "MAX": 5.0
        }
    ]
}*/

void main() {
    vec2 uv = gl_FragCoord.xy / RENDERSIZE.xy;
    float time = TIME * speed;
    vec3 color = 0.5 + 0.5 * cos(time + uv.xyx + vec3(0, 2, 4));
    gl_FragColor = vec4(color, 1.0);
}

References

Troubleshooting

ISF shaders not loading:

  • Check browser console for errors
  • Ensure ISF library loaded: typeof ISFRenderer !== 'undefined'
  • Verify WebGL support: WebGL or WebGL2 context creation

No controls appearing:

  • Check shader has proper JSON metadata
  • Verify INPUTS array in metadata
  • Look for parsing errors in console

Shaders not animating:

  • Ensure ISF Manager animation loop is running
  • Check that TIME uniform is being used in shader
  • Verify no WebGL errors are preventing rendering