Using vtk.js inside an angular project

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Using vtk.js inside an angular project

marf
Hello, I'm trying to use vtk.js and angular together in a project and was
just trying to get a basic setup running for now, but sadly whenever I try
to build my project through
npm run start
it fails with the following errors, could anybody help me? I'm lost and
couldn't really find anything. My guess would be that my webpack config is
incomplete or anything, so I'll add that, too. But even if the error is in
there, my knowledge in that topic is far to vague to figure the issue out
myself.



Error:

WARNING in ./node_modules/vtk.js/Sources/Rendering/OpenGL/Texture/index.js
1293:25-47 "export 'default' (imported as 'ComputeGradientsWorker') was not
found in './ComputeGradients.worker.js'

ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl
Module parse failed: Unexpected token (18:10)
You may need an appropriate loader to handle this file type.
|
=========================================================================*/
|
| attribute vec4 vertexDC;
|
| varying vec3 vertexVCVSOutput;
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataVS.glsl
Module parse failed: Unexpected token (18:10)
You may need an appropriate loader to handle this file type.
|
=========================================================================*/
|
| attribute vec4 vertexMC;
|
| // frag position in VC
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkSphereMapperVS.glsl
Module parse failed: Unexpected token (19:10)
You may need an appropriate loader to handle this file type.
| // this shader implements imposters in OpenGL for Spheres
|
| attribute vec4 vertexMC;
| attribute vec2 offsetMC;
|
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkStickMapperVS.glsl
Module parse failed: Unexpected token (19:10)
You may need an appropriate loader to handle this file type.
| // this shader implements imposters in OpenGL for Sticks
|
| attribute vec4 vertexMC;
| attribute vec3 orientMC;
| attribute vec4 offsetMC;
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataFS.glsl
Module parse failed: Unexpected token (19:8)
You may need an appropriate loader to handle this file type.
| // Template for the polydata mappers fragment shader
|
| uniform int PrimitiveIDOffset;
|
| // VC position of this fragment
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS2.glsl
Module parse failed: Unexpected token (22:8)
You may need an appropriate loader to handle this file type.
| //VTK::Output::Dec
|
| varying vec3 vertexVCVSOutput;
|
| // camera values
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS.glsl
Module parse failed: Unexpected token (22:8)
You may need an appropriate loader to handle this file type.
| //VTK::Output::Dec
|
| varying vec3 vertexVCVSOutput;
|
| // camera values



webpack.config.js (I really didn't change anything in here since I barely
get what the stuff is for... also this website didn't help me either:
https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html )

const webpack = require('webpack');
const path = require('path');

const entry = path.join(__dirname, './Source/index.js');
const sourcePath = path.join(__dirname, './Source');
const outputPath = path.join(__dirname, './dist');

const vtkRules = require('./Utilities/config/rules-vtk.js');
const linterRules = require('./Utilities/config/rules-linter.js');

module.exports = {
  entry,
  output: {
    path: outputPath,
    filename: 'vtk.js',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      { test: entry, loader: 'expose-loader?vtk' },
    ].concat(linterRules, vtkRules),
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
    alias: {
      'vtk.js': __dirname,
    },
  },
};



Thank you guys so much in advance



--
Sent from: http://vtk.1045678.n5.nabble.com/VTK-Users-f1224199.html
_______________________________________________
Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://public.kitware.com/mailman/listinfo/vtkusers
Reply | Threaded
Open this post in threaded view
|

Re: Using vtk.js inside an angular project

Sebastien Jourdain-2
Do you see the difference between the documentation doing this:

var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;
[...]
module: {
rules: [
{ test: entry, loader: "expose-loader?MyWebApp" },
{ test: /\.html$/, loader: 'html-loader' },
].concat(vtkRules),
},


versus what you are doing below?

const vtkRules = require('./Utilities/config/rules-vtk.js');
const linterRules = require('./Utilities/config/rules-linter.js');
[...]
module: {
    rules: [
      { test: entry, loader: 'expose-loader?vtk' },
    ].concat(linterRules, vtkRules),
  },

The big difference in those two is the way the rules are defined to interpret specific files (glsl, WebWorkers...).
In your case (taken from vtk.js webpack) you use rules that expect the vtk.js files to be in ./Sources/** while in the top case we expect to find the vtk.js files under ./node_modules/vtk.js/Sources/** as you are going to use vtk.js as a dependency not as a first class citizen of your project.

HTH,

Seb

On Tue, Jun 26, 2018 at 7:16 AM marf <[hidden email]> wrote:
Hello, I'm trying to use vtk.js and angular together in a project and was
just trying to get a basic setup running for now, but sadly whenever I try
to build my project through
npm run start
it fails with the following errors, could anybody help me? I'm lost and
couldn't really find anything. My guess would be that my webpack config is
incomplete or anything, so I'll add that, too. But even if the error is in
there, my knowledge in that topic is far to vague to figure the issue out
myself.



Error:

WARNING in ./node_modules/vtk.js/Sources/Rendering/OpenGL/Texture/index.js
1293:25-47 "export 'default' (imported as 'ComputeGradientsWorker') was not
found in './ComputeGradients.worker.js'

ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl
Module parse failed: Unexpected token (18:10)
You may need an appropriate loader to handle this file type.
|
=========================================================================*/
|
| attribute vec4 vertexDC;
|
| varying vec3 vertexVCVSOutput;
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataVS.glsl
Module parse failed: Unexpected token (18:10)
You may need an appropriate loader to handle this file type.
|
=========================================================================*/
|
| attribute vec4 vertexMC;
|
| // frag position in VC
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkSphereMapperVS.glsl
Module parse failed: Unexpected token (19:10)
You may need an appropriate loader to handle this file type.
| // this shader implements imposters in OpenGL for Spheres
|
| attribute vec4 vertexMC;
| attribute vec2 offsetMC;
|
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkStickMapperVS.glsl
Module parse failed: Unexpected token (19:10)
You may need an appropriate loader to handle this file type.
| // this shader implements imposters in OpenGL for Sticks
|
| attribute vec4 vertexMC;
| attribute vec3 orientMC;
| attribute vec4 offsetMC;
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkPolyDataFS.glsl
Module parse failed: Unexpected token (19:8)
You may need an appropriate loader to handle this file type.
| // Template for the polydata mappers fragment shader
|
| uniform int PrimitiveIDOffset;
|
| // VC position of this fragment
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS2.glsl
Module parse failed: Unexpected token (22:8)
You may need an appropriate loader to handle this file type.
| //VTK::Output::Dec
|
| varying vec3 vertexVCVSOutput;
|
| // camera values
ERROR in
./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeFS.glsl
Module parse failed: Unexpected token (22:8)
You may need an appropriate loader to handle this file type.
| //VTK::Output::Dec
|
| varying vec3 vertexVCVSOutput;
|
| // camera values



webpack.config.js (I really didn't change anything in here since I barely
get what the stuff is for... also this website didn't help me either:
https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html )

const webpack = require('webpack');
const path = require('path');

const entry = path.join(__dirname, './Source/index.js');
const sourcePath = path.join(__dirname, './Source');
const outputPath = path.join(__dirname, './dist');

const vtkRules = require('./Utilities/config/rules-vtk.js');
const linterRules = require('./Utilities/config/rules-linter.js');

module.exports = {
  entry,
  output: {
    path: outputPath,
    filename: 'vtk.js',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      { test: entry, loader: 'expose-loader?vtk' },
    ].concat(linterRules, vtkRules),
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
    alias: {
      'vtk.js': __dirname,
    },
  },
};



Thank you guys so much in advance



--
Sent from: http://vtk.1045678.n5.nabble.com/VTK-Users-f1224199.html
_______________________________________________
Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://public.kitware.com/mailman/listinfo/vtkusers

_______________________________________________
Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://public.kitware.com/mailman/listinfo/vtkusers
Reply | Threaded
Open this post in threaded view
|

Re: Using vtk.js inside an angular project

marf
Thank you soso much, I had to do some more tweaking but you pointed me in the
exactly right direction. Now everything is kind of working, but I'm
wonderting wether there is any alternative to running it all through
webpack? Since it takes a lot of time to compile for me and I would love to
be a little more flexible.
If there isn't I guess I can still make it work

Marvin



--
Sent from: http://vtk.1045678.n5.nabble.com/VTK-Users-f1224199.html
_______________________________________________
Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://public.kitware.com/mailman/listinfo/vtkusers
Reply | Threaded
Open this post in threaded view
|

Re: Using vtk.js inside an angular project

Sebastien Jourdain-2
You can load the vtk.js library itself since it is a UMD package. 
That way you don't have to built it. The object you will get will be similar to what we do here: https://kitware.github.io/vtk-js/docs/intro_vtk_as_external_script.html

On Wed, Jun 27, 2018 at 5:39 AM marf <[hidden email]> wrote:
Thank you soso much, I had to do some more tweaking but you pointed me in the
exactly right direction. Now everything is kind of working, but I'm
wonderting wether there is any alternative to running it all through
webpack? Since it takes a lot of time to compile for me and I would love to
be a little more flexible.
If there isn't I guess I can still make it work

Marvin



--
Sent from: http://vtk.1045678.n5.nabble.com/VTK-Users-f1224199.html
_______________________________________________
Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://public.kitware.com/mailman/listinfo/vtkusers

_______________________________________________
Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://public.kitware.com/mailman/listinfo/vtkusers
Reply | Threaded
Open this post in threaded view
|

Re: Using vtk.js inside an angular project

marf
Works like a charm, again thank you very very much man



--
Sent from: http://vtk.1045678.n5.nabble.com/VTK-Users-f1224199.html
_______________________________________________
Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://public.kitware.com/mailman/listinfo/vtkusers