CODEWITHSUNDEEP
javascriptthree.js
majman
majman

Reputation: 2063

Remove adjoining faces in three.js

I'm trying to optimize a scene where I'm rendering cubes based off of an image's pixel data:

http://jsfiddle.net/majman/4sukB/

The code simply checks each pixel in an image and creates & positions a cube mesh accordingly.

However, as you can see if you toggle wireframes on, there is an abundance of unnecessary internal faces.

I am using mergeVertices as well as THREE.GeometryUtils.merge - so things are partially optimized.

I ran across this approach of comparing all the faces of merged geometry, but because each cube face is now a pair of tri's - they are difficult to compare as the two triangles of adjoining faces will be flipped.

I've also looked at the minecraft example, but I havne't been able to wrap my head around that approach.

Upvotes: 4

Views: 2345

Answers (1)

majman
majman

Reputation: 2063

Ok, with WestLangley's help - I was able to get there.

http://jsfiddle.net/majman/4sukB/2/

Took some fiddling to figure out which faces to adjust within buildPlane. After that, comparing centroids was relatively straight forward:

        function removeDuplicateFaces(geometry){
            for(var i=0; i<geometry.faces.length; i++){
                var centroid = geometry.faces[i].centroid;
                for(var j=0; j < i; j++){
                    var f2 = geometry.faces[j];
                    if( f2 !== undefined ){
                        var centroid2 = f2.centroid;
                        if(centroid.equals(centroid2)){
                            delete geometry.faces[i];
                            delete geometry.faces[j];
                        }
                    }
                }
            }
            geometry.faces = geometry.faces.filter( function(a){ return a!== undefined });
            return geometry;
        }

Upvotes: 3

Related Questions