Search code examples
webglxtk

draw outlines to a volume in webgl (xtk)

i want to achieve that the user can go through the slices of a volume but to guarantee a little bit more of orientation i'd like to draw the outlines of a cube which represent the dimensions of a volume.

what i think i need to do:

1) get the dimensions of the volume

2) start drawing lines from e.g. [0,0,0] to [0,1,0] from [0,1,0] to [1,1,0] and from [1,1,0] to [1,0,0] and back again to [0,0,0] and so on...

is there an easy way to draw a line in xtk? like using something similar like the sphere-constructor here?

example (black outlines):

cube

thanks in advance

Solution

  • In X.slice, we create the borders of the current slice like this.

    var borders = new X.object();
borders._points.add(point0.x, point0.y, point0.z); // 0
borders._points.add(point1.x, point1.y, point1.z); // 1
borders._points.add(point1.x, point1.y, point1.z); // 1
borders._points.add(point4.x, point4.y, point4.z); // 4
borders._points.add(point4.x, point4.y, point4.z); // 4
borders._points.add(point2.x, point2.y, point2.z); // 2
borders._points.add(point2.x, point2.y, point2.z); // 2
borders._points.add(point0.x, point0.y, point0.z); // 0
borders._normals.add(0, 0, 0);
borders._normals.add(0, 0, 0);
borders._normals.add(0, 0, 0);
borders._normals.add(0, 0, 0);
borders._normals.add(0, 0, 0);
borders._normals.add(0, 0, 0);
borders._normals.add(0, 0, 0);
borders._normals.add(0, 0, 0);
borders._color = [1, 0, 0];

# set the drawing type to lines
borders._type = X.displayable.types.LINES;

borders._linewidth = 2;

    This is an example of internal usage right now but it should be possible to do the same with the public API.

    Ah I just see that the type getter/setter does not exist yet. We need to create it to enable setting the type externally. So I just created an Issue for that https://github.com/xtk/X/issues/62

    Feel free to contribute it :) Should be easy :)