ThreeJS bringing Maya-style wireframe rendering to life

Question

ThreeJS bringing Maya-style wireframe rendering to life

Currently, I am attempting to create a wireframe that will display quads instead of triangles by utilizing the following code:

var geo = new THREE.EdgesGeometry( _this.geometry ); // or WireframeGeometry
var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var wireframe = new THREE.LineSegments( geo, mat );
_this.scene.add( wireframe );

However, when the model is rendered, it does not show all the edges and still displays some triangles. Ideally, I want it to resemble how Maya presents wireframes.

I have learned that ThreeJS no longer supports Face4, causing it to always showcase triangles instead of quads. Is there any way to work around this limitation? I've heard about using a pixel shader to only display mesh edges, but I have struggled to comprehend and implement it successfully.

If possible, I would greatly appreciate guidance on achieving this goal, whether through existing threejs features or via a pixel shader method.

You can find the model source here.

Thank you!

javascript three.js

Answer 1

Answer №1

In case anyone comes across this problem in the future, I wanted to share a solution.

After taking into consideration a suggestion from WestLangley, I decided to tweak the code in WireframeGeometry.js to exclude the rendering of interior diagonals that can sometimes show up when creating a wireframe. This adjustment gives a more familiar appearance to 3D artists as it resembles quad faces.

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

At the end of WireframeGeometry.js, you'll find the changes I've implemented. Admittedly, it's not the most elegant fix, but an alternative approach could involve computing the lines to display before threejs performs triangulation, storing pre-triangulated faces in a separate buffer.

// non-indexed BufferGeometry
position = geometry.attributes.position;

var _i = 0;
for ( i = 0, l = ( position.count / 3 ); i < l; i ++ ) {

    for ( j = 0; j < 3; j ++ )
        // three edges per triangle, an edge is represented as (index1, index2)
        // e.g. the first triangle has the following edges: (0,1),(1,2),(2,0)

        // Included a simple check here to only add the vertices that are not diagonal lines
        if(!(j == 2 && _i == 1) || !(j == 1 && _i == 0)){
            index1 = 3 * i + j;
            vertex.fromBufferAttribute(position, index1);
            vertices.push(vertex.x, vertex.y, vertex.z);

            index2 = 3 * i + ( ( j + 1 ) % 3 );
            vertex.fromBufferAttribute(position, index2);
            vertices.push(vertex.x, vertex.y, vertex.z);
        }
    }

    _i++;
    if(_i == 2){
        _i = 0
    }
}

Answer 2

In case anyone comes across this problem in the future, I wanted to share a solution.

After taking into consideration a suggestion from WestLangley, I decided to tweak the code in WireframeGeometry.js to exclude the rendering of interior diagonals that can sometimes show up when creating a wireframe. This adjustment gives a more familiar appearance to 3D artists as it resembles quad faces.

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

At the end of WireframeGeometry.js, you'll find the changes I've implemented. Admittedly, it's not the most elegant fix, but an alternative approach could involve computing the lines to display before threejs performs triangulation, storing pre-triangulated faces in a separate buffer.

// non-indexed BufferGeometry
position = geometry.attributes.position;

var _i = 0;
for ( i = 0, l = ( position.count / 3 ); i < l; i ++ ) {

    for ( j = 0; j < 3; j ++ )
        // three edges per triangle, an edge is represented as (index1, index2)
        // e.g. the first triangle has the following edges: (0,1),(1,2),(2,0)

        // Included a simple check here to only add the vertices that are not diagonal lines
        if(!(j == 2 && _i == 1) || !(j == 1 && _i == 0)){
            index1 = 3 * i + j;
            vertex.fromBufferAttribute(position, index1);
            vertices.push(vertex.x, vertex.y, vertex.z);

            index2 = 3 * i + ( ( j + 1 ) % 3 );
            vertex.fromBufferAttribute(position, index2);
            vertices.push(vertex.x, vertex.y, vertex.z);
        }
    }

    _i++;
    if(_i == 2){
        _i = 0
    }
}

ThreeJS bringing Maya-style wireframe rendering to life

Answer №1

Similar questions

What are some ways to avoid the use of underline and slash symbols in material-ui/pickers?

Retrieve particular attributes from an array of objects

What could be causing the error when attempting to send an HttpResponse from a Django View function?

Unable to access the current state within an asynchronous function in React.js

Is there a way for JavaScript to generate an image and smoothly transition it from its initial state to its final style?

The retrieved information remains unchanged even after modifications are made on the subsequent Next.js server-side rendered page

Using Node.js to create a RESTful API that pulls information from MongoDB

You have attempted to make an invalid hook call in the react chat app. Hooks can only be called within the body of a function component

If the width of the table is set to 100% in the CSS, the legend in the Flot chart will automatically shift to the

Retrieving data from an Array containing a mix of string and integer values represented as strings, organized by the length of the

Tips for submitting a form and retrieving session count without the need to refresh the page after submitting the form

What is the best way to incorporate a Json file into a JavaScript file?

Unusual behavior experienced with raycasting in Three JS when objects are are repositioned

Nested within an it block are Protractor Jasmine describe blocks

Creating Filled DIVs using JavaScript

The code to trigger the button with the ID 'Button' using Document.getElementById() is not executing the associated code-behind

Is there a way to verify if the user input matches the data in the database?

Tips for preventing NextJS from including a dynamically imported component in the main _app.js bundle while utilizing Module Aliases

I'm encountering an issue where my information doesn't seem to be getting through to the Django

The shading of this complex Three.js model appears unusual