is possible to add two or more different actor in a scene? the actors could be of different rendering types.
is it possible to pan a volume image? If so, how?
to implement a 3D MPR, should it use vtkReslice or just adjust the cameras in the 3 render windows
in user interaction, is it possible to select and control the position and rotation of individual actor?
if 4 is ok, is it possible to implement user interaction customized way without widget and interactors, for example, I want to have toolbar with ‘select’, ‘pan’, ‘rotation’ buttons, and perform the corresponding operations on selected actors. for example, to rotate a selected actor, the implementation logic could be simply as
A. from mouse move event, get delta_x and delta_y
B. delta_x and delta_y, get rotation matrix r_mat
C. apply r_mat to the selected actor or actors
step A is straightforward, step B requires some algorithm, is there one available?. for step C is there APIs provided by vtk.js?
this can be done several different ways: vtkReslice, volume clipping, or camera. See this example for a camera-based approach
that would require a widget to do so. There is no such widget yet, but it can be implemented.
This is doable, as we can apply individual transforms to an actor. Step B is similar to the trackball camera logic in vtk.js. Step C is applying the user matrix to an actor.
Thanks Forrest. There are a lot to digest. I’ll study further.
As a discussion, I would argue a functional based user interaction API would much easier to use than the “pre-defined” widget-interactor-observer system in a customized 3D web apps. The reasons are:
Most likely, the app will have its own toolbar for 3D operations and status, which may sit in a completely different div block, and have nothing to do with the render window. The developer could still easily connects the toolbar with the render window via global or messaging system in all modern web archtechs (react and vue).
MVC sounds great but in practice it’s too often ends with very strict and abstracted template systems. It’s my view that a reasonable programmer knows how to separate data and its presentation methods without resorting to templates/inheritance.
A general programming model for user interaction could be simply done in the following two steps
3-1. user would register an mouse event listener to handle all mouse interactions or based by the click button and type (single double)
3-2. inside event listener, use would analyze the event type and component status and do any or the combination of the following operations
a) select an actor
[list_of_selected_actors] = render.select_actor( x,y, color=option)
b) do translation on an actor or the camera
t_mat = actor.xy_to_tmat( dx,dy )
actor.apply(t_mat)
t_mat = camera.xy_to_tmat( dx,dy )
camera.apply(t_mat)
c) do rotation on an actor or the camera
r_mat = actor.xy_to_rmat( dx,dy )
actor.apply(r_mat)
r_mat= camera.xy_to_rmat( dx,dy)
camera.apply(r_mat)
d) change the properties of an actor (e.g., color, size, scaling, actor props, etc.)
this would be specific to the type of the actor
e) allowing actors to be grouped into a new actor
actor_grouped = actor1.add( actor2 )
f) allowing actors to be decoupled
[list of actors] = actor.grouped.decouple()
As you can see, with only a few (11) simple and clear APIs, a developer can do almost all desired user interaction easily and freely.
Indeed, you are absolutely right in that apps may have their own flavor of interaction. vtk.js doesn’t limit you to a set of pre-defined interactions; rather, we provide commonly used interactions as an option. If you need to have fine-grained control over every aspect of interaction, you can either create your own InteractorStyle, or hook into the event system directly and manipulate the actors and/or camera in whichever way suits you the most.
The APIs you are proposing can be just as easily done on at an application-level layer. It all depends on how you want to interact with the components of vtk.js.
I tried to figure it out but the progress has been slow. So I guess asking questions again here is perhaps a better way. Really appreciate all the help and answers.
First, I’m trying to understand what are interactor, interactorStyle, manipulator, widgets, observer, how are they typically used?
For my needs, I would like to overwrite the default interactor created by vtkGenericRenderWindow. which seems to load TrackballCamera interactorStyle as I read from the source code.
model.interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance())
The TrackballCamera doesn’t allow to click on the right button to pan the volume, so I would like to add this as an example how to do a cutomized interactor. How should I do it properly.
You can get the interactor from the GenericRenderWindow, and then set the interactor style to whatever you want: genericRenderWindow.getInteractor().setInteractorStyle(...)