Uniforms-gui NPM

uniforms-gui

Small utility to transform all uniforms to a GUI controls. GUI from uil.js

Install

yarn add uniforms-gui

API example

  const options = { css: 'right: 0px;' }  // options from uil.js 
  const debug = true // add console log message when change values
  const gui = new GUI(options, debug); // istantiate uil.js
  gui.add(program); // add N program to create the GUI controls from uniforms object
  gui.draw(); // add GUI to dom
  gui.clear(); // reset all values
  gui.destroy(); // remove GUI from dom

Minimal example

import GUI from "uniforms-gui"

export default () => {
    const gui = new GUI();
    //...
    const material = new THREE.ShaderMaterial({
        vertexShader,
        fragmentShader,
        uniforms: {
          uTime: { value: 0.0 },
        },
      });

    gui.add(material);
    gui.draw();
    //...
}

Advanced example

import GUI from "uniforms-gui"

export default () => {
    const gui = new GUI();
    //...
    const material = new THREE.RawShaderMaterial({
        vertexShader,
        fragmentShader,
        uniforms: {
          uBool: { value: false }, // Automatic type "bool"
          uFloat: { value: 0.0 }, // Automatic type "slide"
          uVector: { value: [0, 100, 0] }, // Automatic type "vector"
          uSlideWithControls: {
            value: 0.0,
            controls: {
              min: 0.01,
              max: 5.5,
              step: 0.05,
              precision: 2
            }, // add controls options
          },
          uColorGraph: {
            value: [0.0, 0.0, 0.0],
            controls: {
              type: "graph",
              name: "uColor", // to control another uniforms
            },
          },
          uColor: {
            value: [0.0, 0.0, 0.0],
            controls: {
              type: "color",
            },
          },
          uNumericBool: {
            value: 1.0,
            controls: {
              type: "bool",
            },
          },
          uKnob: {
            value: 0.0,
            controls: {
              type: "knob",
              min: 0,
              max: 1
            }
          },
        },
      });

    // no longer required
    // material.uniformsNeedUpdate = true

    const material2 = new THREE.RawShaderMaterial({
        vertexShader,
        fragmentShader,
        uniforms: {
          uBool: { value: false },
        },
      });

    gui.add(material, 'My GUI');
    gui.add(material2, 'My GUI 2');
    gui.draw();
    //...
}

Controls options

  {
    // same from uil.js
    w: 120,
    h: 100,
    min: 0,
    max: 100,
    step: 1,
    precision: 2,
    fontColor: '#D4B87B',
    multiplicator: 1,
    mode: 1,

    // options
    name: 'uName', // to controls another uniforms
    type: 'bool|slide|color|knob|circular|joystick',
  }