ThreeJS 清空GPU缓存

Three.js删除模型对象(.remove()和·dispose()方法)

Three.js Cleanup (threejsfundamentals.org)

清空的主要思路

• shader里面主要储存顶点数据(VAO)和贴图(texture)

dispose()方法

• 关于·dispose()方法可以查看几何体BufferGeometry或Geometry、材质Material、纹理Texture等对象了解。
  • Geometry·dispose()
  • Texture·dispose() (shader材质和后处理两个)
  • Material·dispose()
  • WebGLRenderer·dispose()
  • rendererTarget.dispose()
• 具有'dispose'事件类型的dispatchEvent,调用EventDispatcher

//BufferGeometry.js、Geometry.js和Material.js源码关于·dispose()方法的封装
dispose: function () {
  // 几何体或材质对象自动触发一个事件dispose
  this.dispatchEvent( { type: 'dispose' } );
}

//WebGLGeometries.js源码中监听几何体对象的dispose事件
function get( object, geometry ) {
  ...
  geometry.addEventListener( 'dispose', onGeometryDispose );
  ...
}
function onGeometryDispose( event ) {
  ...
  // 调用WebGLAttributes.js封装的remove方法，删除顶点缓冲区
  attributes.remove( buffergeometry.index );
  ...
}

//WebGLAttributes.js封装了remove方法可以删除Threejs解析模型几何体顶点数据的时候创建的顶点缓冲区。
function remove( attribute ) {
  ...
  if ( data ) {
    // 调用gl.deleteBuffer()删除顶点缓冲区
    gl.deleteBuffer( data.buffer );
  }
  ...
}

自己写的材质贴图释放

disposeMaterial(material) { //清空texture
    if (material instanceof THREE.Material) {
            for (const value of Object.values(material)) {
                    if (value instanceof THREE.Texture) {
                            value.dispose();
                    }
            }
            if (material.uniforms) {
                    for (const value of Object.values(material.uniforms)) {
                            if (value) {
                                    const uniformValue = value.value;
                                    if (uniformValue instanceof THREE.Texture) {
                                            uniformValue.dispose();
                                    }
                                    if(Array.isArray(uniformValue)){
                                            uniformValue.length = 0;
                                    }
                            }
                    }
            }
            material.dispose();
    }
}

判断memery里面的顶点数据和贴图数量

renderer.info.memory;