Non-Production Machines

    three-multipass-shader-helper
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    THREEMultipass Shader Helper

    Create multi-pass shaders in ThreeJS, intuitively.
    View Demo · Report Bug

    Install

    Ndoe

    npm install three-multipass-shader-helper
    # or
    yarn add three-multipass-shader-helper

    Browser

    Download the IIFE style module from build/MultipassShaderHelper.browser.js.

    Import

    Node

    import { MultipassShaderHelper } from "three-multipass-shader-helper";

    Browser

    <script src="three.js"></script>
    <script src="MultipassShaderHelper.browser.js"></script>
    
    <!-- Your script -->
    <script src="main.js" defer></script>

    Use

    It's quite straightforward.

    Create passes

    const passes = {
      BufferA: {
        vertexShader: `...`,
        fragmentShader: `...`,
        uniforms: {
          // Takes in regular uniforms
          uDelta: { value: 0 },
    
          // And other passes
          BufferB: { value: new MultipassShaderHelper.Dependency() },
          //                    Must have this type
        },
        onLoadTexture: (texture) => {
          /*...Fill texture maybe?*/
        },
      },
      BufferB: {
        vertexShader: pVert,
        fragmentShader: pFrag,
        // Uniforms and `onLoadTexture` are optional
      },
    };

    Apply passes

    const gpuCompute = new MultipassShaderHelper(renderer, passes);
    const material = new THREE.ShaderMaterial({
      vertexShader: `...`,
      fragmentShader: `...`,
      uniforms: {
        BufferA: { value: gpu.textures.BufferA() },
        BufferB: { value: gpu.textures.BufferB() },
      },
    });
    
    // ...
    
    const clock = new THREE.Clock();
    function render() {
      const delta = clock.getDelta();
    
      // Get a buffer's variable
      const { BufferA } = gpuCompute.allVariables;
      // Update its uniforms
      BufferA.material.uniforms.uDelta = delta;
    
      // Use it
      material.uniforms.BufferA.value = gpu.textures.BufferA();
      material.uniforms.BufferB.value = gpu.textures.BufferB();
    
      // Compute the shaders
      gpuCompute.compute();
    }

    Install

    npm i three-multipass-shader-helper

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    62.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • farazshaikh