MIME type glsl

Web
#1

Dear All,

My JavaScript Script is giving the following error in Firefox (in Windows):

Loading module from “https://…/node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataVS.glsl” was blocked because of a disallowed MIME type (“”). vtk_js.html

How can be solved this problem in Firefox (in Windows)? (Also for Chrome …)

More:

In
Tutorials
It can be found (in 4th) the following slides
Slides

There is 5th part of the Course named:

Advanced VTK.js: WebGL and GLSL

Where it can be found?

Thanks,

Luis Gonçalves

#2

Hi Luis,

That error vaguely looks like you’re using browser imports. Are you transpiling your scripts via a bundler like webpack, or are you just loading your scripts directly in the browser? If the latter, then I would recommend checking out the ES6 tutorial for vtk.js. (Note there is currently an issue with those instructions that was resolved here: Problem when trying to setup first VTKJS project).

As for the 5th part of the course, that video wasn’t recorded due to time constraints and available personnel to cover that material. As a possible substitute in the interim, I can highly recommend webgl2fundamentals if you wish to understand more of the underlying WebGL tech and GLSL shader code.

#3

Dear All,

My Web Server is running in a Virtual Machine without Graphics Card. Usually I use VNCServer-VNCClient to have access to graphics applications. Are these glsl programs ran in the server site? Has VNCServer rely in OpenGL to display? Is this the cause of the glsl programs do not run?

Are there some solution for this scenario?

Thanks,
Luis Gonçalves

#4

Hi,

The webgl shader code (glsl code) is run in the browser and not on the server.

The error you are getting looks to be related to trying to use ES6 imports in the browser, which could work but your webserver looks like it’s not serving resources correctly.

Can you post the code you are trying to run? As well as how you are serving your code?

#5

Good night (here) Forrest,

Sorry for the late response.

You can debug yourself in the link below.

Link to test to vtk.js

Note: The glsl files are downloaded from the server (I can see in the logs of the Apache)

Thanks for the help,

Luís Gonçalves

#6

What is the MIME type for glsl files?

Not to edit glsl files but to compile and run glsl files.

#7

Your code needs to be transpiled in order to run inside a browser. If you want to do it inline in a html script tag, you must follow the Script usage documentation.

#8

You can see what we mean by transpiled code with the following example that get transformed into this code by tools such as webpack.

#9

Good Night (here),

I put to work the ES6 tutorial for vtk.js as a localhost:8080 in my Windows machine.

How can it put to work in a remote server? And how to setup an Apache server to be the remote machine? Or not need Apache and put “webpack serve” with a different port. And the problem of the client to be inside a firewall with ports 8080, 8000 etc blocked?

Must the remote machine has a Graphics Card or a Virtual Server without GPU works?

Some tutorial on this?

Thanks,

Luís Gonçalves

#10

Hi Luis,

Re: remote server. “webpack serve” is only meant for development. What you want is a production build.

  1. Run npm run build:release. This will build a production version and put all of the output files into dist/. This will include your index.html that you created in the es6 tutorial.
  2. Copy everything in this dist/ folder to your Apache server. These are static files, so host them however you please. Make sure that you copy everything from dist.
  3. Access your files through apache!

This way, you won’t need to worry about other ports. Apache will take care of everything once you build and copy your application files.

The remote machine does not need a graphics card. vtk.js actually leverages WebGL in the client browser, so all the remote server needs to do is to serve the associated html and js files. All rendering happens inside your browser, so it’s up to the client’s machine whether to use a GPU or not.

#11

Goof Afternoon (here),

Thanks for the correct answer, Forrest.

One more question. How to insert CUDA or OpenCL in Javascript *.js ?

How it works? Is it compiled by the Graphics Card Driver of the client?

Thanks,

Luís Gonçalves

#12

Dear All,

In the examples https://kitware.github.io/vtk-js/examples/index.html are there some example of rendering in the server (Python, with vtk-python) and display in the client (JavaScript)?
Which one?

Thanks,

Luís Gonçalves

#13

Hi Luis,

For your previous post, you currently cannot insert CUDA or OpenCL into javascript files. The only GPU interface from JS that exists is WebGL (and the up-and-coming WebGPU standard).

If you want to do server-side rendering, check out ParaViewWeb. With ParaViewWeb, you have the option to drive vtk.js visualizations with a backend server. @Sebastien_Jourdain can tell you more about it.

#14

For server side rendering you can look at that sample code base. It is the same client but you can either use VTK or ParaView as server.

#15

Good Morning (here),

I changed the web-project-templates-master\vue-vtkjs-pvw-template example. The only file changed is \server\vtkpython\vtk_protocol.py. I send below the vtk_protocol.py file and a .mhd image to test.
The idea is to show and interact with an image .mhd instead of a cone.
The image appears in the OpenGL image in the server but not in the browser (client).

Changed Example

Can someone please give some guide lines to go further?

Thanks,

Luís Gonçalves

#16

interactor.Start() is the main issue. You are basically locking the server in a way that it won’t handle any network request but rather wait for mouse events that will never come.

#17

I was aware of that and Turned off the interactor. Appears black in the client and server instead of the display of the .mhd.

There is something else besides the interactor.

#18

If you are saying that the cone is working fine with the client and that when you swap with your own data it doesn’t work. You must have done something more than just swapping with your own data as the mouse interactor/rendering image delivery should still work.

Maybe your camera is not looking toward your data?

I don’t know…

#19

I only replaced code in “init” and “createVisualization” in “vtk_ptotocol.py”. Perhaps must be changed other code in other functions. Something that works for Cone and not for the .mhd display. The code is in the zip file. You can see and evaluate.

#20

It is working.

I had to change my code in “createVisualization”.