Debugging 向场景添加或删除三个.JS几何体时Three.JS VRAM内存泄漏
我在我的应用程序中遇到VRAM内存泄漏。 应用程序经常添加和删除Debugging 向场景添加或删除三个.JS几何体时Three.JS VRAM内存泄漏,debugging,memory-leaks,three.js,vram,Debugging,Memory Leaks,Three.js,Vram,我在我的应用程序中遇到VRAM内存泄漏。 应用程序经常添加和删除THREE.Geometry,以创建三维动画。 如果我使用THREE.Geometry,而不是THREE.SphereBufferGeometry,则不会发生内存泄漏 我已经创建了一个最小的应用程序来证明这个内存泄漏是真实的。 内存泄漏会非常缓慢地增加VRAM内存,但最终会填满。 我认为池不会有帮助,因为它是VRAM而不是托管内存。 我确实用过 如果您可以使此示例正常工作并且没有内存泄漏,则可能会解决我的问题: 编辑:我在这里添加
THREE.Geometry
,以创建三维动画。
如果我使用THREE.Geometry
,而不是THREE.SphereBufferGeometry
,则不会发生内存泄漏
我已经创建了一个最小的应用程序来证明这个内存泄漏是真实的。
内存泄漏会非常缓慢地增加VRAM内存,但最终会填满。
我认为池不会有帮助,因为它是VRAM而不是托管内存。
我确实用过
如果您可以使此示例正常工作并且没有内存泄漏,则可能会解决我的问题:
编辑:我在这里添加应用程序的代码:
var camera, scene, renderer;
var geometry, material, mesh;
var lastSphere;
var lastGeo;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
light.position.set( 0, 4, 0 ); //default; light shining from top
light.castShadow = true; // default false
//Set up shadow properties for the light
light.shadow.mapSize.width = 1024; // default
light.shadow.mapSize.height = 1024; // default
light.shadow.camera.near = 1; // default
light.shadow.camera.far = 20; // default
scene.add( light );
//Create a sphere that cast shadows (but does not receive them)
geometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
material = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
// geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
// material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.1;
mesh.castShadows = true;
mesh.receiveShadow = false;
scene.add( mesh );
var planeGeometry = new THREE.PlaneBufferGeometry( 15, 15, 1, 1 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff, emissive:0x111111 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = -0.2;
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add( plane );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
var dim = 32;
var geo1 = new THREE.Geometry();
const numVertices = dim*dim;
var vertices = new Array(numVertices);
for (var i=0; i<vertices.length; i++)
{
const x = i%dim;
const y = (Math.floor(i/dim))%dim;
vertices[i] = new THREE.Vector3(x*0.1, y*0.1, 0);
}
const numFaces = (dim-1)*(dim-1)*2;
var faces = new Array(numFaces);
for (var i=0; i<(faces.length/2); i++)
{
const x = i%(dim-1);
const y = Math.floor(i/(dim-1))%(dim-1);
faces[2*i] = new THREE.Face3(x+y*dim, x+1+y*dim, x+(y+1)*dim);
faces[2*i+1] = new THREE.Face3(x+1+y*dim, x+1+(y+1)*dim, x+(y+1)*dim);
}
var uv = new Array(numFaces);
for (var i=0; i<uv.length; i++)
uv[i] = [new THREE.Vector2(0, 0), new THREE.Vector2(0, 0), new THREE.Vector2(0, 0)];
geo1.faces = faces;
geo1.vertices = vertices;
geo1.faceVertexUvs[0] = uv;
geo1.uvsNeedUpdate = true;
geo1.verticesNeedUpdate = true;
geo1.elementsNeedUpdate = true;
// var sphereGeometry = new THREE.SphereBufferGeometry( 0.1, 256, 256 );
var sphereGeometry = geo1;
var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.position.y = 0.1+Math.sin(mesh.rotation.x)*0.1;
sphere.position.x = 0.5;
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
if (lastGeo!=null)
lastGeo.dispose();
if (lastSphere!=null)
scene.remove(lastSphere);
scene.add( sphere );
lastSphere = sphere;
lastGeo = sphereGeometry;
// geo1.dispose();
renderer.render( scene, camera );
}
var摄像机、场景、渲染器;
变量几何、材质、网格;
var lastSphere;
var lastGeo;
init();
制作动画();
函数init(){
摄像头=新的三个透视摄像头(70,窗口内宽/窗口内高,0.01,10);
摄像机位置z=1;
场景=新的三个。场景();
renderer=new THREE.WebGLRenderer({antialas:true});
renderer.setSize(window.innerWidth、window.innerHeight);
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;//默认值THREE.PCFShadowMap
var灯=新的三方向灯(0xffffff,1100);
light.position.set(0,4,0);//默认值;灯光从顶部闪烁
light.castShadow=true;//默认值为false
//设置灯光的阴影属性
light.shadow.mapSize.width=1024;//默认值
light.shadow.mapSize.height=1024;//默认值
light.shadow.camera.near=1;//默认值
light.shadow.camera.far=20;//默认值
场景。添加(灯光);
//创建投射阴影(但不接收阴影)的球体
几何体=新的三个。SphereBufferGeometry(0.1,32,32);
材质=新的三个.MeshStandardMaterial({color:0xff0000});
//几何体=新的三个盒子几何体(0.2,0.2,0.2);
//材质=新的三个。MeshNormalMaterial();
网格=新的三个网格(几何体、材质);
网格位置y=0.1;
mesh.castShadows=true;
mesh.receiveShadow=false;
场景。添加(网格);
var planeGeometry=新的三个PlaneBufferGeometry(15,15,1,1);
var planeMaterial=new THREE.MeshStandardMaterial({color:0xffffff,emissive:0x111111})
var plane=新的三个网格(平面几何体、平面材质);
平面位置y=-0.2;
plane.rotation.x=-Math.PI/2;
plane.receiveShadow=true;
场景。添加(平面);
document.body.appendChild(renderer.doElement);
}
函数animate(){
请求动画帧(动画);
网格旋转.x+=0.01;
网格旋转y+=0.02;
var-dim=32;
var geo1=new THREE.Geometry();
常量数值=尺寸*尺寸;
var顶点=新数组(numVertices);
对于(var i=0;i这实际上是three.js
中的一个bug。我已经提交了一份PR来修复这个问题:
顺便说一句:修复程序将与r122
一起提供。