Update fragment shaders on demand

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
  • Dev
  • r82
Browser
  • Chrome
OS
  • Mac OS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “Update fragment shaders on demand

  1. 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;
    
      }
    

Comments are closed.