@stevejtrettel/shader-sandbox 0.1.0

package/templates/main.ts

@@ -0,0 +1,126 @@
+/**
+ * Shader Collection Entry Point
+ *
+ * Loads a shader from the shaders/ folder based on the SHADER_NAME env variable
+ * or URL parameter (?shader=name)
+ */
+
+import { App, createLayout, loadDemo } from '@stevejtrettel/shader-sandbox';
+import type { ShadertoyConfig, PassName } from '@stevejtrettel/shader-sandbox';
+import type { RecompileResult } from '@stevejtrettel/shader-sandbox';
+
+// Get shader name from env (set by dev script) or URL param
+function getShaderName(): string {
+  // Check URL parameter first
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlShader = urlParams.get('shader');
+  if (urlShader) return urlShader;
+
+  // Fall back to env variable (set by vite define)
+  // @ts-ignore
+  return typeof __SHADER_NAME__ !== 'undefined' ? __SHADER_NAME__ : 'example-gradient';
+}
+
+async function main() {
+  try {
+    const shaderName = getShaderName();
+    console.log(`Loading shader: ${shaderName}`);
+
+    // Load shaders using Vite's import.meta.glob
+    const glslFiles = import.meta.glob<string>('./shaders/**/*.glsl', {
+      query: '?raw',
+      import: 'default',
+    });
+
+    const jsonFiles = import.meta.glob<ShadertoyConfig>('./shaders/**/*.json', {
+      import: 'default',
+    });
+
+    const imageFiles = import.meta.glob<string>('./shaders/**/*.{jpg,jpeg,png,gif,webp,bmp}', {
+      query: '?url',
+      import: 'default',
+    });
+
+    // Load the specific shader project
+    const project = await loadDemo(`shaders/${shaderName}`, glslFiles, jsonFiles, imageFiles);
+
+    console.log(`Loaded project: ${project.meta.title}`);
+
+    // Get root container
+    const rootContainer = document.getElementById('app');
+    if (!rootContainer) {
+      throw new Error('Container element #app not found');
+    }
+
+    // Create layout
+    const layout = createLayout(project.layout, {
+      container: rootContainer,
+      project,
+    });
+
+    // Get canvas container from layout
+    const canvasContainer = layout.getCanvasContainer();
+
+    // Create app
+    const app = new App({
+      container: canvasContainer,
+      project,
+      pixelRatio: window.devicePixelRatio,
+    });
+
+    // Wire up recompile handler for live editing
+    if (layout.setRecompileHandler) {
+      layout.setRecompileHandler((passName: 'common' | PassName, newSource: string): RecompileResult => {
+        const engine = app.getEngine();
+        if (!engine) {
+          return { success: false, error: 'Engine not initialized' };
+        }
+
+        if (passName === 'common') {
+          const result = engine.recompileCommon(newSource);
+          if (result.success) {
+            return { success: true };
+          } else {
+            const firstError = result.errors[0];
+            return {
+              success: false,
+              error: firstError ? `${firstError.passName}: ${firstError.error}` : 'Unknown error',
+            };
+          }
+        } else {
+          return engine.recompilePass(passName, newSource);
+        }
+      });
+    }
+
+    // Start if no errors
+    if (!app.hasErrors()) {
+      app.start();
+      console.log('Shader started!');
+    } else {
+      console.warn('Not started due to shader compilation errors');
+    }
+
+    // Expose for debugging
+    (window as any).app = app;
+
+  } catch (error) {
+    console.error('Failed to initialize:', error);
+    const container = document.getElementById('app');
+    if (container) {
+      container.innerHTML = `
+        <div style="color: red; padding: 20px; font-family: monospace;">
+          <h2>Error</h2>
+          <pre>${error instanceof Error ? error.message : String(error)}</pre>
+        </div>
+      `;
+    }
+  }
+}
+
+// Start when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', main);
+} else {
+  main();
+}

package/templates/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "my-shader-collection",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "list": "shader list"
+  },
+  "dependencies": {
+    "@stevejtrettel/shader-sandbox": "^0.1.0",
+    "vite": "^5.0.0"
+  }
+}

package/templates/shaders/example-buffer/bufferA.glsl

@@ -0,0 +1,14 @@
+void mainImage(out vec4 fragColor, in vec2 fragCoord)
+{
+    vec2 uv = fragCoord / iResolution.xy;
+    vec4 prev = texelFetch(iChannel0, ivec2(fragCoord), 0);
+
+    // Animated pattern
+    float t = iTime;
+    vec3 col = 0.5 + 0.5 * cos(t + uv.xyx * 3.0 + vec3(0, 2, 4));
+
+    // Trail effect
+    col = mix(prev.rgb, col, 0.05);
+
+    fragColor = vec4(col, 1.0);
+}

package/templates/shaders/example-buffer/config.json

@@ -0,0 +1,10 @@
+{
+  "layout": "default",
+  "controls": true,
+  "Image": {
+    "iChannel0": "BufferA"
+  },
+  "BufferA": {
+    "iChannel0": "BufferA"
+  }
+}

package/templates/shaders/example-buffer/image.glsl

@@ -0,0 +1,5 @@
+void mainImage(out vec4 fragColor, in vec2 fragCoord)
+{
+    vec4 data = texelFetch(iChannel0, ivec2(fragCoord), 0);
+    fragColor = vec4(data.rgb, 1.0);
+}

package/templates/shaders/example-gradient/config.json

@@ -0,0 +1,4 @@
+{
+  "layout": "default",
+  "controls": true
+}

package/templates/shaders/example-gradient/image.glsl

@@ -0,0 +1,7 @@
+void mainImage(out vec4 fragColor, in vec2 fragCoord)
+{
+    vec2 uv = fragCoord / iResolution.xy;
+    float t = iTime * 0.5;
+    vec3 col = 0.5 + 0.5 * cos(t + uv.xyx + vec3(0, 2, 4));
+    fragColor = vec4(col, 1.0);
+}

package/templates/vite.config.js

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+
+// Get shader name from command line args or env
+const shaderName = process.env.SHADER_NAME || 'example-gradient';
+
+export default defineConfig({
+  plugins: [
+    cssInjectedByJsPlugin(),
+  ],
+  base: './',
+  define: {
+    __SHADER_NAME__: JSON.stringify(shaderName),
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+  build: {
+    outDir: `dist/${shaderName}`,
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+        entryFileNames: 'assets/main.js',
+        assetFileNames: (assetInfo) => {
+          const name = assetInfo.name || '';
+          if (/\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(name)) {
+            return 'assets/[name][extname]';
+          }
+          return 'assets/[name]-[hash][extname]';
+        },
+      },
+    },
+  },
+});