Three.js: Update fragment shaders on demand

[NicolasRannou]

Description of the problem

Updating "fragmentShader" has no effect.

I want to create custom Fragment shaders on the fly for my object.

  _updateMaterial(){

    console.log( 'update material');

    // generate shaders on-demand!
    let fs = new ShadersFragment(this._uniforms);
    let vs = new ShadersVertex();

    // material
    this._material = new THREE.ShaderMaterial({
      uniforms: this._uniforms,
      vertexShader: vs.compute(),
      fragmentShader: fs.compute(),
      side: THREE.FrontSide,
      transparent: true
    });
    this._material.needsUpdate = true;

  }

Updating the uniforms works as expected but updating the fragment shader is not picked up by ThreeJS.

The objective is to build specialized shaders that are optimized for a given rendering scenario.

Three.js version

• [x] Dev
• [x] r82

Browser

• [x] Chrome

OS

• [x] Mac OS

Hardware Requirements (graphics card, VR Device, ...)

[NicolasRannou]

Closing - it works properly, there was a bug in my code:

Working solution:

  _updateShaders(){

    console.log( 'update material');

    // generate shaders on-demand!
    let fs = new ShadersFragment(this._uniforms);
    let vs = new ShadersVertex();

    this._material.vertexShader = vs.compute();
    this._material.fragmentShader = fs.compute();
    this._material.needsUpdate = true;

  }