kitware / vtk-js Goto Github PK
View Code? Open in Web Editor NEWVisualization Toolkit for the Web
Home Page: https://kitware.github.io/vtk-js/
License: BSD 3-Clause "New" or "Revised" License
Visualization Toolkit for the Web
Home Page: https://kitware.github.io/vtk-js/
License: BSD 3-Clause "New" or "Revised" License
I think when the cursor is out of the viewer (renderwindow), it should considers that the mouse button have been release, is it right ? Then, if the mouse goes back into the render window, user has to click again to make a rotation.
In looking through the docs, all the examples I could find use the FullScreenRenderWindow
. I'm trying to render to a specific element in the DOM, but couldn't easily find such an example. Does one exist? If not, how do I do that?
vtk-js does not work in ms edge
I read the docs and execute $ npm install kw-web-suite --save-dev.But what should I do later?
You have three available enum values via SetRepresentation:
Surface, Points, Wireframe.
e.g.. actor.getProperty().setRepresentation(rep_value);
How would I turn on edges in surface representation?
I use the the basic example in : intro_vtk_as_es6_dependency.html
The cone displays perfectly.
Then I replaced the index.js by the example from HttpDataSetReader in:
https://kitware.github.io/vtk-js/examples/HttpDataSetReader.html
I just replace the file path : (${__BASE_PATH__}/data/cow.vtp
) by a path accessible to the webpack-dex-server in "dist" directory.
reader.setUrl(`data/cow2/cow.vtp/index.json`).then(() => {
reader.loadData().then(() => {
renderer.resetCamera();
renderWindow.render();
});
});
The file is found but an error is thrown:
MyWebApp.js:30017 Uncaught (in promise) TypeError: GEOMETRY_ARRAYS[dataset.vtkClass] is not a function
at processDataSet (MyWebApp.js:30017)
at MyWebApp.js:30093
at <anonymous>
In the debuger of Chrome I found that 'dataset' has no attribute vtkClass. What I understand is that it should resolve to "vtkPolyData" this is why GEOMETRY_ARRAYS[dataset.vtkClass] is undefined and ... not a function.
The error is generated in
"xxxx\Sources\nodeExamples\vtkjst3\node_modules\vtk.js\Sources\IO\Core\HttpDataSetReader\index.js" at line 72 for vtk.js version 2.18.6
I tried a similar example with the same data last november and it works well.
Perhaps I am missing something very obvious.
I am very new in development with javascript and client/server applications.
node v7.9.0
npm v3.10.9
"vtk.js": "^2.18.6"
kw-web-suite": "^2.2.1"
Any help will be appreciated.
Thanks
I tried to access constants used in LandmarkTransform but without success. (Shame on me, I coded this class...). But I don't how to use 'Mode'. For information, I used the generated vtkjs lib.
const transform = vtkLandmarkTransform.newInstance();
transform.setMode(Mode.RIGID_BODY);
transform.setSourceLandmark(sourceLandmarks);
transform.setTargetLandmark(targetLandmark);
transform.update();
First of all, this is awesome, congrats to put vtk at web scale with this project!
I am a half way developing a classic Itk4-Vtk7-Qt5 app, but I am tempted to drop Qt it and do it using vtk.js and electron ( or even without electron).
ITK provides itkImageToVTKImageFilter for converting itk images to vtk, and you already have that.
I am also using a vtkGraphLayoutView, and vtkImagePlaneWidget ( derived from vtkPolyDataSourceWidget). Are they currently supported in vtk.js?
Thanks, and sorry if it would be better to ask this in the vtk-users (or dev?) mail list.
My OBJ file lives at a URL that does not end in ".obj", and this is causing the reader to append "index.obj" to the end of the URL. This was unexpected behavior to me, is there a way to instruct the reader not to add this to the URL?
As noticed in the MR girder/girder#1951, the latest vtk-js version faces a regression when dragging the mouse over a dicom image with the dicom_viewer plugin in girder.
We get the following error:
Uncaught TypeError: publicAPI.superHandleMouseMove is not a function
at Object.publicAPI.handleAnimation (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:38098:15)
at Object.<anonymous> (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:39450:44)
at http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:2555:35
at Array.forEach (native)
at Object.publicAPI.(anonymous function) [as invokeAnimation] (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:2554:15)
at Object.publicAPI.animationEvent (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:40709:17)
at publicAPI.handleAnimation (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:40541:15)
publicAPI.handleAnimation @ index.js:83
(anonymous) @ index.js:81
(anonymous) @ macro.js:577
publicAPI.(anonymous function) @ macro.js:577
publicAPI.animationEvent @ index.js:424
publicAPI.handleAnimation @ index.js:255
I am currently trying to make an Electron app which will visualize data with vtk.js. But I have encountered a problem with importing vtk.js into my app. The exact error I am receiving, when using require('vtk.js')
, is this:
D:\electron-quick-start\node_modules\vtk.js\Sources\index.js:1
(function (exports, require, module, __filename, __dirname, process, global) { import Common from './Common';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:528:28)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (D:\electron-quick-start\main.js:10:13)
at Module._compile (module.js:556:32)
So my question is - is it possible to use Electron and vtk.js together? I've tried using require('vtk')
(Error: Cannot find module 'vtk'
), import * from 'vtk'
(SyntaxError: Unexpected token import
) but nothing seems to work. I am able to run an Electron app and create Web app with vtk.js using Webpack so I don't think that there's something wrong with either of them.
I have a simple visualization. When switching to wireframe representation it renders one image but when I e.g. rotate the view the object disappears. Looking at the Java Script console I can see that the vtkPolyDataFS.glsl
shader can not be compiled with the following error:
': ERROR: 0:101: 'texture1' : undeclared identifier
ERROR: 0:101: 'tcoordVCVSOutput' : undeclared identifier
ERROR: 0:101: 'st' : field selection requires structure or vector on left hand side
ERROR: 0:101: 'texture2D' : no matching overloaded function found
ERROR: 0:101: '=' : cannot convert from 'const float' to 'highp 4-component vector of float'
Do you have an idea what's wrong here? You can find the source of the visualization here. Thanks!
Would this be difficult to achieve?
I try to move zSlice of a vtkImageMapper but without success.
Here's the code I use :
mapper.setInputData(data);
mapper.setUseCustomExtents(true);
const extent = data.getExtent();
mapper.setCustomDisplayExtent(extent[0], extent[1], extent[2], extent[3]);
mapper.setZSlice(50);
Instead of display a slice, the camera zoom on the first slice of the volume.
Did I miss anything to make it works well ?
For info : Used data is "${BASE_PATH}/data/volume/LIDC2.vti"
Here is the slice 0
And here the slice 50 I tried to change but it makes just a zoom
When I try to create a vtkActor2D new instance, it crashed.
The constructor of the vtkActor2D set two values to a vtkCoordinate instance :
model.positionCoordinate2 = vtkCoordinate.newInstance();
model.positionCoordinate2.setCoordinateSystemToNormalizedViewport();
model.positionCoordinate2.setValue(0.5, 0.5);
But the value setter of the vtkCoordinate has to take 3 values :
macro.setGetArray(publicAPI, model, [
'value',
], 3);
So if it takes a different number, it crashes. I think that it has to depend on the coordinateSystem property of the vtkCoordinate, hasn't it ? Or did I miss anything ?
Is it possible to fire events e.g. when the user clicked on an actor or the mouse is over an actor?
This is possible in vtk but not in vtk-js?
a few instances of this one is a method name, definitely supposed to be ensure right?
https://github.com/Kitware/vtk-js/search?utf8=%E2%9C%93&q=insure
This is similar to issue 232, but I'm running into an issue scrolling through the slices with InteractorStyleImage. Using this example as a guide but loading the ‘LIDC2.vti’ example volume, I can get various slices to show up on loading with mapper.setZSclice()
, but am then unable to scroll through. Here's a bit of my setup code:
const mapper = vtkImageMapper.newInstance();
const actor = vtkImageSlice.newInstance();
actor.setMapper(mapper);
const iStyle = vtkInteractorStyleImage.newInstance();
iStyle.setInteractionMode('IMAGE_SLICING');
renderWindow.getInteractor().setInteractorStyle(iStyle);
I'm on a mac, and as I understand it, 'ctl+drag' should allow me to scroll through the slices in the volume, but ctl+drag doesn't seem to do anything, while command+drag fires a window/level event. If I switch InteractionMode to 'IMAGE3D' and press shit+drag I get the expected rotation event, so I'm unsure if its an issue with my setup or something within the code itself. It seems to appear across all browsers as well.
Is it possible to use clip, slice, contour and streamline filters with the current implementation? What will I have to do if not?
I don't know where I have to inform that with the current vtkjs version, tests failed. I think it's the PointSource test.
When I run an example, I get the following error:
Error: Cannot find module '../config/webpack.loaders.js'
It seems like there's a compatibility issue with the current version of Webpack.
running the example: https://kitware.github.io/vtk-js/examples/Manipulators.html#Source
When changing a setting I get:
ReferenceError: vtkDebugMacro is not defined
/vtk-js/examples/Manipulators/Manipulators.js:1
How can I activate zoom via mousewheel?
This would be very helpful for those who are not already familiar with VTK. It could go in the "Overview" section and would explain things like what are mappers, actors, renderers, render windows, interactors, etc. Explaining these things could help open up vtk.js to a wider audience.
I have get the vtk volume render data by the vtk software,but i donnot konw how to use the vtk.js library to show it in the web broswer,and how the .gz data is generate is generated
Will there be support for other vtk files such as .vtu
, .vtp
or .vtm
?
It does not seem possible currently to have separate focal point from center of rotation. This might be nice to have eventually.
I have converted this unstructured grid file with vtkDataConverter
(passing the -e
option) to the following vtk-js format file
I then try to read it:
const reader = vtkHttpDataSetReader.newInstance({ enableArray: true, fetchGzip: true });
reader.setUrl(`./data/square_1e2_neumann_pcs_0_ts_1_t_1.000000.vtu`).then((reader, dataset) => {
console.log('Metadata loaded with the geometry', dataset);
reader.loadData().then((reader, dataset) =>{
reader.getArrays().forEach(array => {
console.log('-', array.name, array.location, ':', array.enable);
});
});
});
But unfortunately there are no point arrays defined (no console output and I also cannot map scalars to colors with one of the arrays). The index.json looks valid. Do you have any ideas what's wrong here?
Also reader.listArrays
as stated in docs seems not to be a valid variable or function.
Hello,
I'm using two differents vtkPoints and I had to get points one by one from each. But when I get the point i on the first vtkPoints and then get a point on the second vtkPoints, then my first getting point has the same values as the second one. But the two vtkPoints are two differents objects.
For example :
data1 contains point (0, 0, 0)
data 2 contains point (1, 1, 1)
let p1 = data1.getPoint(0);
console.log(p1) will display (0, 0, 0)
let p2 = data2.getPoint(0);
console.log(p2) will display (1, 1, 1)
console.log(p1) will display (1, 1, 1)
The trick to do this is to make a deep copy of the output of getPoint() function but it's heavy.
Am I doing anything wrong or is it a bug ?
It would be nice to have this feature working on the mapper.
I tried install vtk-js, vtk.js (which documentation says ) but neither is found.
from https://kitware.github.io/vtk-js it says to install using
npm install vtk.js
but that package does not exist.
Using the current master, I'm seeing 14 failures when running tests on my local machine. Is anyone else seeing this?
I have attached the test summary output in case it helps, renamed so it could be uploaded here.
I'm writting a test for createCubeFromRaw and I need to use 6 image data to create a skybox. For my own test, I put the files into Data folder and it worked well but I saw that this folder is on the .gitignore and I can't push it into vtkjs.
I tried to move it into my test folder but without success. Files are not found.
const path = ``${__BASE_PATH__}/Data/skybox/mountains/``;
const path = ``${__BASE_PATH__}/Sources/Rendering/OpenGL/Texture/test/skybox/mountains/px.vti``;
Where can I put the files in order to push it into vtkjs ?
These comments are contextless (e.g. what is supposed to be fixed) and only useful for people who wrote the code. I would suggest that pull requests with FIXME's should not be accepted. Adding the ESLint Rule no-warning-comments
would alleviate this in the future.
The status quo is that these symbols (e.g. vtkErrorMacro
) are string-replaced via a loader that runs before the babel loader during the build process, which was probably done to mimic the preprocessor behavior in C++. This seems unnecessary, though, since we can bind or configure those methods at runtime easily and skip the global find/replace of strings. This forces downstream users wishing to build vtkjs with webpack to replicate these loader rules in their own configurations.
Generally speaking, I think in a javascript environment, we should probably try to avoid mimicking the behavior of the C++ preprocessor since it's counterintuitive to JS developers and breaks with the normal mechanics of the module system.
In a downstream project that builds against vtk-js, I'm seeing the following error:
ERROR in ./plugins/vtk_viewer/web_client/views/SurfaceView.js
Module not found: Error: Can't resolve 'string-replace-loader' in '/Users/zach/dev/girder'
It looks like string-replace-loader is supposed to be brought in transitively via kw-web-suite, however kw-web-suite is only listed in the devDependencies, not the dependencies.
Things required for build time should be listed in dependencies; devDependencies is for things that are required for development of vtk-js itself.
Not sure if it makes sense for vtk.js but please consider the use of glTF:
https://en.wikipedia.org/wiki/GlTF
https://www.khronos.org/gltf
https://github.com/KhronosGroup/glTF
it should help to load and process 3d data faster
actor.RotateX(33)
VM6164:12 vtkProp3D::RotateX - NOT IMPLEMENTED
is there another way?
Points a lot to Documentation/dev/git
which doesn't exist anymore? @jourdain
I'm trying to load a file and display rgb colors to points by using scalars (as this example : http://www.vtk.org/Wiki/VTK/Examples/Cxx/PolyData/ColoredPoints).
When I tried to set scalars or just active scalars to the polydata's point data, the mesh dissapears. The mesh exists, the array exists too.
Did I miss anything ?
reader.loadData().then(() => {
const mesh = reader.getOutputData();
if(mesh.getPointData().getNumberOfArrays() !== 0)
{
const rgbArray = mesh.getPointData().getArrayByIndex(0);
rgbArray.setName('Colors');
mesh.getPointData().setScalars(rgbArray);
mesh.getPointData().setActiveScalars('Colors');
}
mapper.setInputData(mesh);
renderer.resetCamera();
renderWindow.render();
});
Thanks
Go to http://kitware.github.io/vtk-js/examples/Filter/index.html
Open the developer console
Move the slider
Is it possible to embed (multiple) vtk-js visualizations into a single web page? If yes, how to do that?
We would like to replace static images in the documentation of our simulation software with interactive vtk-js visualizations. See this page for an example.
The old image texture seems to stick around for ever.
how can I set the renderwindow to a div in my DOM?
How do we zoom in/out of on canvas with the mouse wheel scrolling?
I realize you may not have implemented this yet but I want to at least raise an issue so you can put this on your radar to implement.
What should I do when I am finished?
I didn't know how to use it even though I read the document.
How can I show it on a web page as an example?
Do I need to use webpack?
I don't know which commit does that but adding a texture (as an image) to an actor doesn't work anymore as we can see in the elevation example : https://kitware.github.io/vtk-js/examples/ElevationReader.html
ESLint complains about this line in vtkCalculator https://github.com/Kitware/vtk-js/blob/master/Sources/Filters/General/Calculator/index.js#L24.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.