Generating thick, shadowed lines in three.js to represent layers in a 3D printing visualization

Question

Generating thick, shadowed lines in three.js to represent layers in a 3D printing visualization

I've been exploring ways to add depth to lines in Three.js that can cast shadows and appear as solid objects, but so far I've only achieved thicker lines that lack the 3D look I'm aiming for.

This is for an online 3D printing platform where I need to visualize sliced geometry made up of lines, similar to how software like Cura handles it, as seen in this image:

https://i.sstatic.net/nz6S0.png

Converting these lines into mesh geometry might not be feasible due to the high number of lines in some models, making it too dense.

If anyone has suggestions on achieving the desired effect in three.js or another JavaScript library, I would be very grateful!

javascript graphics three.js 3d

Answer 1

Answer №1

To accomplish this technique, the concept involves rendering a primitive that covers the thick line area. The fragment shader then determines if the fragment is inside or outside the thick line, calculates the 3D position and normal, and either renders it or discards it.

The main idea is to provide polyline geometry to OpenGL for rendering, resulting in thin lines, and utilizing shaders for the rest of the process.

Vertex shader:

This shader simply passes information into the geometry shader.
Geometry shader:

Receives two vertices (defining a line) as input and outputs two triangles (forming a quad) that cover the line's bounding box (enlarged by half its thickness). This is achieved by shifting the endpoints along a vector perpendicular to the line, equal to half the thickness. It is essential to perform this operation on a plane parallel to the camera screen plane, using basis vectors obtained from the camera matrix. Both vertices must also be passed in world and camera coordinates.
Fragment shader:

Here, the fragment shader checks if a point lies within the thick line using the following method:

https://i.sstatic.net/Ytzgm.png

The algorithm computes P', calculates the distance between P and P' - the perpendicular distance between the point and the line. This can be achieved by leveraging the dot product formula:
```
t = dot(P-P0,P1-P0)
 P' = P0 + t*(P1-P0)
 d = |P'-P0|
```
Subsequently, the 3D coordinates (fragment depth) and normals are computed, followed by rendering with directional light or discarding the fragment.

For further reference, you can explore a comprehensive example demonstrating this technique for 2D cubic curves:

Rendering Thick 2D Cubics in GLSL

Answer 2

To accomplish this technique, the concept involves rendering a primitive that covers the thick line area. The fragment shader then determines if the fragment is inside or outside the thick line, calculates the 3D position and normal, and either renders it or discards it.

The main idea is to provide polyline geometry to OpenGL for rendering, resulting in thin lines, and utilizing shaders for the rest of the process.

Vertex shader:

This shader simply passes information into the geometry shader.
Geometry shader:

Receives two vertices (defining a line) as input and outputs two triangles (forming a quad) that cover the line's bounding box (enlarged by half its thickness). This is achieved by shifting the endpoints along a vector perpendicular to the line, equal to half the thickness. It is essential to perform this operation on a plane parallel to the camera screen plane, using basis vectors obtained from the camera matrix. Both vertices must also be passed in world and camera coordinates.
Fragment shader:

Here, the fragment shader checks if a point lies within the thick line using the following method:

https://i.sstatic.net/Ytzgm.png

The algorithm computes P', calculates the distance between P and P' - the perpendicular distance between the point and the line. This can be achieved by leveraging the dot product formula:
```
t = dot(P-P0,P1-P0)
 P' = P0 + t*(P1-P0)
 d = |P'-P0|
```
Subsequently, the 3D coordinates (fragment depth) and normals are computed, followed by rendering with directional light or discarding the fragment.

For further reference, you can explore a comprehensive example demonstrating this technique for 2D cubic curves:

Rendering Thick 2D Cubics in GLSL

Generating thick, shadowed lines in three.js to represent layers in a 3D printing visualization

Answer №1

Similar questions

Oops! There was an issue while trying to serialize the props returned from getServerSideProps in "..." - we apologize for the inconvenience

Issue with Datepicker in Angular Bootstrap: format identifier not being utilized

Guide to putting a new track at the start of a jPlayer playlist

When using .slideup(), the entire ul is removed instead of just the nested li

Three.js does not have the capability to customize shapes with textures or color gradients

Outputting messages to a component with React

What sets the DisplayContext, displaySurface, and displayBuffer apart from each other?

Guide on modifying cube material dynamically in WebGL at runtime

Does Parsley.js offer a way to configure so that the parsley-success field is not added to an input if it should be completely ignored?

How to Position Input Fields over an Image Using CSS

"Can you guide me on how to display a React component in a

What is the best method for submitting an ajax form post when it is dynamically loaded within a bootstrap modal window?

Stop the MP4 video in HTML when the user clicks outside of the modal window

How can I simply show a specific value from an object in Vue?

Modify the text and purpose of the button

Is there a way to prevent SignalR from disconnecting when the settings window is moved?

Introducing the brand new feature: Video Mute Button!

Verify whether an object possesses all the attributes of a class in TypeScript

Can we send a dynamic form using AJAX?

How can you create an array in JavaScript?