feat: refactor shaders to support @content with canvas element

Author: yuanchuan

src/component.js

@@ -469,18 +469,32 @@ if (typeof HTMLElement !== 'undefined') {
       const set_shader_prop = v => {
         element.style.setProperty('background', 'url("' + v + '") no-repeat 50%/cover');
       }
-
       const tick = ([v, animated]) => {
-        if (animated) {
-          this.animations.push(create_animation(t => {
-            set_shader_prop(v(t, width, height, images));
-          }));
+        if (target.type === 'content') {
+          let canvas = v(0, width, height, images);
+          element.replaceChildren(canvas);
+          if (animated) {
+            this.animations.push(create_animation(t => {
+              v(t, width, height, images);
+            }));
+          } else {
+            let render = this.shader_renders.get(target.selector);
+            if (!this.shader_renders.has(target.selector)) {
+              this.shader_renders.set(target.selector, v);
+            }
+          }
         } else {
-          let render = this.shader_renders.get(target.selector);
-          if (!this.shader_renders.has(target.selector)) {
-            this.shader_renders.set(target.selector, v);
+          if (animated) {
+            this.animations.push(create_animation(t => {
+              set_shader_prop(v(t, width, height, images).toDataURL());
+            }));
+          } else {
+            let render = this.shader_renders.get(target.selector);
+            if (!this.shader_renders.has(target.selector)) {
+              this.shader_renders.set(target.selector, v);
+            }
+            set_shader_prop(v(0, width, height, images).toDataURL());
           }
-          set_shader_prop(v(0, width, height, images));
         }
       }
 
@@ -498,7 +512,7 @@ if (typeof HTMLElement !== 'undefined') {
         })).then(fn);
       }
 
-      if (!this.observers.has(target)) {
+      if (!this.observers.has(target.selector)) {
         let observer = new ResizeObserver(() => {
           let rect = element.getBoundingClientRect();
           width = rect.width;
@@ -511,7 +525,7 @@ if (typeof HTMLElement !== 'undefined') {
             images = result;
             let render = this.shader_renders.get(target.selector);
             if (render) {
-              set_shader_prop(render(0, width, height, images));
+              set_shader_prop(render(0, width, height, images).toDataURL());
             }
           });
         });
@@ -640,11 +654,12 @@ if (typeof HTMLElement !== 'undefined') {
 
     build_grid(compiled, grid) {
       const { has_transition, has_animation } = compiled.props;
-      let has_delay = (has_transition || has_animation);
       const { uniforms, content, styles } = compiled;
+      let has_delay = (has_transition || has_animation);
+      let has_content = Object.keys(content).length;
       this.doodle.innerHTML = `
         <style>${get_basic_styles(grid) + styles.main}</style>
-        ${(styles.cells || styles.container || Object.keys(content).length) ? create_grid(grid, compiled) : ''}
+        ${(styles.cells || styles.container || has_content) ? create_grid(grid, compiled) : ''}
       `;
       if (has_delay) {
         this.reflow();
@@ -654,7 +669,9 @@ if (typeof HTMLElement !== 'undefined') {
         get_basic_styles(grid) +
         styles.all
       ));
-
+      if (has_content) {
+        replace(Object.values(compiled.content).join(' '));
+      }
       this.bind_uniforms(uniforms);
     }
 
@@ -789,7 +806,7 @@ function get_basic_styles(grid) {
     svg {
       position: absolute;
     }
-    grid, svg {
+    grid, svg, canvas {
       width: 100%;
       height: 100%
     }
@@ -798,8 +815,11 @@ function get_basic_styles(grid) {
 
 function create_cell(x, y, z, content, child = '') {
   let id = cell_id(x, y, z);
-  let head = content['#' + id] ?? '';
   let tail = child ?? '';
+  let head = content['#' + id] ?? '';
+  if (head.startsWith('${shader')) {
+    head = '';
+  }
   return `<cell id="${id}" part="cell">${head}${tail}</cell>`;
 }
 

src/generator/css.js

@@ -237,14 +237,12 @@ class Rules {
     };
     if (selector && selector.property === '@content') {
       target.type = 'content';
-    }
-    if (selector && selector.property === '@grid') {
+    } else if (selector && selector.property === '@grid') {
       target.selector = ':host';
-    }
-    if (is_special_selector(selector)) {
+    } else if (is_special_selector(selector)) {
       target.selector = selector;
     }
-    if (!selector) {
+    if (target.selector === 'cell') {
       target.selector = cell_selector;
     }
     return target;

src/generator/shaders.js

@@ -1,4 +1,3 @@
-import { cache } from '../cache.js';
 import { hash } from '../utils/index.js';
 
 const DEFAULT_VERTEX_SHADER = `#version 300 es
@@ -8,6 +7,8 @@ const DEFAULT_VERTEX_SHADER = `#version 300 es
   }
 `;
 
+const SCREEN_QUAD_VERTICES = [-1, -1, -1, 1, 1, -1, 1, 1, -1, 1, 1, -1];
+
 function create_shader(gl, type, source) {
   const shader = gl.createShader(type);
   gl.shaderSource(shader, source);
@@ -31,6 +32,8 @@ function create_program(gl, vss, fss) {
     gl.deleteProgram(prog);
   }
 
+  gl.detachShader(prog, vs);
+  gl.detachShader(prog, fs);
   gl.deleteShader(vs);
   gl.deleteShader(fs);
 
@@ -73,11 +76,6 @@ function load_texture(gl, image, i) {
 }
 
 export default function draw_shader(shaders, seed) {
-  const result = cache.get(shaders);
-  if (result) {
-    return Promise.resolve(result);
-  }
-
   const canvas = document.createElement('canvas');
   const ratio = devicePixelRatio || 1;
 
@@ -124,8 +122,7 @@ export default function draw_shader(shaders, seed) {
   const positionAttributeLocation = gl.getAttribLocation(program, 'position');
   const positionBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-  const vertices = [-1, -1, -1, 1, 1, -1, 1, 1, -1, 1, 1, -1];
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(SCREEN_QUAD_VERTICES), gl.STATIC_DRAW);
   gl.enableVertexAttribArray(positionAttributeLocation);
   gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
 
@@ -156,7 +153,7 @@ export default function draw_shader(shaders, seed) {
   let frame_index = 0;
   let current_time = 0;
 
-  return Promise.resolve(cache.set(shaders, [(t, w, h, textures) => {
+  const render = (t, w, h, textures) => {
     gl.clear(gl.COLOR_BUFFER_BIT);
     if (shaders.width !== w || shaders.height !== h) {
       textures.forEach((n, i) => {
@@ -178,6 +175,7 @@ export default function draw_shader(shaders, seed) {
       current_time = t;
     }
     gl.drawArrays(gl.TRIANGLES, 0, 6);
-    return canvas.toDataURL();
-  }, is_animated]));
+    return canvas;
+  }
+  return Promise.resolve([render, is_animated]);
 }