isf-test.html

<!DOCTYPE html>
<html>
<head>
    <title>ISF Loading Test</title>
</head>
<body>
    <h1>ISF Loading Test</h1>
    <div id="status">Loading...</div>
    <canvas id="testCanvas" width="300" height="200" style="border: 1px solid white; background: black;"></canvas>
    <br><br>
    <button id="testButton">Test Simple Red Shader</button>

    <!-- ISF Library Loading Strategy -->
    <script>
    // Try loading ISF library from multiple sources
    async function loadISFLibrary() {
        const sources = [
            'https://unpkg.com/interactive-shader-format@1.1.0/dist/build.js',
            'https://cdn.jsdelivr.net/npm/interactive-shader-format@1.1.0/dist/build.js',
            'https://raw.githubusercontent.com/msfeldstein/interactive-shader-format-js/master/dist/build.js'
        ];
        
        for (const src of sources) {
            try {
                console.log('Trying to load ISF from:', src);
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = src;
                    script.onload = () => {
                        console.log('ISF library loaded from:', src);
                        // Check what was actually loaded
                        console.log('Available after load:', {
                            ISFRenderer: typeof ISFRenderer,
                            'window.ISFRenderer': typeof window.ISFRenderer,
                            'interactiveShaderFormat': typeof interactiveShaderFormat,
                            'window.interactiveShaderFormat': typeof window.interactiveShaderFormat
                        });
                        
                        // Try to make ISFRenderer globally available
                        if (typeof ISFRenderer !== 'undefined') {
                            window.ISFRenderer = ISFRenderer;
                        } else if (typeof interactiveShaderFormat !== 'undefined' && interactiveShaderFormat.Renderer) {
                            window.ISFRenderer = interactiveShaderFormat.Renderer;
                        }
                        
                        resolve();
                    };
                    script.onerror = () => reject(new Error(`Failed to load ${src}`));
                    document.head.appendChild(script);
                });
                break; // If we get here, loading succeeded
            } catch (error) {
                console.log('Failed to load from', src, ':', error.message);
            }
        }
    }
    
    // Start loading immediately
    loadISFLibrary().then(() => {
        document.getElementById('status').innerHTML = 'ISF Library loaded successfully!<br>' +
            'ISFRenderer available: ' + (typeof window.ISFRenderer !== 'undefined') + '<br>' +
            'Library type: ' + (typeof window.ISFRenderer);
    });
    
    // Simple test shader
    const testShader = `/*{
        "CREDIT": "Simple Test",
        "DESCRIPTION": "Basic red shader for testing", 
        "CATEGORIES": ["Generator"],
        "INPUTS": []
    }*/
    
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }`;
    
    // Test function
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('testButton').addEventListener('click', () => {
            console.log('Testing ISF renderer...');
            
            const canvas = document.getElementById('testCanvas');
            const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
            
            if (!gl) {
                console.error('WebGL not supported');
                return;
            }
            
            if (typeof window.ISFRenderer !== 'undefined') {
                try {
                    const renderer = new window.ISFRenderer(gl);
                    renderer.loadSource(testShader);
                    console.log('ISF renderer created successfully');
                    
                    // Simple render loop
                    function render() {
                        gl.viewport(0, 0, canvas.width, canvas.height);
                        renderer.draw(canvas);
                        requestAnimationFrame(render);
                    }
                    render();
                    
                } catch (error) {
                    console.error('Error creating ISF renderer:', error);
                }
            } else {
                console.error('ISFRenderer not available');
                document.getElementById('status').innerHTML += '<br><span style="color: red;">ISFRenderer not available for testing</span>';
            }
        });
    });
    </script>
</body>
</html>