[FEATURE] Cross section highlight

[paireks]

Hey Lindsay,

it is WIP for you to try it out, not to merge yet. Generally it allows to color sections a little bit, by leaving a slice just a little bit and coloring this slice black.

https://github.com/xeokit/xeokit-sdk/assets/47977819/4689851c-5581-40d5-b356-93103f83b93f

As we can see in the picture: solution is not perfect, The distance is set to 0.1, can be smaller, but the smaller the number, the more difficult it is to spot these new "section lines".

It also changes slightly existing behaviour, cause rather than slicing at 0.0, I have to leave this tiny slice to color it.

Also it opens some other questions:

• should we ask if someone wants to color these lines? Or maybe we should ask for slice width? Then in the shader we'd have to get that info somehow.
• you can see some objects (such as some furniture in this example) not having same effect. I believe there are some other places I'd have to add such update, to some other shaders, right?

Looking forward to hearing from you.

[xeolabs]

Hi,

Nice, this looks like a good feature.

• should we ask if someone wants to color these lines? Or maybe we should ask for slice width? Then in the shader we'd have to get that info somehow.

Yes, being able to configure color would be good. Since there could be several configurations potentially, including the thickness of the lines, I think it needs to have it's own configuration component, to group those configurations.

It could be used like this:

viewer.scene.crossSections.edgeColor = [1,0,0]; // red
viewer.scene.crossSections.edgeThickness = 3;

where it would be implemented by a component, perhaps called CrossSections. As shown in the snippet above, an instance of that would be a Scene.crossSections property.

This component would be same sort of thing as the SAO component, which manages the ambient shadows effect: https://github.com/xeokit/xeokit-sdk/blob/master/src/viewer/scene/postfx/SAO.js

The CrossSections component could be kept in the same ./src/viewer/scene/postfx directory as the SAO component.

• you can see some objects (such as some furniture in this example) not having same effect. I believe there are some other places I'd have to add such update, to some other shaders, right?

Yes, that's right. There is also this shader: https://github.com/paireks/xeokit-sdk/blob/master/src/viewer/scene/model/dtx/triangles/renderers/DTXTrianglesColorRenderer.js

So, we have one shader for triangles represented as VBOs, which you've modified, and that second shader for triangles represented as data textures. The logic for section plane clipping is identical in both of those shaders.

Another thing we should consider is making the thickness of the line automatically scale with respect to the distance to the user's viewpoint, and perspective projection, so that the thickness is effectively a constant size in pixels. To do that, we'd want to scale the 0.1 value using the perspective transform. I have to think about that for a bit, but that can be a final touch.

eg.

var perspectiveScalingfactor = ... ;

 if (dist > 0.1 * perspectiveScalingFactor) { 
       discard;
 }

[paireks]

Thank you for great explanaition.

I've added new component as you described, the only thing changed is renaming "edges" to "slice", because it is actually a slice we color and display, but it is really subjective, so I can always change to "edges" if you think it fits better there.

Main question I have right now is if we should really copy paste the shader change to all the shaders that acts similiarly to this one already changed (TrianglesColorRenderer in batching :) ). I ask, cause first I thought that maybe there are 1-2 more where it fits, but now I see such clipping operation is almost in all shaders, including almost all folders (vbo_batching / vbo_instancing / dtx, but also e.g. lines shaders). If yes: please have a look at this update of shader, I will then copy-paste if it looks OK. If no: please let me know which shaders shouldn't change.

I had to add this .toPrecision in shader, because values such as 0.0 for thicknes doesn't compile as a shader (cause JS converts it to 0 by default).. but maybe there is a better way?

Default thickness for section should be 0.0, which tries to make sure that existing behaviour of sections won't change.

Current update is still without "perspectiveScalingfactor", and without example in CrossSection plugin documentation on the top of this file.

[paireks]

@xeolabs Hey Lindsay! I tried my best to find out where to add new uniforms myself (I need 2: 1. for section color, 2. for section thickness), but I failed to find proper place. Is it "setSectionPlanesStateUniforms" in VBORenderer.js?

[xeolabs]

@xeolabs Hey Lindsay! I tried my best to find out where to add new uniforms myself (I need 2: 1. for section color, 2. for section thickness), but I failed to find proper place. Is it "setSectionPlanesStateUniforms" in VBORenderer.js?

Hi, that's the place yip

[paireks]

Ok, I finally found some time to come back to this task. Right now there are 2 additional uniforms, one for cross section color, second one for its thickness. It would be really helpful if you could please check if these changes makes sense now. If yes: I will try to copy this change to all other shaders. If not: please feel free to comment what should be changed.

[xeolabs]

@paireks yip that looks good

[paireks]

Finally after copying it all it looks it cuts all the elements! 🥳

Thank you Lindsay for all the answers. Feel free to decide if it's good enough to be merged.

[paireks]

Ok, I found one bug, that newColor should be defined before clipping check. For some reason it didn't affect the test files I was looking at. I will try to fix it today.

[paireks]

Corrected, ready for review.

[xeolabs]

Looks good! Thanks