isf-fallback.js

// Fallback ISF implementation for when the main library fails to load
// This provides basic shader rendering capabilities

class FallbackISFRenderer {
  constructor(gl) {
    this.gl = gl;
    this.uniforms = {};
    this.program = null;
    this.startTime = Date.now();
    this.valid = false;
    
    console.log('Using fallback ISF renderer');
  }
  
  loadSource(source) {
    try {
      // Parse ISF metadata
      const jsonMatch = source.match(/\/\*(\{[\s\S]*?\})\*\//);
      if (jsonMatch) {
        this.metadata = JSON.parse(jsonMatch[1]);
        this.parseUniforms();
      }
      
      // Create a basic shader program
      this.createShaderProgram(source);
    } catch (error) {
      console.error('Error loading ISF source:', error);
      this.error = error.message;
    }
  }
  
  parseUniforms() {
    this.uniforms = {
      TIME: { type: 'float', value: 0 },
      RENDERSIZE: { type: 'vec2', value: [512, 512] }
    };
    
    if (this.metadata && this.metadata.INPUTS) {
      this.metadata.INPUTS.forEach(input => {
        this.uniforms[input.NAME] = {
          type: input.TYPE,
          value: input.DEFAULT || 0
        };
      });
    }
  }
  
  createShaderProgram(fragmentSource) {
    const gl = this.gl;
    
    // Basic vertex shader
    const vertexSource = `
      attribute vec2 position;
      void main() {
        gl_Position = vec4(position, 0.0, 1.0);
      }
    `;
    
    // Preprocess fragment shader
    const processedFragment = this.preprocessFragment(fragmentSource);
    
    // Create shaders
    const vertexShader = this.createShader(gl.VERTEX_SHADER, vertexSource);
    const fragmentShader = this.createShader(gl.FRAGMENT_SHADER, processedFragment);
    
    if (!vertexShader || !fragmentShader) {
      return;
    }
    
    // Create program
    this.program = gl.createProgram();
    gl.attachShader(this.program, vertexShader);
    gl.attachShader(this.program, fragmentShader);
    gl.linkProgram(this.program);
    
    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
      this.error = 'Program linking failed: ' + gl.getProgramInfoLog(this.program);
      console.error(this.error);
      return;
    }
    
    // Create vertex buffer for full screen quad
    this.createVertexBuffer();
    this.valid = true;
  }
  
  preprocessFragment(source) {
    // Remove JSON metadata
    let processed = source.replace(/\/\*\{[\s\S]*?\}\*\//, '');
    
    // Add necessary uniforms
    const uniforms = [
      'uniform float TIME;',
      'uniform vec2 RENDERSIZE;'
    ];
    
    if (this.metadata && this.metadata.INPUTS) {
      this.metadata.INPUTS.forEach(input => {
        switch (input.TYPE) {
          case 'float':
            uniforms.push(`uniform float ${input.NAME};`);
            break;
          case 'bool':
            uniforms.push(`uniform bool ${input.NAME};`);
            break;
          case 'color':
            uniforms.push(`uniform vec4 ${input.NAME};`);
            break;
        }
      });
    }
    
    // Add precision and uniform declarations
    processed = `
      precision mediump float;
      ${uniforms.join('\n')}
      
      ${processed}
    `;
    
    // Fix ISF compatibility - move isf_FragNormCoord calculation into main function
    if (processed.includes('isf_FragNormCoord')) {
      // Add the compatibility variable declaration at the start of main
      processed = processed.replace(
        'void main() {',
        'void main() {\n  vec2 isf_FragNormCoord = gl_FragCoord.xy / RENDERSIZE.xy;'
      );
    }
    
    return processed;
  }
  
  createShader(type, source) {
    const gl = this.gl;
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      const error = gl.getShaderInfoLog(shader);
      console.error('Shader compilation failed:', error);
      console.log('Shader source:', source);
      gl.deleteShader(shader);
      return null;
    }
    
    return shader;
  }
  
  createVertexBuffer() {
    const gl = this.gl;
    
    // Create vertex buffer for fullscreen quad
    this.vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
    
    const vertices = new Float32Array([
      -1, -1,
       1, -1,
      -1,  1,
       1,  1
    ]);
    
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  }
  
  setValue(name, value) {
    if (this.uniforms[name]) {
      this.uniforms[name].value = value;
    }
  }
  
  draw(canvas) {
    if (!this.valid || !this.program) {
      return;
    }
    
    const gl = this.gl;
    
    // Use our program
    gl.useProgram(this.program);
    
    // Set up vertex attributes
    const positionLocation = gl.getAttribLocation(this.program, 'position');
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    
    // Set uniforms
    Object.keys(this.uniforms).forEach(name => {
      const location = gl.getUniformLocation(this.program, name);
      if (location !== null) {
        const uniform = this.uniforms[name];
        switch (uniform.type) {
          case 'float':
            gl.uniform1f(location, uniform.value);
            break;
          case 'vec2':
            gl.uniform2fv(location, uniform.value);
            break;
          case 'bool':
            gl.uniform1i(location, uniform.value ? 1 : 0);
            break;
          case 'color':
            gl.uniform4fv(location, uniform.value);
            break;
        }
      }
    });
    
    // Draw
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }
}

// Enhanced ISF Manager that can use fallback
class EnhancedISFManager extends ISFManager {
  createISFRenderer(layer, source, canvas) {
    console.log('Creating ISF renderer for layer:', layer.id);
    
    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
    if (!gl) {
      throw new Error('WebGL not supported');
    }
    
    let ISFRendererClass = null;
    
    // Try to find the real ISF renderer first
    if (typeof window.ISFRenderer !== 'undefined') {
      ISFRendererClass = window.ISFRenderer;
    } else if (typeof ISFRenderer !== 'undefined') {
      ISFRendererClass = ISFRenderer;
    } else if (typeof window.interactiveShaderFormat !== 'undefined' && window.interactiveShaderFormat.Renderer) {
      ISFRendererClass = window.interactiveShaderFormat.Renderer;
    } else {
      // Use fallback
      console.log('Using fallback ISF renderer');
      ISFRendererClass = FallbackISFRenderer;
    }
    
    try {
      const renderer = new ISFRendererClass(gl);
      renderer.loadSource(source);
      
      // Store renderer reference
      this.renderers.set(layer.id, {
        renderer,
        canvas,
        gl,
        layer,
        startTime: Date.now()
      });
      
      console.log('ISF renderer created successfully for layer', layer.id);
      return renderer;
    } catch (error) {
      console.error('Error creating ISF renderer:', error);
      throw error;
    }
  }
}

// Export both versions
window.EnhancedISFManager = EnhancedISFManager;
if (typeof window.ISFManager === 'undefined') {
  window.ISFManager = EnhancedISFManager;
}