Actor's property: LineWidth

[laurennlam]

In COre/Property, there's an attribute LineWidth but when I tried to change it, it doesn't change the display.
Does it really use for the rendering ?

[jourdain]

It is but I think only Firefox support it for WebGL. You can find a blog post from Aashish on that topic for GeoJS.

[agirault]

webGL and webgl2 do not support line width:

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/lineWidth

The webgl spec, based on the OpenGL ES 2.0/3.0 specs points out that the minimum and maximum width for a line is implementation defined. The maximum minimum width is allowed to be 1.0. The minimum maximum width is also allowed to be 1.0. Because of these implementation defined limits it is not recommended to use line widths other than 1.0 since there is no guarantee any user's browser will display any other width.

As of January 2017 most implementations of WebGL only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits.

We should remove that API, was propably imported from vtk c++ without being tested.

Drawing triangles would be an option: https://mattdesl.svbtle.com/drawing-lines-is-hard

cc: @martinken

[martinken]

We kept the attribute in C++ and use triangles as needed. We can do the same for Webgl2 should a customer want it.

[laurennlam]

Thanks for these informations. Indeed, a customer wants it. It would be greate if anyone has some time to work on it or I will take a look when I have more time.
Thanks.

[laurennlam]

Did anyone have some time to look at it ?

[martinken]

No customer pull yet

[mix3d]

definitely interested in line width drawing for 2d widgets on the 3d view.

Can we cheat and draw directly to the canvas instead, or would that be bypassing most of the VTK architecture?

[danmindru]

Hi there @martinken @jourdain,
We'd also be interested in seeing this implemented. Have you by chance started working on it?

[martinken]

linewidth is difficult to implement properly so not super high on the list.

But it is very easy to implement poorly so that could be done very quickly. Just make the call to gl.lineWidth(width) in the mapper. Trick is hardware is not required to support anything other than a width of 1.0 so on some systems it will work, on others it will not.

[jrorschach]

linewidth is difficult to implement properly so not super high on the list.

But it is very easy to implement poorly so that could be done very quickly. Just make the call to gl.lineWidth(width) in the mapper. Trick is hardware is not required to support anything other than a width of 1.0 so on some systems it will work, on others it will not.

Also looking for adjusting lineWidth's. @martinken can you be more specific how your workaround shall be used with vtk.js?

... because I tried mapper.gl.lineWidth(width) mapper.lineWidth(width) but this did not work for me. I am by the way a complete beginner in js and vtk.js

[juan-crypto-bot]

Hello!
I have this code:
const renderWindow = vtkRenderWindow.newInstance();

const renderer = vtkRenderer.newInstance();
renderer.setBackground([242 / 255, 246 / 255, 254 / 255]);

const mapper = vtkImageSliceMapper.newInstance();
const actor = vtkImageSlice.newInstance();

const data = vtkImageData.newInstance();
const img = new Image();
img.src = imgSrc;
img.onload = async () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  const imageDataArray = new Uint8Array(imageData.data);
  const dataArray = vtkDataArray.newInstance({
    numberOfComponents: 4,
    values: imageDataArray
  });

  data.setDimensions(img.width, img.height, 1);
  data.setSpacing(1, 1, 1);
  data.setOrigin(0, 0, 0);
  data.getPointData().setScalars(dataArray);

  mapper.setInputData(data);
  actor.setMapper(mapper);
  actor.rotateX(180);

  const openGLRenderWindow = vtkOpenGLRenderWindow.newInstance();
  renderWindow.addView(openGLRenderWindow);
  openGLRenderWindow.setContainer(vtkContainerRef.current);

  const interactor = vtkRenderWindowInteractor.newInstance();
  interactor.setView(openGLRenderWindow);
  interactor.initialize();
  interactor.setContainer(vtkContainerRef.current);

  openGLRenderWindow.setSize(
    vtkContainerRef.current.clientWidth,
    vtkContainerRef.current.clientHeight
  );

  renderer.addViewProp(actor);
  renderWindow.addRenderer(renderer);

  renderer.resetCamera();
  renderWindow.render();

  const widgetManagerForms = vtkWidgetManager.newInstance()
  widgetManagerForms.setRenderer(renderer)
  widgetManagerForms.disablePicking()
  setWidgetsManagerForms(widgetManagerForms)

  const widgetManagerArrow = vtkWidgetManager.newInstance()
  widgetManagerArrow.setRenderer(renderer)
  widgetManagerArrow.disablePicking()
  setWidgetsManagerArrow(widgetManagerArrow)

  const widgetManagerLabel = vtkWidgetManager.newInstance()
  widgetManagerLabel.setRenderer(renderer)
  widgetManagerLabel.disablePicking()
  setWidgetsManagerLabel(widgetManagerLabel)

  setRenderW(renderWindow);
  setRend(renderer);

  vtk2DRefs.current = {
    widgetManagerForms,
    widgetManagerArrow,
    widgetManagerLabel,
    renderWindow,
    mapper,
    actor,
    renderer,
    openGLRenderWindow,
    interactor,
  };
}
img.onerror = (error) => {
  console.error("Error al cargar la imagen:", error);
};

and this function to add a Ellipsewidgets:
const AddCircle = () => {
const widget = vtkEllipseWidget.newInstance({
modifierBehavior: {
None: {
[BehaviorCategory.PLACEMENT]: ShapeBehavior[BehaviorCategory.PLACEMENT].CLICK_AND_DRAG,
[BehaviorCategory.POINTS]: ShapeBehavior[BehaviorCategory.POINTS].DIAMETER,
[BehaviorCategory.RATIO]: ShapeBehavior[BehaviorCategory.RATIO].RADIUS
}
}
})
const handle = widgetManagerForms.addWidget(widget, ViewTypes.YZ_PLANE)
widgetManagerForms.grabFocus(widget)

handle.setActiveColor(0, 0)

handle.getRepresentations()[0].getMapper().setScalarVisibility(false)
handle.getRepresentations()[0].getActor().getProperty().setColor(8 / 255, 29 / 255, 73 / 255)
handle.getRepresentations()[1].getMapper().setScalarVisibility(false)
handle.getRepresentations()[1].getActor().getProperty().setColor(8 / 255, 29 / 255, 73 / 255)

handle.getRepresentations()[1].setDrawBorder(true)
handle.getRepresentations()[1].setDrawFace(false)
handle.getRepresentations()[1].setOpacity(1)

handle.getRepresentations()[1].getActor().getProperty().setLineWidth(2)

handle.onStartInteractionEvent(() => {
  setCurrentHandle(handle)
})

recordAction({ type: 'add', widget: handle });

}
but handle.getRepresentations()[1].getActor().getProperty().setLineWidth(2) doesnt work, the lineWidth is 1 (default)