# MIME type glsl

**URL:** https://discourse.vtk.org/t/mime-type-glsl/4770
**Category:** Web
**Created:** [December 2, 2020, 5:24pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770 "2020-12-02T17:24:37Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 2, 2020, 5:24pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/1 "2020-12-02T17:24:37Z")

</div>

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](https://kitware.github.io/vtk-js/docs/tutorial.html)  
It can be found (in 4th) the following slides  
[Slides](https://docs.google.com/presentation/d/1Iwg-u01HGVf1CgC6NbcBD3gm3uHN9WhjU59FSz55TN8/edit?usp=sharing)

There is 5th part of the Course named:

**Advanced VTK.js: WebGL and GLSL**

Where it can be found?

Thanks,

Luis Gonçalves

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [December 2, 2020, 8:56pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/2 "2020-12-02T20:56:35Z")

</div>

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](https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html). (Note there is currently an issue with those instructions that was resolved here: [Problem when trying to setup first VTKJS project](https://discourse.vtk.org/t/problem-when-trying-to-setup-first-vtkjs-project/4761/6)).

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](https://webgl2fundamentals.org/) if you wish to understand more of the underlying WebGL tech and GLSL shader code.

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 3, 2020, 12:41pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/3 "2020-12-03T12:41:05Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [December 3, 2020, 3:45pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/4 "2020-12-03T15:45:26Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 3, 2020, 8:05pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/5 "2020-12-03T20:05:19Z")

</div>

Good night (here) Forrest,

Sorry for the late response.

You can debug yourself in the link below.

[Link to test to vtk.js](https://luisgo.pro/vtkjs.html)

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

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 4, 2020, 2:34pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/6 "2020-12-04T14:34:50Z")

</div>

What is the MIME type for glsl files?

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

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 4, 2020, 3:58pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/7 "2020-12-04T15:58:47Z")

</div>

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](https://kitware.github.io/vtk-js/docs/intro_vtk_as_external_script.html) documentation.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 4, 2020, 4:01pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/8 "2020-12-04T16:01:53Z")

</div>

You can see what we mean by transpiled code with the following [example](https://kitware.github.io/vtk-js/examples/SimpleCone.html) that get transformed into [this code](https://kitware.github.io/vtk-js/examples/SimpleCone/SimpleCone.html) by tools such as webpack.

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 6, 2020, 11:03pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/9 "2020-12-06T23:03:38Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [December 7, 2020, 12:31am UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/10 "2020-12-07T00:31:32Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 7, 2020, 3:41pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/11 "2020-12-07T15:41:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 9, 2020, 8:36am UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/12 "2020-12-09T08:36:57Z")

</div>

Dear All,

In the examples [https://kitware.github.io/vtk-js/examples/index.html](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

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [December 9, 2020, 4:16pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/13 "2020-12-09T16:16:44Z")

</div>

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](https://kitware.github.io/paraviewweb/index.html). With ParaViewWeb, you have the option to drive vtk.js visualizations with a backend server. @Sebastien_Jourdain can tell you more about it.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 11, 2020, 5:04pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/14 "2020-12-11T17:04:13Z")

</div>

For server side rendering you can look at that [sample code base](https://github.com/Kitware/web-project-templates/tree/master/vue-vtkjs-pvw-template). It is the same client but you can either use VTK or ParaView as server.

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 15, 2020, 11:43am UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/15 "2020-12-15T11:43:09Z")

</div>

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](https://luisgo.pro/down/example_change.zip)

Can someone please give some guide lines to go further?

Thanks,

Luís Gonçalves

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 15, 2020, 3:35pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/16 "2020-12-15T15:35:24Z")

</div>

`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.

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 15, 2020, 5:48pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/17 "2020-12-15T17:48:12Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [December 15, 2020, 5:54pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/18 "2020-12-15T17:54:55Z")

</div>

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…

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 15, 2020, 6:45pm UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/19 "2020-12-15T18:45:00Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Luis\_Carlos\_Carneiro](https://discourse.vtk.org/user_avatar/discourse.vtk.org/luis_carlos_carneiro/32/1360_2.png) [@Luis\_Carlos\_Carneiro](https://discourse.vtk.org/u/Luis_Carlos_Carneiro)
#### Post date: [December 16, 2020, 10:23am UTC](https://discourse.vtk.org/t/mime-type-glsl/4770/20 "2020-12-16T10:23:40Z")

</div>

It is working.

I had to change my code in “createVisualization”.
