Writing vertex shader in vtk.js

Web
1

Hi,I want to write a vertex shader with vtk.js to speed up the calculation of vertices.
But I checked the official exampleVTK.js, and there is no corresponding example.
By looking through the source code, I only found the reference classes Shader, ShaderCache and ShaderPrograme.
Since I’m new to Webgl and shaders, I don’t know how to start writing, can you give me an example written in vtk.js.
Thanks for your help!

2

There are some guidelines in the readme here and you can also see how the existing shaders have been set up: vtk-js/Sources/Rendering/OpenGL/glsl at master · Kitware/vtk-js · GitHub

Some of what’s going on is obscured by string replacements occuring when the shaders are built, but with some effort you can piece together what’s happening. In the past I’ve also found it helpful to insert some lines in polydatamapper or imagemapper that print out as a string the current shader program that is going to be built.

3

Thanks a lot for your suggestion! I will follow your prompts to find the information I need.

4

Hello, I have sorted out some logic here, but there has been a problem with the definition of the context parameter,and I can’t find the corresponding function,
Below is the code logic I wrote：
` const canvas = document.createElement(“canvas”);
const gl = canvas.getContext(“webgl”);
// const frag = “attribute vec4 position;\n void main() {\n gl_Position = position;\n }\n”;
const frag = “attribute vec4 position;\n”
“void main() {\n”+
" gl_Position = position;\n"+
“}\n”;

//ShaderProgram-----------------------
const shaderProgram = vtkShaderProgram.newInstance();
shaderProgram.setContext(renderWindow);
//-----------------------------------------------------------

//shader
const vertex = vtkShader.newInstance();
vertex.setShaderType('Vertex'); 

const frag = "attribute vec4 position;\n"+
    "void main() {\n"+
    "  gl_Position = position;\n"+
    "}\n";

vertex.setSource(frag);
// vtkOpenGLRenderWindow* context==>vtkSmartPointer<vtkRenderWindow> renWin = vtkSmartPointer<vtkRenderWindow>::New();
// vertex.setContext(renderWindow);
vertex.setContext(gl);
// compile shader
vertex.compile();
//-----------------------------------------------------------

shaderProgram.setVertexShader(vertex);
// attachShader
shaderProgram.attachShader(vertex);
// link shaderProgram
shaderProgram.link();

`
I have tried to use vtkRenderWindow but cannot get the createShader(); shaderSource() and other methods and canvas.getContext(“webgl”) cannot get the createProgram() function.
Can you give some advice or say that you have relevant examples on hand and can share with me if you allow sharing?
Thanks for your help!

1 Like
5

I would love to share if I had some relevant examples, but I don’t. It’s been a while since I touched the shader code. I hope someone else can help you!

6

Thank you for your reply!

1 Like
7

My problem was solved by writing the Webgl shader directly instead of using the api in vtk!
Thanks for your previous help!

1 Like