SimplifyModifier()：简化几何体修改器——渐进网格型多边形约简算法
目录
应用场景
Three.js框架提供一个很简单的关于WebGL特此的JavaScript API，用户不需要详细学习WebGL，就可以很快上手搭建出好看且复杂的三维场景。
用ThreeJS加载大模型总要遇到性能问题，性能优化一般包括加载性能优化、渲染帧率优化、内存优化等。
用户还可以通过各种三维模型格式的loader，讲已有的复杂的三维模型导入场景中。但是当场景中的模型数量非常多且细小的模型碎片变多时。
浏览器受计算能力和内存限制等方面的影响对整个场景的渲染就会变得很卡顿，这个时候就需要更多的使用三维模型轻量化技术对模型进行深度处理。三维模型轻量化主要包括两个方面：模型轻量化显示和模型文件转换。
模型文件转换，列如gltf格式(json)的文件转化为glb(二进制)，模型文件的大小会减少很多，但是在Three.js中加载后，其模型的图元数不变。其他的相关技术在本文不多赘述。
SimplifyModifier()
SimplifyModifier介绍
SimplifyModifier()：是Three.js官方提供的简化模型图元的方法。是基于 渐进网格型多边形约简算法 的 简化几何体修改器。实现了一个非常基本的 mesh (网格)抽取和简化算法
使用后三角面减少，内存占用量减少。相应的，模型会变粗糙，会失真。
引入SimplifyModifier
SimplifyModifier类文件在官方项目的如下路径：
引入：
import { SimplifyModifier } from './jsm/modifiers/SimplifyModifier.js';
使用SimplifyModifier
const modifier = new SimplifyModifier();
const simplified = mesh.clone(); // mesh为需要简化的网格（模型）
simplified.material = simplified.material.clone();
simplified.material.flatShading = true;
const count = Math.floor( simplified.geometry.attributes.position.count * 0.875 ); // 需要移除模型点数的百分比
simplified.geometry = modifier.modify( simplified.geometry, count );
scene.add( simplified );
效果演示
1、简化了70%点的正方体
2、简化了87.5% 的gltf模型
总结
总的来说，我不太喜欢这种算法。最大的问题是，简化是通用的，可能会以不自然的方式更改模型的重要部分（如角色模型的面）。有好处也有坏处，需要看你项目的需求。可以通过修改移除点数的百分比，查看简化的效果，在保证模型不失真的情况下，简化模型的点数。
附件：SimplifyModifier 文件源码：
import {
BufferGeometry,
Float32BufferAttribute,
Vector3
} from '../../../build/three.module.js';
import * as BufferGeometryUtils from '../utils/BufferGeometryUtils.js';
/** * Simplification Geometry Modifier * - based on code and technique * - by Stan Melax in 1998 * - Progressive Mesh type Polygon Reduction Algorithm * - http://www.melax.com/polychop/ */
const _cb = new Vector3(), _ab = new Vector3();
class SimplifyModifier {
constructor() {
if ( BufferGeometryUtils === undefined ) {
throw 'THREE.SimplifyModifier relies on BufferGeometryUtils';
}
}
modify( geometry, count ) {
if ( geometry.isGeometry === true ) {
console.error( 'THREE.SimplifyModifier no longer supports Geometry. Use BufferGeometry instead.' );
return;
}
geometry = geometry.clone();
const attributes = geometry.attributes;
// this modifier can only process indexed and non-indexed geomtries with a position attribute
for ( const name in attributes ) {
if ( name !== 'position' ) geometry.deleteAttribute( name );
}
geometry = BufferGeometryUtils.mergeVertices( geometry );
//
// put data of original geometry in different data structures
//
const vertices = [];
const faces = [];
// add vertices
const positionAttribute = geometry.getAttribute( 'position' );
for ( let i = 0; i < positionAttribute.count; i ++ ) {
const v = new Vector3().fromBufferAttribute( positionAttribute, i );
const vertex = new Vertex( v );
vertices.push( vertex );
}
// add faces
let index = geometry.getIndex();
if ( index !== null ) {
for ( let i = 0; i < index.count; i += 3 ) {
const a = index.getX( i );
const b = index.getX( i + 1 );
const c = index.getX( i + 2 );
const triangle = new Triangle( vertices[ a ], vertices[ b ], vertices[ c ], a, b, c );
faces.push( triangle );
}
} else {
for ( let i = 0; i < positionAttribute.count; i += 3 ) {
const a = i;
const b = i + 1;
const c = i + 2;
const triangle = new Triangle( vertices[ a ], vertices[ b ], vertices[ c ], a, b, c );
faces.push( triangle );
}
}
// compute all edge collapse costs
for ( let i = 0, il = vertices.length; i < il; i ++ ) {
computeEdgeCostAtVertex( vertices[ i ] );
}
let nextVertex;
let z = count;
while ( z -- ) {
nextVertex = minimumCostEdge( vertices );
if ( ! nextVertex ) {
console.log( 'THREE.SimplifyModifier: No next vertex' );
break;
}
collapse( vertices, faces, nextVertex, nextVertex.collapseNeighbor );
}
//
const simplifiedGeometry = new BufferGeometry();
const position = [];
index = [];
//
for ( let i = 0; i < vertices.length; i ++ ) {
const vertex = vertices[ i ].position;
position.push( vertex.x, vertex.y, vertex.z );
// cache final index to GREATLY speed up faces reconstruction
vertices[ i ].id = i;
}
//
for ( let i = 0; i < faces.length; i ++ ) {
const face = faces[ i ];
index.push( face.v1.id, face.v2.id, face.v3.id );
}
//
simplifiedGeometry.setAttribute( 'position', new Float32BufferAttribute( position, 3 ) );
simplifiedGeometry.setIndex( index );
return simplifiedGeometry;
}
}
function pushIfUnique( array, object ) {
if ( array.indexOf( object ) === - 1 ) array.push( object );
}
function removeFromArray( array, object ) {
var k = array.indexOf( object );
if ( k > - 1 ) array.splice( k, 1 );
}
function computeEdgeCollapseCost( u, v ) {
// if we collapse edge uv by moving u to v then how
// much different will the model change, i.e. the "error".
const edgelength = v.position.distanceTo( u.position );
let curvature = 0;
const sideFaces = [];
// find the "sides" triangles that are on the edge uv
for ( let i = 0, il = u.faces.length; i < il; i ++ ) {
const face = u.faces[ i ];
if ( face.hasVertex( v ) ) {
sideFaces.push( face );
}
}
// use the triangle facing most away from the sides
// to determine our curvature term
for ( let i = 0, il = u.faces.length; i < il; i ++ ) {
let minCurvature = 1;
const face = u.faces[ i ];
for ( let j = 0; j < sideFaces.length; j ++ ) {
const sideFace = sideFaces[ j ];
// use dot product of face normals.
const dotProd = face.normal.dot( sideFace.normal );
minCurvature = Math.min( minCurvature, ( 1.001 - dotProd ) / 2 );
}
curvature = Math.max( curvature, minCurvature );
}
// crude approach in attempt to preserve borders
// though it seems not to be totally correct
const borders = 0;
if ( sideFaces.length < 2 ) {
// we add some arbitrary cost for borders,
// borders += 10;
curvature = 1;
}
const amt = edgelength * curvature + borders;
return amt;
}
function computeEdgeCostAtVertex( v ) {
// compute the edge collapse cost for all edges that start
// from vertex v. Since we are only interested in reducing
// the object by selecting the min cost edge at each step, we
// only cache the cost of the least cost edge at this vertex
// (in member variable collapse) as well as the value of the
// cost (in member variable collapseCost).
if ( v.neighbors.length === 0 ) {
// collapse if no neighbors.
v.collapseNeighbor = null;
v.collapseCost = - 0.01;
return;
}
v.collapseCost = 100000;
v.collapseNeighbor = null;
// search all neighboring edges for "least cost" edge
for ( let i = 0; i < v.neighbors.length; i ++ ) {
const collapseCost = computeEdgeCollapseCost( v, v.neighbors[ i ] );
if ( ! v.collapseNeighbor ) {
v.collapseNeighbor = v.neighbors[ i ];
v.collapseCost = collapseCost;
v.minCost = collapseCost;
v.totalCost = 0;
v.costCount = 0;
}
v.costCount ++;
v.totalCost += collapseCost;
if ( collapseCost < v.minCost ) {
v.collapseNeighbor = v.neighbors[ i ];
v.minCost = collapseCost;
}
}
// we average the cost of collapsing at this vertex
v.collapseCost = v.totalCost / v.costCount;
// v.collapseCost = v.minCost;
}
function removeVertex( v, vertices ) {
console.assert( v.faces.length === 0 );
while ( v.neighbors.length ) {
const n = v.neighbors.pop();
removeFromArray( n.neighbors, v );
}
removeFromArray( vertices, v );
}
function removeFace( f, faces ) {
removeFromArray( faces, f );
if ( f.v1 ) removeFromArray( f.v1.faces, f );
if ( f.v2 ) removeFromArray( f.v2.faces, f );
if ( f.v3 ) removeFromArray( f.v3.faces, f );
// TODO optimize this!
const vs = [ f.v1, f.v2, f.v3 ];
for ( let i = 0; i < 3; i ++ ) {
const v1 = vs[ i ];
const v2 = vs[ ( i + 1 ) % 3 ];
if ( ! v1 || ! v2 ) continue;
v1.removeIfNonNeighbor( v2 );
v2.removeIfNonNeighbor( v1 );
}
}
function collapse( vertices, faces, u, v ) { // u and v are pointers to vertices of an edge
// Collapse the edge uv by moving vertex u onto v
if ( ! v ) {
// u is a vertex all by itself so just delete it..
removeVertex( u, vertices );
return;
}
const tmpVertices = [];
for ( let i = 0; i < u.neighbors.length; i ++ ) {
tmpVertices.push( u.neighbors[ i ] );
}
// delete triangles on edge uv:
for ( let i = u.faces.length - 1; i >= 0; i -- ) {
if ( u.faces[ i ].hasVertex( v ) ) {
removeFace( u.faces[ i ], faces );
}
}
// update remaining triangles to have v instead of u
for ( let i = u.faces.length - 1; i >= 0; i -- ) {
u.faces[ i ].replaceVertex( u, v );
}
removeVertex( u, vertices );
// recompute the edge collapse costs in neighborhood
for ( let i = 0; i < tmpVertices.length; i ++ ) {
computeEdgeCostAtVertex( tmpVertices[ i ] );
}
}
function minimumCostEdge( vertices ) {
// O(n * n) approach. TODO optimize this
let least = vertices[ 0 ];
for ( let i = 0; i < vertices.length; i ++ ) {
if ( vertices[ i ].collapseCost < least.collapseCost ) {
least = vertices[ i ];
}
}
return least;
}
// we use a triangle class to represent structure of face slightly differently
class Triangle {
constructor( v1, v2, v3, a, b, c ) {
this.a = a;
this.b = b;
this.c = c;
this.v1 = v1;
this.v2 = v2;
this.v3 = v3;
this.normal = new Vector3();
this.computeNormal();
v1.faces.push( this );
v1.addUniqueNeighbor( v2 );
v1.addUniqueNeighbor( v3 );
v2.faces.push( this );
v2.addUniqueNeighbor( v1 );
v2.addUniqueNeighbor( v3 );
v3.faces.push( this );
v3.addUniqueNeighbor( v1 );
v3.addUniqueNeighbor( v2 );
}
computeNormal() {
const vA = this.v1.position;
const vB = this.v2.position;
const vC = this.v3.position;
_cb.subVectors( vC, vB );
_ab.subVectors( vA, vB );
_cb.cross( _ab ).normalize();
this.normal.copy( _cb );
}
hasVertex( v ) {
return v === this.v1 || v === this.v2 || v === this.v3;
}
replaceVertex( oldv, newv ) {
if ( oldv === this.v1 ) this.v1 = newv;
else if ( oldv === this.v2 ) this.v2 = newv;
else if ( oldv === this.v3 ) this.v3 = newv;
removeFromArray( oldv.faces, this );
newv.faces.push( this );
oldv.removeIfNonNeighbor( this.v1 );
this.v1.removeIfNonNeighbor( oldv );
oldv.removeIfNonNeighbor( this.v2 );
this.v2.removeIfNonNeighbor( oldv );
oldv.removeIfNonNeighbor( this.v3 );
this.v3.removeIfNonNeighbor( oldv );
this.v1.addUniqueNeighbor( this.v2 );
this.v1.addUniqueNeighbor( this.v3 );
this.v2.addUniqueNeighbor( this.v1 );
this.v2.addUniqueNeighbor( this.v3 );
this.v3.addUniqueNeighbor( this.v1 );
this.v3.addUniqueNeighbor( this.v2 );
this.computeNormal();
}
}
class Vertex {
constructor( v ) {
this.position = v;
this.id = - 1; // external use position in vertices list (for e.g. face generation)
this.faces = []; // faces vertex is connected
this.neighbors = []; // neighbouring vertices aka "adjacentVertices"
// these will be computed in computeEdgeCostAtVertex()
this.collapseCost = 0; // cost of collapsing this vertex, the less the better. aka objdist
this.collapseNeighbor = null; // best candinate for collapsing
}
addUniqueNeighbor( vertex ) {
pushIfUnique( this.neighbors, vertex );
}
removeIfNonNeighbor( n ) {
const neighbors = this.neighbors;
const faces = this.faces;
const offset = neighbors.indexOf( n );
if ( offset === - 1 ) return;
for ( let i = 0; i < faces.length; i ++ ) {
if ( faces[ i ].hasVertex( n ) ) return;
}
neighbors.splice( offset, 1 );
}
}
export { SimplifyModifier };
