How to apply Three.js shaders to nodes

Question

I'm trying to apply the shaders from the shaderLib but most of them either turn the node to complete white or black. Only the normal shader seem to work.

This is how I apply it:

const shader = THREE.ShaderLib.depth;
const uniforms = shader.uniforms;
const material = new THREE.ShaderMaterial({
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms
})

this._viewer.impl.matman().addMaterial(
  data.name, material, true)

And set the material of the fragment with:

function setMaterial(fragIds, material) {

    const fragList = this._viewer.model.getFragmentList()

    this.toArray(fragIds).forEach((fragId) => {

      fragList.setMaterial(fragId, material)
    })

    this._viewer.impl.invalidate(true)
  }

Just like in this example: https://forge.autodesk.com/blog/forge-viewer-custom-shaders-part-1

I also tried to add colors to the uniforms like that example but it didn't help.

Any ideas why they don't work?

Answer 1

As I said in the comment, Forge Viewer is using a privately owned three.js, and its' WebGLRender didn't implement all functionalities as three.js, either. So, it might not support all functions in the three.js.

To identify what happened to this case, you can consider providing a reproducible case demonstrating that, I will gladly pass it to our dev team. Those following items should be in the reproducible case:

1. A short exact description of what you are trying to achieve. The behavior you observe versus what you expect, and why this is a problem.
2. A complete yet minimal sample source model to run a test in.
3. A complete yet minimal Forge app that can be run and debugged with a simple procedure to analyze its behavior lives in the sample model.
4. A complete yet minimal three.js app that can be run and demonstrated the shader effect you want. Note. Forge Viewer is using r71 three.js.
5. Detailed step-by-step instructions for reproducing the issue, e.g. which element to pick, what command to launch etc.

If your reproducible case could not be posted here publicly, please send it to the [email protected] and remove sensitive data or information before you send.

======== Old response

Could you provide more detail for further debugging, please?

It seems to works fine on my side. Here are my test codes. It's tested on the Forge RCDB (https://forge-rcdb.autodesk.io/database?id=57efaf0377c8eb0a560ef467).

var shader = THREE.ShaderLib.depth;
var uniforms = shader.uniforms;
var material = new THREE.ShaderMaterial({
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms
})

NOP_VIEWER.impl.matman().addMaterial( 'ShaderLabDepth', material, true );

var sel = NOP_VIEWER.getSelection();

var fragList = NOP_VIEWER.model.getFragmentList();
var it = NOP_VIEWER.model.getData().instanceTree;
it.enumNodeFragments( sel[0], function( fragId ) {
  fragList.setMaterial( fragId, material )
});

NOP_VIEWER.impl.invalidate( true );

And Its' result is like this. Did it what you want?