Add custom float uniform

Author: nathanvogel

src/sd-uniform.js

@@ -0,0 +1,49 @@
+import SDBaseElement from './sd-base.js';
+
+class SDUniformElement extends SDBaseElement {
+  disconnectedCallback() {}
+
+  get x() {
+    return parseFloat(this.getAttribute('x'));
+  }
+
+  set x(newX) {
+    if (newX != null) this.setAttribute('x', newX);
+    else this.removeAttribute('x');
+  }
+
+  get type() {
+    return this.getAttribute('type');
+  }
+
+  set type(newType) {
+    if (newType != null) this.setAttribute('type', newType);
+    else this.removeAttribute('type');
+  }
+
+  static get observedAttributes() {
+    return ['x'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'x':
+        if (newValue != null) this.renderer.setUniform(this.name, newValue);
+        break;
+    }
+  }
+
+  init(program) {
+    if (!this.name) {
+      console.warn('sd-uniform created without a name.');
+      return;
+    }
+
+    this.program = program;
+    this.renderer.addUniform(this.name, this.x, this.type);
+  }
+}
+
+if (!customElements.get('sd-uniform')) {
+  customElements.define('sd-uniform', SDUniformElement);
+}

src/shader-doodle.js

@@ -2,6 +2,7 @@ import Template from './template.js';
 import SDNodeElement from './sd-node.js';
 import './sd-audio.js';
 import './sd-texture.js';
+import './sd-uniform.js';
 
 import Surface from './webgl/Surface.js';
 import Renderer from './webgl/Renderer.js';

src/webgl/Renderer.js

@@ -28,6 +28,7 @@ function Renderer() {
   const surfaces = new Set();
 
   const ustate = cheapClone(GLOBAL_UNIFORMS);
+  /* TODO UNIFORM*/
 
   const extensions = Extensions(gl);
   extensions.get('OES_texture_float');
@@ -106,6 +107,24 @@ function Renderer() {
     surfaces.delete(surface);
   }
 
+  function addUniform(name, value, type) {
+    ustate.push({
+      name,
+      value,
+      type,
+      toyname: name,
+    });
+  }
+
+  function setUniform(name, value) {
+    for (let i = 0; i < ustate.length; i++) {
+      if (ustate[i].name === name) {
+        ustate[i].value = value;
+        break;
+      }
+    }
+  }
+
   function dispose() {
     surfaces.forEach(s => s.dispose());
     surfaces.clear();
@@ -128,6 +147,8 @@ function Renderer() {
     },
     addSurface,
     removeSurface,
+    addUniform,
+    setUniform,
     dispose,
   });
 }