Iterate on shader editor

bfollington · bfollington · commit 78720f083e8f · 2025-01-06T14:50:11.000+10:00
diff --git a/typescript/packages/lookslike-high-level/src/components/shader-layer.ts b/typescript/packages/lookslike-high-level/src/components/shader-layer.ts
@@ -17,6 +17,7 @@ export class ShaderLayer extends LitElement {
   private animationFrame?: number;
   private startTime = performance.now();
   private vertexShader?: WebGLShader;
+  private errorMessage: string | null = null;
 
   static override styles = css`
     :host {
@@ -37,38 +38,83 @@ export class ShaderLayer extends LitElement {
       left: 0;
       mix-blend-mode: var(--blend-mode, default);
     }
+    .error {
+      color: red;
+      padding: 20px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: rgba(0,0,0,0.8);
+    }
   `;
 
+  private cleanup() {
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = undefined;
+    }
+
+    if (this.gl) {
+      if (this.program) {
+        this.gl.deleteProgram(this.program);
+        this.program = undefined;
+      }
+      if (this.vertexShader) {
+        this.gl.deleteShader(this.vertexShader);
+        this.vertexShader = undefined;
+      }
+      this.gl = undefined;
+    }
+
+    this.timeLocation = undefined;
+    this.resolutionLocation = undefined;
+    this.errorMessage = null;
+  }
+
   private setupWebGL() {
+    this.cleanup();
+
     const canvas = this.canvasRef.value;
     if (!canvas) return;
 
     canvas.width = this.width;
     canvas.height = this.height;
     canvas.style.setProperty('--blend-mode', this.blendMode);
 
-    this.gl = canvas.getContext('webgl', {
+    const gl = canvas.getContext('webgl', {
       alpha: true,
       premultipliedAlpha: false
-    })!;
-    if (!this.gl) return;
+    });
+    if (!gl) {
+      this.errorMessage = "WebGL not supported";
+      return;
+    }
+    this.gl = gl;
 
-    // Enable blending for transparency
-    this.gl.enable(this.gl.BLEND);
-    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
-    this.vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
-    if (!this.vertexShader) return;
+    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    if (!vertexShader) {
+      this.errorMessage = "Failed to create vertex shader";
+      return;
+    }
+    this.vertexShader = vertexShader;
 
-    this.gl.shaderSource(this.vertexShader, `
+    gl.shaderSource(vertexShader, `
       attribute vec2 position;
       varying vec2 v_texCoord;
       void main() {
         v_texCoord = (position + 1.0) * 0.5;
         gl_Position = vec4(position, 0.0, 1.0);
       }
     `);
-    this.gl.compileShader(this.vertexShader);
+    gl.compileShader(vertexShader);
+
+    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+      this.errorMessage = `Vertex shader error: ${gl.getShaderInfoLog(vertexShader)}`;
+      return;
+    }
 
     const positions = new Float32Array([
       -1, -1,
@@ -78,53 +124,62 @@ export class ShaderLayer extends LitElement {
       1, -1,
       1, 1
     ]);
-    const positionBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
 
     this.initShaderProgram();
   }
 
   private initShaderProgram() {
     if (!this.gl || !this.vertexShader || !this.shader) return;
+    const gl = this.gl;
 
-    // Clean up existing program
-    if (this.program) {
-      this.gl.deleteProgram(this.program);
+    const program = gl.createProgram();
+    if (!program) {
+      this.errorMessage = "Failed to create program";
+      return;
     }
 
-    this.program = this.gl.createProgram();
-    if (!this.program) return;
-
-    const fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
-    if (!fragmentShader) return;
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    if (!fragmentShader) {
+      this.errorMessage = "Failed to create fragment shader";
+      return;
+    }
 
-    this.gl.shaderSource(fragmentShader, this.shader);
-    this.gl.compileShader(fragmentShader);
+    gl.shaderSource(fragmentShader, this.shader);
+    gl.compileShader(fragmentShader);
 
-    if (!this.gl.getShaderParameter(fragmentShader, this.gl.COMPILE_STATUS)) {
-      console.error('Fragment shader compilation error:', this.gl.getShaderInfoLog(fragmentShader));
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+      this.errorMessage = `Fragment shader error: ${gl.getShaderInfoLog(fragmentShader)}`;
+      gl.deleteShader(fragmentShader);
       return;
     }
 
-    this.gl.attachShader(this.program, this.vertexShader);
-    this.gl.attachShader(this.program, fragmentShader);
-    this.gl.linkProgram(this.program);
+    gl.attachShader(program, this.vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
 
-    if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
-      console.error('Program linking error:', this.gl.getProgramInfoLog(this.program));
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      this.errorMessage = `Program linking error: ${gl.getProgramInfoLog(program)}`;
+      gl.deleteShader(fragmentShader);
+      gl.deleteProgram(program);
       return;
     }
 
-    const positionLocation = this.gl.getAttribLocation(this.program, "position");
-    this.gl.enableVertexAttribArray(positionLocation);
-    this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 0, 0);
+    this.program = program;
+
+    const positionLocation = gl.getAttribLocation(program, "position");
+    gl.enableVertexAttribArray(positionLocation);
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
 
-    this.timeLocation = this.gl.getUniformLocation(this.program, "iTime");
-    this.resolutionLocation = this.gl.getUniformLocation(this.program, "iResolution");
+    this.timeLocation = gl.getUniformLocation(program, "iTime");
+    this.resolutionLocation = gl.getUniformLocation(program, "iResolution");
 
-    // Clean up fragment shader
-    this.gl.deleteShader(fragmentShader);
+    gl.deleteShader(fragmentShader);
+
+    this.startTime = performance.now();
+    this.renderGl();
   }
 
   private renderGl() {
@@ -149,32 +204,27 @@ export class ShaderLayer extends LitElement {
   }
 
   override updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('shader')) {
-      this.initShaderProgram();
+    if (changedProperties.has('shader') ||
+        changedProperties.has('width') ||
+        changedProperties.has('height') ||
+        changedProperties.has('blendMode')) {
+      this.setupWebGL();
     }
   }
 
   override firstUpdated() {
     this.setupWebGL();
-    this.renderGl();
   }
 
   override disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.animationFrame) {
-      cancelAnimationFrame(this.animationFrame);
-    }
-    if (this.gl && this.program) {
-      this.gl.deleteProgram(this.program);
-    }
-    if (this.gl && this.vertexShader) {
-      this.gl.deleteShader(this.vertexShader);
-    }
+    this.cleanup();
   }
 
   override render() {
     return html`
       <canvas ${ref(this.canvasRef)}></canvas>
+      ${this.errorMessage ? html`<div class="error">${this.errorMessage}</div>` : null}
     `;
   }
 }
diff --git a/typescript/packages/lookslike-high-level/src/spells/20_shader_editor.tsx b/typescript/packages/lookslike-high-level/src/spells/20_shader_editor.tsx
@@ -54,7 +54,8 @@ const Shader = z.object({
 const ShaderEditor = z.object({
   editingShader: Ref.describe("The shader currently being edited"),
   shaders: z.array(Shader).describe("All shaders in the system"),
-  '~/common/ui/shader-list': UiFragment.describe("The UI fragment for the shaders list")
+  '~/common/ui/shader-list': UiFragment.describe("The UI fragment for the shaders list"),
+  '~/common/ui/navigation': UiFragment.describe("The UI fragment for navigation")
 });
 
 const SourceModificationPrompt = z.object({
@@ -73,18 +74,21 @@ type EditEvent = {
 const shaderEditor = typedBehavior(Shader, {
   render: ({ self, name, sourceCode, notes }) => (
     <div entity={self}>
-      <common-form
-        schema={Shader}
-        value={{ name, sourceCode: sourceCode || SHADER_TEMPLATE, notes }}
-        onsubmit="~/on/save"
-      />
-      <h4>Modify with AI</h4>
-      <common-form
-        schema={SourceModificationPrompt}
-        value={{ sourceId: self }}
-        reset
-        onsubmit="~/on/modify-with-ai"
-      />
+      <details>
+        <summary>Edit</summary>
+        <common-form
+          schema={Shader}
+          value={{ name, sourceCode: sourceCode || SHADER_TEMPLATE, notes }}
+          onsubmit="~/on/save"
+        />
+        <h4>Modify with AI</h4>
+        <common-form
+          schema={SourceModificationPrompt}
+          value={{ sourceId: self }}
+          reset
+          onsubmit="~/on/modify-with-ai"
+        />
+      </details>
       <div style="position: relative; width: 500px; height: 500px;">
         <shader-layer
           width={500}
@@ -147,9 +151,11 @@ const shaderEditor = typedBehavior(Shader, {
 export const shaderManager = typedBehavior(
   ShaderEditor.pick({
     editingShader: true,
-    '~/common/ui/shader-list': true
+    shaders: true,
+    '~/common/ui/shader-list': true,
+    '~/common/ui/navigation': true
   }), {
-  render: ({ self, editingShader, '~/common/ui/shader-list': shaderList }) => (
+  render: ({ self, editingShader, '~/common/ui/shader-list': shaderList, '~/common/ui/navigation': navigation }) => (
     <div entity={self}>
       <div>
         <details>
@@ -168,6 +174,7 @@ export const shaderManager = typedBehavior(
           <h3>Edit Shader</h3>
           <button onclick="~/on/close-shader-editor">Close</button>
           <Charm self={editingShader} spell={shaderEditor as any} />
+          {subview(navigation)}
         </div>
       )}
 
@@ -214,6 +221,49 @@ export const shaderManager = typedBehavior(
         }]
       }).commit(),
 
+    renderNavigation: resolve(ShaderEditor.pick({ shaders: true, editingShader: true }))
+      .update(({ self, shaders, editingShader }) => {
+        const currentIndex = shaders.findIndex(s => (s as any).self.toString() === editingShader?.toString());
+        const shader = shaders[currentIndex];
+        if (!shader) return [];
+
+        return [{
+          Upsert: [self, '~/common/ui/navigation',
+            <div style="display: flex; align-items: center; gap: 1rem; margin: 1rem 0;">
+              <button
+                onclick={`~/on/prev-shader`}
+                disabled={currentIndex === 0}
+              >Previous</button>
+              <span>{shader.name}</span>
+              <button
+                onclick={`~/on/next-shader`}
+                disabled={currentIndex === shaders.length - 1}
+              >Next</button>
+            </div> as any
+          ]
+        }]
+      }).commit(),
+
+    onPrevShader:
+      resolve(ShaderEditor.pick({ editingShader: true, shaders: true }))
+        .with(event("~/on/prev-shader"))
+        .transact(({ self, shaders, editingShader }, cmd) => {
+          const currentIndex = shaders.findIndex(s => (s as any).self.toString() === editingShader?.toString());
+          if (currentIndex > 0) {
+            cmd.add(...Transact.set(self, { editingShader: (shaders[currentIndex - 1] as any).self }));
+          }
+        }),
+
+    onNextShader:
+      resolve(ShaderEditor.pick({ editingShader: true, shaders: true }))
+        .with(event("~/on/next-shader"))
+        .transact(({ self, shaders, editingShader }, cmd) => {
+          const currentIndex = shaders.findIndex(s => (s as any).self.toString() === editingShader?.toString());
+          if (currentIndex < shaders.length - 1) {
+            cmd.add(...Transact.set(self, { editingShader: (shaders[currentIndex + 1] as any).self }));
+          }
+        }),
+
     onDeleteShader: event("~/on/delete-shader")
       .transact(({ self, event }, cmd) => {
         const ev = Session.resolve<EditEvent>(event);
diff --git a/typescript/packages/lookslike-high-level/src/spells/spell.tsx b/typescript/packages/lookslike-high-level/src/spells/spell.tsx
@@ -137,12 +137,15 @@ export function Charm<T extends Record<string, Rule<Selector>>>({
   self: Reference;
 }) {
   return (
-    <common-charm
-      id={self.toString()}
-      key={self.toString()}
-      spell={() => spell}
-      entity={() => self}
-    />
+    <div>
+      {/* stupid workaround because keyed nodes only work all nodes are keyed within a parent... we should fix our JSX bindings */}
+      <common-charm
+        id={self.toString()}
+        key={self.toString()}
+        spell={() => spell}
+        entity={() => self}
+      />
+    </div>
   );
 }
 
