threejs/manual/resources/threejs-post-processing-3dlut.js

{
    class Waiter {
      constructor() {
        this.promise = new Promise((resolve) => {
          this.resolve = resolve;
        });
      }
    }

    async function getSVGDocument(elem) {
      const data = elem.data;
      elem.data = '';
      elem.data = data;
      const waiter = new Waiter();
      elem.addEventListener('load', waiter.resolve);
      await waiter.promise;
      return elem.getSVGDocument();
    }

  const diagrams = {
    lookup: {
      async init(elem) {
        const svg = await getSVGDocument(elem);
        const partsByName = {};
        [
          '[id$=-Input]',
          '[id$=-Output]',
          '[id$=-Result]',
        ].forEach((selector) => {
          [...svg.querySelectorAll('[id^=Effect]')].forEach((elem) => {
            // because affinity designer doesn't export blend modes (T_T)
            // and because I'd prefer not to have to manually fix things as I edit.
            // I suppose I could add a build process.
            elem.style.mixBlendMode = elem.id.split('-')[1];
          });
          [...svg.querySelectorAll(selector)].forEach((elem) => {
            const [name, type] = elem.id.split('-');
            partsByName[name] = partsByName[name] || {};
            partsByName[name][type] = elem;
            elem.style.visibility = 'hidden';
          });
        });
        const parts = Object.keys(partsByName).sort().map(k => partsByName[k]);
        let ndx = 0;
        let step = 0;
        let delay = 0;
        setInterval(() => {
          const part = parts[ndx];
          switch (step) {
            case 0:
              part.Input.style.visibility = '';
              ++step;
              break;
            case 1:
              part.Output.style.visibility = '';
              ++step;
              break;
            case 2:
              part.Result.style.visibility = '';
              ++step;
              break;
            case 3:
              part.Input.style.visibility = 'hidden';
              part.Output.style.visibility = 'hidden';
              ndx = (ndx + 1) % parts.length;
              if (ndx === 0) {
                step = 4;
                delay = 4;
              } else {
                step = 0;
              }
              break;
            case 4:
              --delay;
              if (delay <= 0) {
                for (const part of parts) {
                  for (const elem of Object.values(part)) {
                    elem.style.visibility = 'hidden';
                  }
                }
                step = 0;
              }
              break;
          }
        }, 500);
      },
    },
  };

  [...document.querySelectorAll('[data-diagram]')].forEach(createDiagram);

  function createDiagram(base) {
    const name = base.dataset.diagram;
    const info = diagrams[name];
    if (!info) {
      throw new Error(`no diagram ${name}`);
    }
    info.init(base);
  }
}