From 68e54df51bfe7ef97b08092f36dae9eb8db4245c Mon Sep 17 00:00:00 2001
From: Gyuri Horak <dyuri@horak.hu>
Date: Thu, 16 Feb 2023 19:42:33 +0100
Subject: [PATCH] snippet loading

---
 demo/index.html    | 34 +++++++++++++++++++++++---
 src/repa-shader.js | 61 ++++++++++++++++++++++++++++++++++------------
 2 files changed, 75 insertions(+), 20 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 779025f..b233c37 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -22,14 +22,40 @@
   </style>
 </head>
 <body>
-  <repa-shader fs-input="fsinput" alpha mouse snippet-prefix="../src/snippets">
-<script type="x-shader/x-vertex">
-attribute vec3 position;
+  <repa-shader fs-input="fsinput" alpha mouse snippets="noise.glsl" width=512 height=512>
+<script type="x-shader/x-fragmen">
 void main() {
-  gl_Position = vec4(position, 1.0);
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec3 col = .5 + .5 * cos(uv.xyx + time + vec3(0, 2, 4));
+
+  float dist = distance(uv, mouse);
+  float circle = smoothstep(.1, .2, dist) * .5 + .5;
+  vec4 acolor = vec4(col * circle, circle);
+  outColor = vec4(acolor);
 }
 </script>
 <script type="x-shader/x-fragment">
+void main() {
+  vec2 n,N,q,p=FC.xy/r.y;
+  float S=9.,a,j;
+  for(mat2 m=rotate2D(5.);j++<30.;){
+    p*=m;
+    n*=m;
+    q=p*S+j+n+t;
+    a+=dot(cos(q)/S,r/r);
+    n+=q=sin(q);
+    N+=q/(S+60.);
+    S*=1.2;
+  }
+  o+=pow(max(o-o,(a+.5)*.1*vec4(6,1,2,0)+.003/length(N)),o-o+.45);
+}
+</script>
+<script type="x-shader/x-fragmen">
+precision highp float;
+uniform vec2 resolution;
+uniform vec2 mouse;
+uniform float time;
+out vec4 outColor;
 void main() {
   vec2 uv = gl_FragCoord.xy / resolution.xy;
   vec3 col = .5 + .5 * cos(uv.xyx + time + vec3(0, 2, 4));
diff --git a/src/repa-shader.js b/src/repa-shader.js
index ba286e5..32c2438 100644
--- a/src/repa-shader.js
+++ b/src/repa-shader.js
@@ -49,9 +49,8 @@ void main() {
 `;
 
 class RepaShader extends HTMLElement {
-  constructor(cfg = {}) {
+  constructor() {
     super();
-    this._cfg = cfg;
     this.attachShadow({ mode: 'open' });
     this.logger = createLogger(["%c[repa-shader]", "background: #1d2021; color: #bada55"]);
     this._snippets = {};
@@ -65,7 +64,7 @@ class RepaShader extends HTMLElement {
     }
 
     if (!this._gl) {
-      const glopts = this._cfg.glopts || {alpha: this.hasAttribute('alpha'), preserveDrawingBuffer: true};
+      const glopts = {alpha: this.hasAttribute('alpha'), preserveDrawingBuffer: true};
       this._gl = this._target.getContext('webgl2', glopts);
       if (!this._gl) {
         this.logger.error("WebGL2 not supported");
@@ -74,8 +73,6 @@ class RepaShader extends HTMLElement {
     }
 
     // TODO resize
-    // TODO postprogram
-    // TODO source + reset
 
     this._gl.bindBuffer(this._gl.ARRAY_BUFFER, this._gl.createBuffer());
     this._gl.bufferData(this._gl.ARRAY_BUFFER, new Float32Array([-1,1,0,-1,-1,0,1,1,0,1,-1,0]), this._gl.STATIC_DRAW);
@@ -84,7 +81,6 @@ class RepaShader extends HTMLElement {
     this._gl.disable(this._gl.BLEND);
     this._gl.clearColor(0,0,0,1);
 
-    // TODO remove
     this.render(this.getFragmentShaderSource());
   }
 
@@ -97,7 +93,18 @@ class RepaShader extends HTMLElement {
   }
 
   get snippetPrefix() {
-    return this.getAttribute('snippet-prefix') || 'snippets';
+    if (this.hasAttribute('snippet-prefix')) {
+      return this.getAttribute('snippet-prefix');
+    }
+
+    let path = '';
+    if (import.meta?.url) {
+      const pathparts = new URL(import.meta.url).pathname.split('/');
+      pathparts.pop();
+      path = pathparts.join('/');
+    }
+
+    return path + '/snippets';
   }
 
   async loadSnippet(name) {
@@ -123,11 +130,21 @@ class RepaShader extends HTMLElement {
     return this._snippets[name];
   }
 
+  async _getSnippets() {
+    if (!this.hasAttribute('snippets')) {
+      return '';
+    }
+
+    const snippetNames = this.getAttribute('snippets').split(',');
+    const promises = snippetNames.map(s => this.getSnippet(s));
+
+    return await Promise.all(promises).then(snippets => snippets.join('\n'));
+  }
+
   _resizeTarget() {
     const {width, height} = this._target.getBoundingClientRect();
     this._target.width = width;
     this._target.height = height;
-    // TODO buffers
     this._gl.viewport(0, 0, width, height);
   }
 
@@ -169,7 +186,6 @@ class RepaShader extends HTMLElement {
       return;
     }
 
-    // TODO geek mode
     const resolution = 'resolution';
     const mouse = 'mouse';
     const nowTime = 'time';
@@ -209,7 +225,6 @@ class RepaShader extends HTMLElement {
     ++this._frame;
 
     this._gl.useProgram(this.program);
-    // TODO buffers
 
     this._gl.enableVertexAttribArray(this._attLocation);
     this._gl.vertexAttribPointer(this._attLocation, 3, this._gl.FLOAT, false, 0, 0);
@@ -263,10 +278,18 @@ class RepaShader extends HTMLElement {
     return shader;
   }
 
+  get width() {
+    return this.getAttribute('width');
+  }
+
+  get height() {
+    return this.getAttribute('height');
+  }
+
   _createTarget() {
     const target = document.createElement('canvas');
-    target.width = this._cfg.width || 300; // TODO
-    target.height = this._cfg.height || 300; // TODO
+    target.width = this.width || 300; // TODO
+    target.height = this.height || 300; // TODO
     this.shadowRoot.appendChild(target);
 
     return target;
@@ -291,7 +314,6 @@ class RepaShader extends HTMLElement {
     return this._target;
   }
 
-  // TODO
   get VS() {
     return `#version 300 es
 in vec3 position;
@@ -309,29 +331,36 @@ void main(){
     // TODO: mrt
     let mode = this.mode;
     if (!mode) {
+      const hasVersion = this._fsSource.startsWith('#version');
       const hasPrecision = this._fsSource.includes('precision');
       const hasMain = this._fsSource.includes('main()');
-      if (hasPrecision) {
+      if (hasVersion) {
+        mode = 'raw';
+      } else if (hasPrecision) {
         mode = 'classic';
       } else if (hasMain) {
         mode = 'geeker';
       } else {
         mode = 'geekest';
       }
+      this.logger.info(`Auto guessing mode: ${mode}`);
     }
 
     let start = '';
     let end = '';
+    let snippets = '';
     switch (mode) {
       case 'classic':
         start = CHUNKS.es300;
         break;
       case 'geeker':
-        start = CHUNKS.es300 + CHUNKS.geeker;
+        snippets = await this._getSnippets();
+        start = CHUNKS.es300 + CHUNKS.geeker + snippets;
         break;
       case 'geekest':
+        snippets = await this._getSnippets();
         const noise = await this.getSnippet('noise.glsl');
-        start = CHUNKS.es300 + CHUNKS.geeker + noise + CHUNKS.geekestStart;
+        start = CHUNKS.es300 + CHUNKS.geeker + noise + snippets + CHUNKS.geekestStart;
         end = CHUNKS.geekestEnd;
         break;
     }
