[vtkusers] VTK-JS: How to visualize numbers

Sebastien Jourdain sebastien.jourdain at kitware.com
Tue Dec 5 10:11:12 EST 2017


You understood correctly and you can create 4 x vtkFullScreenRenderWindow
but you will have to provide them with the DOM elements you want them to be
embedded into like the example below:

[...]
<div style="width: 100vw; height: 100vh; position: relative; margin: 0;
padding: 0" class="js-root-container">
</div>
[...]

const rootContainer = document.querySelector('.js-root-container');
const topLeft = vtkFullScreenRenderWindow.newInstance({ rootContainer,
containerStyle: { position: 'absolute', left: '0', top: '0', width: '50%',
height: '50%' }});
const topRight = vtkFullScreenRenderWindow.newInstance({ rootContainer,
containerStyle: { position: 'absolute', right: '0', top: '0', width: '50%',
height: '50%' }});
const bottomLeft = vtkFullScreenRenderWindow.newInstance({ rootContainer,
containerStyle: { position: 'absolute', left: '0', bottom: '0', width:
'50%', height: '50%' }});
const bottomRight = vtkFullScreenRenderWindow.newInstance({ rootContainer,
containerStyle: { position: 'absolute', right: '0', bottom: '0', width:
'50%', height: '50%' }});

Seb

On Tue, Dec 5, 2017 at 6:04 AM, Cristina Oyarzun <
coyarzunlaura at googlemail.com> wrote:

> Hello Sebastian,
>
> first of all sorry for asking so many questions and thank you for your
> help. I am trying to create 4 Render windows as you suggested. If I
> understood it correctly I can change the distribution of the render windows
> in the DOM element using "div" elements and changing their style. Is this
> correct? Apparently I can only set a container to vtkOpenGLRenderWindow and
> not to vtkRenderWindow. On the other side when I change the container for
> the openglRenderWindow I seem to have two times all my actors and
> renderers... Do I really need both vtkOpenGLRenderWindow and
> vtkRenderWindow?
>
> How can I ensure that the 4 RenderWindows will always cover the full
> screen as it was the case by using one vtkFullScreenRenderWindow and 4
> renderer?
>
> Thank you!!
> Cristina
>
>
> On Mon, Dec 4, 2017 at 4:34 PM, Sebastien Jourdain <
> sebastien.jourdain at kitware.com> wrote:
>
>> I've created an issue here: https://github.com/Kitware/vtk-js/issues/445
>>
>> On Mon, Dec 4, 2017 at 8:31 AM, Sebastien Jourdain <
>> sebastien.jourdain at kitware.com> wrote:
>>
>>> Hi Cristina,
>>>
>>> The current implementation is probably not aware of renderers that are
>>> not taking the full size of the renderWindow.
>>> I guess for now, you can create 4 renderWindows inside your DOM element
>>> to recreate the split you were looking for with your renderers.
>>>
>>> Hope that make sense,
>>>
>>> Seb
>>>
>>> PS: In the meantime, we will try to add support for multi-renderer
>>> inside the vtkPixelSpaceCallbackMapper
>>>
>>> On Mon, Dec 4, 2017 at 5:10 AM, Cristina Oyarzun <
>>> coyarzunlaura at googlemail.com> wrote:
>>>
>>>> Hello Sebastian,
>>>>
>>>> thank you very much for your help. I was now able to visualize the
>>>> labels. Their relative location is correct, but they do not appear in the
>>>> correct renderer. They actually appear in a white "renderer" (the canvas I
>>>> guess?), below my render window.
>>>>
>>>> How can I show the labels in a concrete renderer? As I mentioned I have
>>>> four of them, and I need to show different labels in each one of them.
>>>>
>>>> Thank you!!
>>>> Cristina
>>>>
>>>> On Fri, Dec 1, 2017 at 4:20 PM, Sebastien Jourdain <
>>>> sebastien.jourdain at kitware.com> wrote:
>>>>
>>>>> Hi Cristina,
>>>>>
>>>>> You should fill the points in a static manner using the typed array
>>>>> like below:
>>>>>
>>>>> var nbPoints = 10;
>>>>> var coords = new Float32Array(nbPoints * 3);
>>>>>
>>>>> coords[0] = x0;
>>>>> coords[1] = y0;
>>>>> coords[2] = z0;
>>>>> [...]
>>>>> coords[3*n+0] = xn;
>>>>> coords[3*n+1] = yn;
>>>>> coords[3*n+2] = zn;
>>>>>
>>>>> var polydata = vtkPolyData.newInstance();
>>>>> polydata.getPoints().setData(coords, 3);
>>>>>
>>>>> Otherwise your approach with vtkPixelSpaceCallbackMapper seems
>>>>> correct.
>>>>>
>>>>> Seb
>>>>>
>>>>> On Fri, Dec 1, 2017 at 8:01 AM, Cristina Oyarzun <
>>>>> coyarzunlaura at googlemail.com> wrote:
>>>>>
>>>>>> Hello Sebastian,
>>>>>>
>>>>>> I am trying to adapt the example to my current problem. I have a
>>>>>> render window with 4 renderers. Each renderer has several actors and some
>>>>>> of them should get labels next to them.
>>>>>>
>>>>>> My plan now is to create a vtkPointSet, and set this as inputData to
>>>>>> the vtkPixelSpaceCallbackMapper. Is this correct?
>>>>>>
>>>>>> My problem right now is that when I try to set a point in a vtkPoints
>>>>>> the vtkPoints remains empty. Do you have any idea what the problem could
>>>>>> be? Just to test I simplified the problem to this:
>>>>>>
>>>>>> var Points = vtkPoints.newInstance();
>>>>>> Points.setPoint(0, 13, 10, 50);
>>>>>> console.log("Points", Points.getNumberOfPoints());
>>>>>>
>>>>>> And I get always 0.
>>>>>>
>>>>>> Thank you!!
>>>>>> Cristina
>>>>>>
>>>>>>
>>>>>> On Wed, Nov 29, 2017 at 6:59 PM, Sebastien Jourdain <
>>>>>> sebastien.jourdain at kitware.com> wrote:
>>>>>>
>>>>>>> The example you mention is the right approach for what you are
>>>>>>> looking for.
>>>>>>>
>>>>>>> The reason why you don't need vtkFollowers+vtkTextActors, is that
>>>>>>> we have a 2D layer on top of the 3D for which it is trivial to render text
>>>>>>> that is always facing the camera. ;-)
>>>>>>> And we have a mechanism that can convert a set of location in the 3D
>>>>>>> world into the screen space so those label could be printed.
>>>>>>>
>>>>>>> Let us know if you the example is not enough to get you started.
>>>>>>>
>>>>>>> Seb
>>>>>>>
>>>>>>> On Wed, Nov 29, 2017 at 10:51 AM, Cristina Oyarzun via vtkusers <
>>>>>>> vtkusers at vtk.org> wrote:
>>>>>>>
>>>>>>>> Hello,
>>>>>>>>
>>>>>>>> I would like to visualize some numbers next to my actors. I saw an
>>>>>>>> example (Spheres and Labels) where a canvas is created for this purpose. I
>>>>>>>> remember doing this using vtkFollowers in the past. Is there currently some
>>>>>>>> easy way to do this with vtk-js? I mean something similar to vtkFollowers
>>>>>>>> or vtkTextActors?
>>>>>>>>
>>>>>>>> Thank you!
>>>>>>>> Cristina
>>>>>>>>
>>>>>>>>
>>>>>>>> _______________________________________________
>>>>>>>> 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:
>>>>>>>> http://public.kitware.com/mailman/listinfo/vtkusers
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://public.kitware.com/pipermail/vtkusers/attachments/20171205/ceda6ad1/attachment.html>


More information about the vtkusers mailing list