chore: initial commit

Author: learosema

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+}

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+Thumbs.db
+
+node_modules
+dist

.prettierrc.yaml

@@ -0,0 +1 @@
+singleQuote: true

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+node_js:
+  - '12'
+os: linux
+dist: xenial
+install:
+  - npm i

README.md

@@ -0,0 +1,5 @@
+# UniformPlugin for `shader-art`
+
+This plugin lets you configure uniform variables. Uses dat.GUI.
+
+Example: https://codepen.io/terabaud/pen/jOymzJN?editors=1000

jest.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFiles: ['jest-webgl-canvas-mock'],
+};

package-lock.json

@@ -0,0 +1,46 @@
+{
+  "name": "@shader-art/plugin-uniform",
+  "version": "0.0.1",
+  "description": "uniform variables with dat.gui for shader-art",
+  "repository": "shader-art/plugin-uniform",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
+  "unpkg": "./dist/index.esm.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "import": "./dist/index.esm.js",
+    "require": "./dist/index.cjs"
+  },
+  "scripts": {
+    "build": "npm run build:types -s && npm run build:js -s && npm run build:cjs -s",
+    "build:types": "tsc -d --emitDeclarationOnly",
+    "build:js": "esbuild --format=esm --bundle --minify src/index.ts > dist/index.esm.js",
+    "build:cjs": "esbuild --format=cjs --bundle --minify src/index.ts > dist/index.cjs",
+    "lint": "npm run lint:js -s && npm run lint:package -s",
+    "lint:js": "eslint src/**/*.ts",
+    "lint:package": "npx @skypack/package-check",
+    "test": "jest -c jest.config.cjs"
+  },
+  "keywords": ["webgl"],
+  "author": "Lea Rosema",
+  "license": "MIT",
+  "devDependencies": {
+    "@shader-art/plugin-base": "^0.1.1",
+    "@types/dat.gui": "^0.7.6",
+    "@types/jest": "^26.0.22",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
+    "eslint": "^7.23.0",
+    "jest": "^26.6.3",
+    "jest-webgl-canvas-mock": "^0.2.3",
+    "ts-jest": "^26.5.4",
+    "typescript": "^4.2.3"
+  },
+  "dependencies": {
+    "dat.gui": "^0.7.7"
+  }
+}

package.json

@@ -0,0 +1,113 @@
+import { ShaderArtPlugin } from '@shader-art/plugin-base';
+import { ShaderArtShim } from './test-utils/shader-art-shim';
+
+jest.mock('dat.gui', () => ({
+  GUI: function () {
+    const that: any = {
+      add: jest.fn().mockImplementation(() => that),
+      addColor: jest.fn().mockImplementation(() => that),
+      min: jest.fn().mockImplementation(() => that),
+      max: jest.fn().mockImplementation(() => that),
+      step: jest.fn().mockImplementation(() => that),
+      destroy: jest.fn().mockImplementation(() => that),
+      onChange: jest.fn(),
+    };
+    return that;
+  },
+}));
+
+import { UniformPlugin } from './index';
+
+const html = (x: any) => x;
+
+function asynced(fn: (...args: any[]) => void, timeout = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      fn();
+      resolve();
+    }, timeout);
+  });
+}
+
+const vertexShader = html`
+  <script type="vert">
+    precision highp float;
+    attribute vec4 position;
+    void main() {
+      gl_Position = position;
+    }
+  </script>
+`;
+
+const fragmentShader = html`
+  <script type="frag">
+    precision highp float;
+    uniform vec2 resolution;
+    unifrom texture2D texture;
+    void main() {
+      vec2 p = gl_FragCoord.xy / resolution;
+      gl_FragColor = texture2D(texture, p);
+    }
+  </script>
+`;
+
+const uniformFloat = html`
+  <uniform type="float" name="testFloat" value="123." />
+`;
+
+const uniformColor = html`
+  <uniform type="float" name="testColor" value="#ff00ff" />
+`;
+
+const createShaderArt = (html: string): ShaderArtShim => {
+  const element = document.createElement('shader-art');
+  element.setAttribute('autoplay', '');
+  element.innerHTML = html;
+  document.body.appendChild(element);
+  return element as ShaderArtShim;
+};
+
+describe('UniformPlugin tests', () => {
+  beforeAll(() => {
+    ShaderArtShim.register([() => new UniformPlugin()]);
+  });
+
+  test('shader-art creation', () => {
+    const element = createShaderArt(vertexShader + fragmentShader);
+    expect(element).toBeDefined();
+    expect(element.canvas).toBeInstanceOf(HTMLCanvasElement);
+    expect(element.activePlugins.map((p: ShaderArtPlugin) => p.name)).toContain(
+      'UniformPlugin'
+    );
+  });
+
+  test('shader-art creates a uniform float', () => {
+    const element = createShaderArt(
+      uniformFloat + vertexShader + fragmentShader
+    );
+    expect(element).toBeDefined();
+    expect(element.canvas).toBeInstanceOf(HTMLCanvasElement);
+    expect(
+      (element.activePlugins[0] as UniformPlugin)?.gui?.add
+    ).toHaveBeenCalled();
+  });
+
+  test('shader-art creates a uniform color', () => {
+    const element = createShaderArt(
+      uniformColor + vertexShader + fragmentShader
+    );
+    expect(element).toBeDefined();
+    expect(element.canvas).toBeInstanceOf(HTMLCanvasElement);
+    expect(
+      (element.activePlugins[0] as UniformPlugin)?.gui?.add
+    ).toHaveBeenCalled();
+  });
+
+  afterEach(() => {
+    const sc = document.querySelector('shader-art');
+    if (sc) {
+      sc.remove();
+    }
+    jest.resetAllMocks();
+  });
+});

src/index.test.ts

@@ -0,0 +1,69 @@
+import { ShaderArtPlugin } from '@shader-art/plugin-base';
+import dat from 'dat.gui';
+
+function color(str: string): number[] {
+  if (/^#[0-9a-f]{6}$/g.test(str)) {
+    const r = parseInt(str.slice(1, 3), 16) / 255;
+    const g = parseInt(str.slice(3, 5), 16) / 255;
+    const b = parseInt(str.slice(5, 7), 16) / 255;
+    return [r, g, b];
+  }
+  return [0, 0, 0];
+}
+
+export class UniformPlugin implements ShaderArtPlugin {
+  name = 'UniformPlugin';
+  gui: dat.GUI | null = null;
+
+  setup(
+    hostElement: HTMLElement,
+    gl: WebGLRenderingContext | WebGL2RenderingContext,
+    program: WebGLProgram,
+    canvas: HTMLCanvasElement
+  ): void | Promise<void> {
+    const gui = new dat.GUI();
+    this.gui = gui;
+    const elements = [...hostElement.querySelectorAll('uniform')];
+    for (const el of elements) {
+      const params: Record<string, number | string> = {};
+      const name = el.getAttribute('name');
+      const type = el.getAttribute('type');
+      if (!name || !type) {
+        continue;
+      }
+      if (type === 'float') {
+        const value = parseFloat(el.getAttribute('value') || '0.');
+        const min = parseFloat(el.getAttribute('min') || '0.');
+        const max = parseFloat(el.getAttribute('max') || '0.');
+        const step = parseFloat(el.getAttribute('step') || '0.');
+        const useGui = !el.hasAttribute('no-gui');
+        params[name] = value;
+        const uName = gl.getUniformLocation(program, name);
+        gl.uniform1f(uName, value);
+        if (useGui) {
+          gui
+            .add(params, name)
+            .min(min)
+            .max(max)
+            .step(step)
+            .onChange(() => {
+              gl.uniform1f(uName, params[name] as number);
+            });
+        }
+      }
+      if (type === 'color') {
+        const value = el.getAttribute('value') || '#000000';
+        params[name] = value;
+        const uName = gl.getUniformLocation(program, name);
+        gl.uniform3fv(uName, color(value));
+        gui.addColor(params, name).onChange(() => {
+          gl.uniform3fv(uName, color(params[name] as string));
+        });
+      }
+    }
+  }
+
+  dispose() {
+    this.gui?.destroy();
+  }
+}

src/index.ts

@@ -0,0 +1,82 @@
+import { ShaderArtPlugin } from '@shader-art/plugin-base';
+
+export class ShaderArtShim extends HTMLElement {
+  canvas: HTMLCanvasElement | null = null;
+  gl: WebGLRenderingContext | WebGL2RenderingContext | null = null;
+  program: WebGLProgram | null = null;
+  activePlugins: ShaderArtPlugin[] = [];
+  initialized = false;
+
+  static plugins: (() => ShaderArtPlugin)[] = [];
+  static register(plugins: (() => ShaderArtPlugin)[]): void {
+    ShaderArtShim.plugins = plugins;
+    if (typeof customElements.get('shader-art') === 'undefined') {
+      customElements.define('shader-art', ShaderArtShim);
+    }
+  }
+
+  constructor() {
+    super();
+  }
+
+  setup(): void {
+    const canvas = document.createElement('canvas');
+    this.appendChild(canvas);
+
+    const gl = canvas.getContext('webgl');
+    if (!gl) {
+      throw new Error('create WebGLRenderingContext failed');
+    }
+
+    const program = gl.createProgram();
+    if (!program) {
+      throw new Error('create WebGLProgram failed');
+    }
+
+    this.gl = gl;
+    this.canvas = canvas;
+    this.program = program;
+
+    const pluginQueue: Promise<void>[] = [];
+    for (const plugin of ShaderArtShim.plugins) {
+      const instance = plugin();
+      this.activePlugins.push(instance);
+      const result = instance.setup(this, gl, program, canvas);
+      if (result instanceof Promise) {
+        pluginQueue.push(result);
+      }
+    }
+    Promise.all(pluginQueue).then(() => {
+      this.initialized = true;
+    });
+  }
+
+  connectedCallback(): void {
+    if (!this.gl) {
+      this.setup();
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.dispose();
+  }
+
+  dispose(): void {
+    if (!this.gl || !this.canvas) {
+      return;
+    }
+    for (const plugin of this.activePlugins) {
+      plugin.dispose();
+    }
+    this.activePlugins = [];
+    this.gl = null;
+    this.program = null;
+    this.removeChild(this.canvas);
+  }
+
+  render(): void {
+    if (this.gl) {
+      this.gl.drawArrays(this.gl.TRIANGLES, 0, 0);
+    }
+  }
+}