pmndrs / lamina

🍰 An extensible, layer based shader material for ThreeJS
MIT License
1.01k stars 41 forks source link

Create reasonable defaults to make things cleaner, best practices, and fault tolerant #11

Closed DennisSmolek closed 2 years ago

DennisSmolek commented 2 years ago

Can you spot the "mistakes?"

<mesh>
    <sphereGeometry args={[1, 64, 64]} />
    <LayerMaterial>
        <Base color="#603295" />
        <Depth colorA="white" colorB="#0F1C4D" alpha={0.5} mode="normal" near={0} far={2} origin={[1, 1, 1]} />
        <Depth colorA="red"  alpha={0.5} mode="add" near={3} far={2} origin={[-1, 1, 1]} />
        <Fresnel mode="add" color="orange" intensity={0.5} power={2} bias={0.05} />
        <Noise scale={2} mapping="world" type="curl"  colorA="white" colorB="0x000000" mode="softlight" />
        <Noise mapping="local" /*type="curl" */ scale={100} colorA="#aaa" colorB="black" type="simplex" mode="softlight" />
        <Noise mapping="local" type="simplex" scale={100} colorA="white" colorB="black" mode="subtract" alpha={0.2} />
    </LayerMaterial>
    </mesh>
    <mesh>
    <circleGeometry args={[2, 16]} />
    <LayerMaterial transparent depthWrite={false} side={THREE.FrontSide} blending={THREE.AdditiveBlending}>
        <Depth colorA="orange" colorB="black" alpha={1} mode="normal" near={-2} far={1.4} origin={[0, 0, 0]} />
        <Noise mapping="local" type="simplex" scale={200} colorA="#fff" colorB="black" mode="multiply" />
    </LayerMaterial>
</mesh>

Desktop - 1 (1)

With the complex interweaving it can get incredibly difficult to debug or even correctly configure things on even relatively simple 2 mesh layouts. This totally isn't "bad"

but people will make bad..

Now obviously if people go in an and configure things "correctly" they will have complex files as well, however I think some of the things can have baselines, where the changing or overriding is clear by performing it at all. Consider <noise>

BTW are we missing Noise props? This page mede it clear to understand, but our inputs are unique

---- This is real.. We used this in a multiple demos ----

<Noise scale={2} mapping="world" type="curl"  colorA="white" colorB="0x000000" mode="softlight" />
<Noise mapping="local" /*type="curl" */ scale={100} colorA="#aaa" colorB="black" type="simplex" mode="softlight" />
<Noise mapping="local" type="simplex" scale={100} colorA="white" colorB="black" mode="subtract" alpha={0.2} />

With Baseline configurations

<Noise  type="curl" mapping="world"   colorA="#ff0000" colorB="0x000000" mode="softlight" />
<Noise colorA="#aaa"  scale={2} mode="softlight" />
<Noise  alpha={0.2} mode="subtract" />

I feel like it's a LOT clearer what I'm fiddling with, and when I change the type Im doing it knowingly..

Maybe even catch it:


<LayerMaterial>
  <Noise type="curl" />
  <Noise type="curl" />
  <Noise type="curl" />
  <Noise type="curl" />
</LayerMaterial>
/***WARNING** More than 3 Noise Layers can cause significant frame loss: https://levadocs.io/curl */
DennisSmolek commented 2 years ago

Oh I had it in the title but forgot to add, sometimes things like depth or noise etc included. Instead of every layer failing defaults would let it at least render safely

FarazzShaikh commented 2 years ago

I completely agree. Having standard and meaningful defaults that are consistent across layers will reduce clutter. I guess this library was pushed out as soon as it was functional. Not a massive amount of thought was put into things like this. This is definitely in the right direction.

As for the ease of debugging, shaders are inherently fiddly things, but we are working on adding better Debug capabilities, so hopefully that should lessen the time spent playing with tiny values

DennisSmolek commented 2 years ago

Absolutely, and I think it totally ok & fine to do it that way, what elements to prioritize, abstract, etc becomes clearer as we all continue to work with it, my thoughts on this issue (any the others) is to have a space to discuss it

FarazzShaikh commented 2 years ago

Closed via 1.1.1