Steps for making a Three.js 3D line collection with specified width and thickness

Question

Steps for making a Three.js 3D line collection with specified width and thickness

Is there a way to create a Three.js 3D line series with customizable width and thickness?

Although the Three.js line object does have a linewidth attribute, it is not universally supported across all browsers and platforms in WebGL.

Here is how you can set the linewidth in Three.js:

    var material = new THREE.LineBasicMaterial({
        color: 0xff0000,
        linewidth: 5
    });

The previous Three.js ribbon object, which had width, has recently been eliminated.

When it comes to the Three.js tube object, it can generate 3D extrusions, but the lines do not go through the control points due to their Bezier-based nature.

Does anyone know of a method to draw a line series (such as polylines or plotlines) in Three.js with user-defined 'bulk' like width, thickness, or radius?

This question might be a rephrasing of the following question: Extruding a graph in three.js.

If there isn't an existing solution, I am open to collaborating on creating a simple function to address this question.

However, it would be great if someone could point out an already established method...

One possible solution proposed by WestLangley is to have the polyline maintain a constant pixel width, similar to what the Three.js canvas renderer currently offers.

Check out a comparison of the two renderers here:

Canvas and WebGL Lines Compared via GitHub Pages

Canvas and WebGL Lines Compared via jsFiddle

An ideal solution would allow for specifying linewidth and achieving consistent results across both renderers.

Furthermore, there are alternative approaches to 3D lines that involve realistic physical constructs, complete with shadows and interactivity. These avenues also warrant exploration.

Here are demos showcasing lines composed of multiple meshes on GitHub Pages:

Sphere and Cylinder Polylines

An intricate solution where each joint consists of a full sphere.

Cubes Polylines

It's likely that creating these as seamless single meshes will present complex challenges. In the meantime, here is a link to a partial visualization of wide, tall 3D lines:

3D Box Line on jsFiddle

The aim is to simplify the coding process "for dummies." As a result, creating a 3D line should be as straightforward and familiar as adding a sphere or cube. Geometry + material = mesh > scene. The geometry should be efficient in terms of vertices and faces creation.

The lines should possess both width and height, with the Y direction always pointing upward. The demo showcases this, although it does not tackle mitering corners seamlessly...

javascript three.js geometry lines

Answer 1

Answer №1

After a thorough analysis, I have developed a potential solution that seems to meet the majority of your specified criteria:

http://codepen.io/smithjones/pen/BFRel?editors=001

The idea behind this solution is quite straightforward: display any given geometry in "wireframe mode" and then apply a full-screen GLSL shader to add thickness to the wireframe lines.

This shader was influenced by the blur shaders found in the ThreeJS distribution, which essentially replicate the image multiple times along the horizontal and vertical axes. I automated this process and allowed users to define the number of copies, ensuring each copy was offset by one pixel.

While my demonstration utilized a 3D cube mesh (with an orthographic camera), converting it to a polyline should be relatively simple.

The crux of this solution lies in the custom shader (specifically the fragment shader section):

    uniform sampler2D tDiffuse;
    uniform int edgeWidth;
    uniform int diagOffset;
    uniform float totalWidth;
    uniform float totalHeight;
    const int MAX_LINE_WIDTH = 30; // Necessary due to GLSL limitations on for loops
    varying vec2 vUv;

    void main() {
        int offset = int( floor(float(edgeWidth) / float(2) + 0.5) );
        vec4 color = vec4( 0.0, 0.0, 0.0, 0.0);

        // Horizontal line copies first
        for (int i = 0; i < MAX_LINE_WIDTH; i++) {
            float uvFactor = (float(1) / totalWidth);
            float newUvX = vUv.x + float(i - offset) * uvFactor;
            float newUvY = vUv.y + (float(i - offset) * float(diagOffset) ) * uvFactor;  
            color = max(color, texture2D( tDiffuse, vec2( newUvX,  newUvY  ) ));    
            if(i == edgeWidth) break; 
        }

        // Vertical line copies
        for (int i = 0; i < MAX_LINE_WIDTH; i++) {
            float uvFactor = (float(1) / totalHeight);
            float newUvX = vUv.x + (float(i - offset) * float(-diagOffset) ) * uvFactor; 
            float newUvY = vUv.y + float(i - offset) * uvFactor;
            color = max(color, texture2D( tDiffuse, vec2( newUvX, newUvY ) ));  
            if(i == edgeWidth) break;
        }

        gl_FragColor = color;
    }

Advantages:

No additional geometry required beyond the line vertices
User-defined line thickness
Full-screen shader is generally gentle on the GPU
Can be fully integrated within the WebGL canvas

Disadvantages:

Line thickness is precise on horizontal and vertical edges but slightly off on diagonal edges due to the algorithm used. This is a limitation of the solution, although it is minimally noticeable for low line thicknesses and complex geometries.
Gaps may appear at joints for thicker lines. Testing the Codepen demo will illustrate this issue. I attempted to address this by introducing a second "diagonal pass," but it became complex and may only affect higher line thicknesses or extreme angles. Exploring the original source could shed light on this potential solution.
Since a full-screen filter is employed, the WebGL context is restricted to displaying objects of this thickness. Displaying various line widths would necessitate additional rendering passes.

Answer 2

After a thorough analysis, I have developed a potential solution that seems to meet the majority of your specified criteria:

http://codepen.io/smithjones/pen/BFRel?editors=001

The idea behind this solution is quite straightforward: display any given geometry in "wireframe mode" and then apply a full-screen GLSL shader to add thickness to the wireframe lines.

This shader was influenced by the blur shaders found in the ThreeJS distribution, which essentially replicate the image multiple times along the horizontal and vertical axes. I automated this process and allowed users to define the number of copies, ensuring each copy was offset by one pixel.

While my demonstration utilized a 3D cube mesh (with an orthographic camera), converting it to a polyline should be relatively simple.

The crux of this solution lies in the custom shader (specifically the fragment shader section):

    uniform sampler2D tDiffuse;
    uniform int edgeWidth;
    uniform int diagOffset;
    uniform float totalWidth;
    uniform float totalHeight;
    const int MAX_LINE_WIDTH = 30; // Necessary due to GLSL limitations on for loops
    varying vec2 vUv;

    void main() {
        int offset = int( floor(float(edgeWidth) / float(2) + 0.5) );
        vec4 color = vec4( 0.0, 0.0, 0.0, 0.0);

        // Horizontal line copies first
        for (int i = 0; i < MAX_LINE_WIDTH; i++) {
            float uvFactor = (float(1) / totalWidth);
            float newUvX = vUv.x + float(i - offset) * uvFactor;
            float newUvY = vUv.y + (float(i - offset) * float(diagOffset) ) * uvFactor;  
            color = max(color, texture2D( tDiffuse, vec2( newUvX,  newUvY  ) ));    
            if(i == edgeWidth) break; 
        }

        // Vertical line copies
        for (int i = 0; i < MAX_LINE_WIDTH; i++) {
            float uvFactor = (float(1) / totalHeight);
            float newUvX = vUv.x + (float(i - offset) * float(-diagOffset) ) * uvFactor; 
            float newUvY = vUv.y + float(i - offset) * uvFactor;
            color = max(color, texture2D( tDiffuse, vec2( newUvX, newUvY ) ));  
            if(i == edgeWidth) break;
        }

        gl_FragColor = color;
    }

Advantages:

No additional geometry required beyond the line vertices
User-defined line thickness
Full-screen shader is generally gentle on the GPU
Can be fully integrated within the WebGL canvas

Disadvantages:

Line thickness is precise on horizontal and vertical edges but slightly off on diagonal edges due to the algorithm used. This is a limitation of the solution, although it is minimally noticeable for low line thicknesses and complex geometries.
Gaps may appear at joints for thicker lines. Testing the Codepen demo will illustrate this issue. I attempted to address this by introducing a second "diagonal pass," but it became complex and may only affect higher line thicknesses or extreme angles. Exploring the original source could shed light on this potential solution.
Since a full-screen filter is employed, the WebGL context is restricted to displaying objects of this thickness. Displaying various line widths would necessitate additional rendering passes.

Answer 3

Answer №2

If you're looking for a possible solution, consider working with your 3D points and utilizing the THREE.Vector3.project method to determine screen-space coordinates. From there, you can easily utilize canvas, along with its lineTo and moveTo functions, to create your desired visuals. The canvas 2D context supports varying line thickness, providing flexibility in your design.

var w = renderer.domElement.innerWidth;
var h = renderer.domElement.innerHeight;
vector.project(camera);
context2d.lineWidth = 3;
var x = (vector.x+1)*(w/2);
var y = h - (vector.y+1)*(h/2);
context2d.lineTo(x,y);

Keep in mind that you may need to use a separate canvas, or layer, above your WebGL rendering canvas to achieve the desired effect.

For scenarios with minimal camera changes, you can consider constructing lines using polygons and adjusting their vertex positions based on camera transformations. This approach is especially effective with orthographic cameras, as only rotations would necessitate vertex position adjustments.

Another technique involves disabling canvas clearing and drawing your lines multiple times with offsets within a circle or box. Once completed, you can re-enable clearing. While this method may require additional draw operations, it offers scalability in your design.

It's worth noting that the limitations with line thickness are partly due to how ANGLE operates in browsers like Chrome and Firefox, as it emulates OpenGL through DirectX. ANGLE developers mention that the WebGL specification mandates support for line thickness only up to 1, thus they do not view it as a bug and have no plans to address it. However, line thickness functionality should work on non-Windows operating systems where ANGLE is not utilized.

Answer 4

If you're looking for a possible solution, consider working with your 3D points and utilizing the THREE.Vector3.project method to determine screen-space coordinates. From there, you can easily utilize canvas, along with its lineTo and moveTo functions, to create your desired visuals. The canvas 2D context supports varying line thickness, providing flexibility in your design.

var w = renderer.domElement.innerWidth;
var h = renderer.domElement.innerHeight;
vector.project(camera);
context2d.lineWidth = 3;
var x = (vector.x+1)*(w/2);
var y = h - (vector.y+1)*(h/2);
context2d.lineTo(x,y);

Keep in mind that you may need to use a separate canvas, or layer, above your WebGL rendering canvas to achieve the desired effect.

For scenarios with minimal camera changes, you can consider constructing lines using polygons and adjusting their vertex positions based on camera transformations. This approach is especially effective with orthographic cameras, as only rotations would necessitate vertex position adjustments.

Another technique involves disabling canvas clearing and drawing your lines multiple times with offsets within a circle or box. Once completed, you can re-enable clearing. While this method may require additional draw operations, it offers scalability in your design.

It's worth noting that the limitations with line thickness are partly due to how ANGLE operates in browsers like Chrome and Firefox, as it emulates OpenGL through DirectX. ANGLE developers mention that the WebGL specification mandates support for line thickness only up to 1, thus they do not view it as a bug and have no plans to address it. However, line thickness functionality should work on non-Windows operating systems where ANGLE is not utilized.

Steps for making a Three.js 3D line collection with specified width and thickness

Answer №1

Advantages:

Disadvantages:

Answer №2

Similar questions

Is there a way to specifically call the last promise in a loop?

My method for updating form input properties involves switching the disable attribute from "false" to "true" and vice versa

Is it acceptable for Single Page Web Apps to have multiple requests at startup?

Addressing the issue of empty ngRepeat loops

Developing elements in React Native based on JSON data dynamically

What steps should I take to ensure the privacy of this React Layout?

What could be causing the span class data to not be retrieved by the getText method

jQuery Show/Hide Not Working Properly

Encountered an issue when trying to establish a connection to the MySQL database on Openshift using a

Is there a way to manipulate the appearance of a scroller using JavaScript?

Leveraging the Power of jsPDF in Your Google Apps Scripts

What is causing the error "unable to access property 'map' of undefined" in my code?

Wrapping an anchor tag with a div in Codeigniter

"Encountering issues with react-swipable-views when attempting to use it

Disallow the use of punctuation marks such as dots, plus signs, minus signs, and the letter 'e' when entering

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

When making a PUT request with Fetch, the Cache-Control header is altered in Firefox but remains unchanged in

Steps for activating chromedriver logging using the selenium webdriver

Is it possible to extract all parameters, including nested or within arrays, from a Swagger File using Node.js?

The data retrieved using Ionic 3 Angular Fire's payload.val() seems to be returning