Skip to content

Extract Shader Composer core that doesn't rely on Three.js #362

@hmans

Description

@hmans

As Is:

Shader Composer compiles GLSL shader code from a graph of JavaScript objects ("units"). The library provides a) the compiler, and b) a library of units that serve as building blocks for shader graphs.

The compiler itself is mostly renderer agnostic. You can use it in Three.js, but also any other rendering environment that can work with GLSL code (or potentially WGSL in the future.) It still has a peer dependency to Three.js mostly for some typing and variable conversion reasons (for example, the compiler knows that an instance of THREE.Color should be compiled to a vec3 GLSL variable, and similar.)

The unit library is slightly more Three.js-specific, but only in the sense that some of the units provided make assumptions about the structure of typical Three.js shaders (when used with ShaderMaterial or injected into existing materials.) For example, the VertexPosition unit assumes that the position is provided as a position attribute, and will break in any environment where this is not the case.

To Be:

Shader Composer should be restructured (and possibly split into multiple packages) so its core functionality can be imported and used without Three.js, with the Three.js-specific bits living in a separate package (eg. shader-composer-three, analogous to shader-composer-r3f.)

Todo:

  • Create a new shader-composer-three package that re-exports shader-composer and adds its own Three.js-specific functionality
  • Remove the Three.js-specific arguments from the update callback on units
  • Allow the glslType and glslRepresentation functions to be extended (so sc-three can add its own conversions)
    • We have taught it about objects that are shaped like Three's vectors and matrices, and we've also taught it about number arrays. That should cover most usage scenarios.
  • Allow UniformUnit to accept number arrays for vectors
  • Check if we can make toybox not depend on three
  • Update the libraries (and examples) that use Shader Composer with Three.js to import from shader-composer-three
  • Make a final decision on whether shader-composer-three should re-export shader-composer, or if it should expect shader-composer as a peer dependency
  • Check if we're registering peer deps correctly in the shader-composer main package, and maybe mark them as optional

New package structure

  • Restructure packages into scoped micropackages, with shader-composer merely acting as an umbrella package
    • shader-composer
    • @shader-composer/three
    • @shader-composer/r3f
    • @shader-composer/postprocessing
    • @shader-composer/toybox (maybe use the opportunity to finally get rid of that package, and move the contained primitives into different packages)
  • Update material-composer to use the new structure
  • Update vfx-composer to use the new structure
  • Change @shader-composer/three to export a function that needs to be called explicitly (and call it from @shader-composer/r3f)

Documentation etc.

  • Update documentation of shader-composer package
  • Add documentation to shader-composer-three package
  • Write changeset(s)

Metadata

Metadata

Assignees

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions