New and improved Material Composer JSX API

[hmans]

The current API

At the moment, to use material composer from within React, you have to

1. created a patched material through the composable proxy, ie. <composable.meshStandardMaterial>
2. fill it with material modules that all live on the modules proxy, ie. <modules.Rotation>, <modules.Alpha> etc.

This works, but isn't a lot of fun. The primary issues with it are:

• It's pretty verbose
• You can't import individual modules; you always have to import the entire proxy
• The proxy is probably bad for tree shaking
• There's a weird disconnect where the Layer module currently doesn't live on the proxy, but actually needs to be imported explicitly
• When starting to type <modu, VS Code won't auto-suggest an import of the modules constant (probably because it thinks you're typing out a native element.)

The last point could be mitigated by changing these exports to PascalCase, ie. <Composable.MeshStandardMaterial> and <Modules.Color>, but maybe we can find a simpler, nicer, more fun API.

A potential new API

Since we'll always hook into some sort of material, maybe we can make use of the nested nature of JSX and go for the following:

{/* The normal R3F material JSX */}
<meshStandardMaterial transparent>
  {/* but it has children! */}
  <MaterialModules>
    {/* We directly import modules */}
    <Color color="hotpink" />
    <Alpha alpha={0.5} />
    <SurfaceWobble intensity={5} />
  </MaterialModules>
</meshStandardMaterial>

For this, the following changes would need to be made:

• We would need to remove the proxies and let the user import the React components representing the library of MC modules directly (which would also mean we would need to explicitly add them to the code and maintain them.)
  • As a workaround, instead of exporting per-module React components, maybe having a generic <Module> would be enough, eg. <Module module={Color} color="hotpink" />?
• We would need to implement the <MaterialModules> component and find a way for it to modify its parent material element's onBeforeCompile function. The main issue here being that currently, it's not possible for a component to access its "parent" element (the material, in this case.) Maybe this will become possible in a future version of R3F.