Hi, i have a dental mesh generated by a dental scanner and i imported this STL file to babylonjs. Now i want draw a “Margin Line Drawing” in a specific point like this videos: VIDEO-1. A important point is, this “Margin” needs to adjustable with some point in line where we can drag to adjuste VIDEO-3
How can i do this “Margin Line Drawing” ? What is the best approache to do this ?
Thank you very much.
I’d do this by using raycasts. And put the raycast results into an array. Then use that array to draw a line or add pickable meshes that you can move after.
You can read more on raycasts here : Raycasts - Babylon.js Documentation
And picking info here PickingInfo - Babylon.js Documentation
2 Likes
Thank you @Cedric for your quick reply.
One question/doubt about the raycast: The goal is save on array the first point when ray colide with mesh, and so on ?
Thank you very much.
yes, save the hit point in an array and create a line with all hitpoints.
Another way of doing it is by using the depth buffer to get the z coordinate. Then, using the mouse pointer x and y values, you can project back the point and get the world coordinates corresponding to these screen coordinates.
Generally we don’t want to use the depth buffer in user code because it means a buffer copy from the GPU to the CPU, and doing this is costly when done each frame. However, in your case, it’s not so a problem because it happens infrequently: when creating/moving a marker AND if the camera has moved since the last marker creation/move.
Here’s my take at it:
https://playground.babylonjs.com/#3M7NYW
Left click to put a marker => If you want to rotate the camera, use SHIFT+left click.
When you close the area by creating a marker near the first one, the lines become lighter and you switch to phase 2.
In phase 2, you can move the markers by drag&drop.
Use Enter to restart.
Regarding the code, it should not be difficult to understand. Feel free to ask questions if needed.
You can disable the markers and the lines from being tested against the zbuffer and always remain visible by setting doDepthTestingForMaterials to false.
The advantage of using the depth buffer over the ray casting method is that you can implement what we see in the video: showing the “slop” of the geometry under the cursor position.
It was fun to do, but there are room for improvements, notably using spline or bezier curves instead of straight lines - in addition to the slope preview as described above. It’s left as an exercise for the reader 
5 Likes
Hi @Evgeni_Popov thank you very much! I tried this solution and it´s work on Firefox, but if i “design” the lines many times when i refresh the page the point and the lines doesn´t render but i can get the logs. Can be GPU ( NVIDIA Geforce MX250) limitations of my Laptop ? I ask this because when i use the Chrome my GPU is on 99%.
Thank you very much!
Hard to tell without the logs… Do you refresh by hitting “Enter” or by refreshing the whole page (reload)?
Hi @Evgeni_Popov when i sended the last message i was testing in my secondary screen but if i use in my laptop screen works well
Just for curiosity you know or suspect what is the reazon why doesn´t work on secondary screen ?
About your question, i did the refresh with “Enter” key and i refresh all page and in secondary screen and doesn´t work, but as i said in laptop screen or others laptops works well
Thank you very much.
No idea why it wouldn’t work on a secondary screen…