custom defines to default materials

Description of the problem

I’ve got a couple of effects i’ve tried to implement on top of three.js but in order to get them to work with default materials or shadows, i needed to hack the WebGLRenderer. In r78, i could just override a few functions (like WebGLPrograms) and inject some GLSL.

In 84 this seems impossible, there is no THREE namespacing so THREE.Vector3 is Vector3, THREE.WebGLPrograms is undefined etc.

See this for more details.

The other use case i’d have is for adding custom TBN information, and unpacking it.

This all got me thinking, shadows aside, could there be a mechanism to inject custom logic into the default materials? Something like:

var MyFancyInjection = {
  defines:['foo','bar'],
  vertexHelpers: {
     foo: 'float random( vec2 input ) { ... };'
  },
  vertexTransform:{
     foo: ' transformed = doSomethingWithTransformed( transformed );'
  },
  fragmentEnd:{
     bar: ' gl_FragColor.xyz *= .5;'
  },
  ....
  //or
  shaderChunks:{
    begin_vertex: myBeginVertexOverride
  }
  ...
}

var material = new THREE.MeshPhongMaterial({
   userOverride: myFancyInjection
});

Then have the program figure out what needs to be done, does it take a chunk from cache, or the provided one, does it inject attributes, or just a define etc.

The shadowmap only needs the position information, no normals, so in case of a custom TBN or transformation it would only care about transformation. Perhaps this could be used with useSkinning and useMorphing but it would require on settling for a “transformation” flag of sorts to always be included.

Just a thought.

Three.js version

• Dev
• r84
• …

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• Linux
• Android
• IOS

Hardware Requirements (graphics card, VR Device, …)