How to view shader source code in vtk.js

Web
1

Hi,I use Polydatamapper to customize shaders; I now have two questions:
Question 1: When I read different files, there will be different parameters in vtkPolyDataVS or vtkPolyDataFS, which are not constant. How should I determine these parameters;
Question 2: I found that these parameters are different because I entered the word wrong in the operation, which caused the shader to output as a whole. I found problem 1, but I don’t want to get the shader source code through the wrong operation method every time; how should I operate Shader source code can be obtained；
This is my source code:

const mapperViewProp = mapper.getViewSpecificProperties();
    
    mapperViewProp.OpenGL = {
      ShaderReplacements: [],
    };
  console.log('mapperViewProp.OpenGL::', mapperViewProp.OpenGL);
    mapperViewProp.addShaderReplacements = (
      _shaderType,
      _originalValue,
      _replaceFirst,
      _replacementValue,
      _replaceAll// true:
    ) => {
      mapperViewProp.OpenGL.ShaderReplacements.push({
        shaderType: _shaderType,
        originalValue: _originalValue,
        replaceFirst: _replaceFirst,
        replacementValue: _replacementValue,
        replaceAll: _replaceAll,
      });
    };
    
    const actor = vtkActor.newInstance();
    actor.setMapper(mapper);
    // actor.getProperty().setAmbientColor(0.2, 0.2, 1.0);
    // actor.getProperty().setDiffuseColor(1.0, 0.65, 0.7);
    // actor.getProperty().setSpecular(0.5);
    // actor.getProperty().setSpecularColor(1.0, 1.0, 1.0);
    // actor.getProperty().setDiffuse(0.7);
    // actor.getProperty().setAmbient(0.5);
    // actor.getProperty().setSpecularPower(20.0);
    // actor.getProperty().setOpacity(1.0);
    // renderer.addActor(actor);
    /** 
     * MC  - Model Coordinates
     * WC  - WC World Coordinates
     * VC  - View Coordinates
     * DC  - Display Coordinates
     * NVC - NormalizedViewCoordinates
    */
    //     readerObj.setUrl(
    //   `${INPUT_PATH}`
    // )
    // readerStl.setUrl(
    //     `${INPUT_PATH}`
    //   )
    mapperViewProp.addShaderReplacements(
        'Vertex',
        '//VTK::Normal::Dec', //declaration any uniforms/varying needed for normals   
        true,
        '//VTK::Normal::Dec\n  varying vec3 myNormal MCVSOutput;\n', 
        false
    );

    mapperViewProp.addShaderReplacements(
        'Vertex',
        '//VTK::Normal::Impl',// Implementation of shader code for handling normals 
        true,
        '//VTK::Normal::Impl\n  myNormalMCVSOutput = normalMC;\n',
        false
    );

    // All fragment shaders should name their inputs with a postfix of VSOutput.
    mapperViewProp.addShaderReplacements(
        'Fragment',
        '//VTK::Normal::Dec',
        true,
        '//VTK::Normal::Dec\n  varying vec3 myNormalMCVSOutput;\n',
        false
    );

    mapperViewProp.addShaderReplacements(
        'Fragment',
        '//VTK::Normal::Impl',
        true,
        '//VTK::Normal::Impl\n  diffuseColor = abs(myNormalMCVSOutput) / diffuse;\n',
        false
    );
1 Like
2

I previously wanted to fully define my own shader through the shader interface that has been encapsulated in vtk.js; but I encountered two problems. One is that I created the shader and the shader program, but anyway How to operate shaderProgram.link will report an error, the other is that I don’t know how to put the shader I wrote into the mapper.

3

Here is my different result of reading OBJ file and STL file
(the blue box refers to the code I added (replaced), the black box is the different parameters for different files)

image
image631×796 166 KB

Thanks for everyone’s help!

4

You can print out the final shader source before it gets compiled by doing a console.log at the bottom of the buildShaders call.

As far as replacing parts of the shader, take a look at the testAddShaderReplacements for an example.

1 Like
5

First,Thank you for your answer.
Second,Regarding the replacement of shader, the example I refer to is testClearShaderReplacements.
In order to provide specific properties for rendering, I build the viewSpecificProperties attribute via Mapper;as written in the testClearShaderReplacements；But this way there is no method interface in PolydataMapper，I can’t call buildShaders;and the BuildShader method in PolydataMapper is not passed or called when the shader is created（I added console.log(‘execute’) below this method and it didn’t trigger)
Last , Can you give me more details or give some suggestions? I look forward to your reply!

6

image
image1240×512 63.9 KB

For example, When writing shaders in Webgl, the data will be written to the buffer first, and then the value will be transferred using gl.getAttribLocation or gl.getUniformLocation, but I can’t see how to pass parameters in vtk, so I can’t get the corresponding parameter information , this is very difficult for me to customize the shader. Can you give me some good ideas? Let’s have a collision of ideas

7

For accessing the shader source code and the buildShaders function, are you using a debug build of vtk-js? I think that is internal api and you’d have to use say, npn link to run vtk-js locally. @Forrest Is there some documentation that explains how one can debug vtk-js from within their application?

8

@sunlin0oo how are you testing your shader? Are you running your code in the vtk.js source tree, or are you ingesting a local build of vtk.js via npm link, as Sankhesh mentioned?

@sankhesh we don’t have docs on that, I think. It would be good to add it, since the built package root for running npm link is not at the top-level of the source tree.

9

Sorry to get back to you so late. I am connecting React with vtk.js for use..I think I’m running my code in the vtk.js source tree.

10

Sorry to get back to you so late.i don’t use npn link to run vtk-js locally.

11

If you’d like to debug vtk-js source code, you’d have to link local source and edit it locally.

13

I’ll keep researching based on your suggestions! Thank you for your help!

14

I have another question about PolydataMapperData, hope you can give me some advice!
As shown below:

image
image691×380 10.7 KB

I don’t understand this sentence,'These callbacks will be executed when updateShaders() of OpenGLPolyDataMapper is called.'In other words I don’t know how to call this callback function. And what values should be passed to the CellBO, ren, actor parameters in the callback function

15

Thanks for your help, I can now view the source code of Shader and debug it

1 Like