Three.js如何将多种材料与onBeforeCompile结合

Question

说我有类似的东西：

//some chunks i want to override for functionality FOO
const myNormalChunks = {
   beginnormal_vertex,
   defaultnormal_vertex, 
   normalmap_pars_fragment,
}

//a version of `MeshStandardMaterial` that does FOO instead of default 
class StandardMaterialWithFOO extends THREE.MeshStandardMaterial{
  constructor(params){
    super(params)

    this.onBeforeCompile = shader=> { /*replace chunks by name*/ }
  }
}

现在，我可以使用该材料的FOO版本。 但是，如果我想添加同时执行FOO和BAR的MeshStandardMaterial另一个版本怎么办？

const BAR_onBeforeCompile = shader => { 
  /* 1. replace another chunk */
  /* 2. add something after beginnormal_vertex */
}


class ShaderMaterialWithFOOandBAR extends StandardMaterialWithFOO {
  constructor(params){
    super(params)
    this.onBeforeCompile = /* ??? */
  }
}

1. 我有点想通过一些黑客来传递这些回调是可能的
2. 但是，这将不起作用，因为在第一个onBeforeCompile处理#include <some_chunk>之后，没有#include <some_chunk>了，而且我也无法知道它被替换了什么。

我能想到的解决这个的唯一的事情是有一些超级全球像GLSL代码通过控制每一个可能的排列#ifdef ？ 但是我不希望全局修改THREE.ShaderChunk对象。

someChunk = `
  #ifdef isFOO 
    /* logic */
  #endif

  #ifdef isBAR
    /* logic */
  #endif
`

^这似乎有些乏味并且容易出错。

也有类似的东西：

const mySuperUberOneSizeFitAllOnBeforeCompile = shader =>{
  if( isBAR ) {...}
  if( isFOO ) {...}
}

不起作用，因为three.js具有忽略这些条件的缓存机制。 假设如果我有10个资料使用相同的回调，它们将全部编译为一个，从该列表中随机选择。

有什么建议，想法吗？

Answer 1

我很犹豫地说这是一个答案。 另外，我的TypeScript非常初级。 但是我的意思是这样的...

function copyHashes(input, output) {
    let key
    for (key in input) {
        output[key] = input[key]
    }
}

class foo {
    shaderStuff = {}
    constructor(params) {
        copyHashes({
            beginnormal_vertex: "",
            defaultnormal_vertex: "",
            normalmap_pars_fragment: ""
        },
            this.shaderStuff)

        this.onBeforeCompile = ()=>{
            // perform the replacement using this.shaderStuff
        }
    }
}

class bar extends foo {
    constructor(params) {
        super(params)
        copyHashes({
            somethingelse_vertex: "",
            other_pars_fragment: ""
        },
            this.shaderStuff)

        // you assigned onBeforeCompile during the constructor
        // so it wasn't inherited
        this.onBeforeCompile = ()=>{
            // perform the replacement using this.shaderStuff
            // in this case, this.shaderStuff contains the FULL
            // COMBINED list from both foo AND bar
        }
    }
}

发生的事情是每个类都将自己的重写附加到shaderStuff 。 按照我编写的方式，任何扩展类都将使用自己的覆盖现有的覆盖。

如果那没有道理，或者我误解了这个问题，请告诉我。