Context and Closure Memory Leaks #321

This commit is contained in:
kovacsv 2022-12-16 13:24:31 +01:00
parent ed3d1269d9
commit c244562ed0
7 changed files with 132 additions and 16 deletions

View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../build/o3dv.min-dev.js"></script>
<style>
div.online_3d_viewer
{
width: 640px;
height: 480px;
}
</style>
<script type='text/javascript'>
function InitViewer ()
{
// get the parent element of the viewer
let parentDiv = document.createElement ('div');
parentDiv.classList.add ('online_3d_viewer');
document.body.appendChild (parentDiv);
// initialize the viewer with the parent element and some parameters
let viewer = new OV.EmbeddedViewer (parentDiv, {
camera : new OV.Camera (
new OV.Coord3D (-1.5, 2.0, 3.0),
new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 1.0, 0.0),
45.0
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : {
showEdges : false,
edgeColor : new OV.RGBColor (0, 0, 0),
edgeThreshold : 1
},
environmentSettings : {
environmentMap : [
'../website/assets/envmaps/fishermans_bastion/posx.jpg',
'../website/assets/envmaps/fishermans_bastion/negx.jpg',
'../website/assets/envmaps/fishermans_bastion/posy.jpg',
'../website/assets/envmaps/fishermans_bastion/negy.jpg',
'../website/assets/envmaps/fishermans_bastion/posz.jpg',
'../website/assets/envmaps/fishermans_bastion/negz.jpg'
],
backgroundIsEnvMap : false
}
});
// load a model providing model urls
viewer.LoadModelFromUrlList ([
'../../test/testfiles/gltf/DamagedHelmet/glTF-Binary/DamagedHelmet.glb'
]);
return {
parentDiv,
viewer
};
}
function InitViewerRecursive ()
{
}
window.addEventListener ('load', () => {
setInterval (() => {
let result = InitViewer ();
setTimeout (() => {
result.viewer.Destroy ();
document.body.removeChild (result.parentDiv);
}, 1000);
}, 1500);
});
</script>
</head>
<body>
</body>
</html>

View File

@ -63,7 +63,7 @@ import { Triangle } from './model/triangle.js';
import { ParameterListBuilder, ParameterListParser, CreateUrlBuilder, CreateUrlParser, CreateModelUrlParameters, ParameterConverter } from './parameters/parameterlist.js';
import { ModelToThreeConversionParams, ModelToThreeConversionOutput, ThreeConversionStateHandler, ThreeNodeTree, ConvertModelToThreeObject } from './threejs/threeconverter.js';
import { ThreeModelLoader } from './threejs/threemodelloader.js';
import { HasHighpDriverIssue, GetShadingType, ConvertThreeColorToColor, ConvertColorToThreeColor, ConvertThreeGeometryToMesh, ShadingType } from './threejs/threeutils.js';
import { HasHighpDriverIssue, GetShadingType, ConvertThreeColorToColor, ConvertColorToThreeColor, ConvertThreeGeometryToMesh, DisposeThreeObjects, ShadingType } from './threejs/threeutils.js';
import { Camera, CameraIsEqual3D } from './viewer/camera.js';
import { GetIntegerFromStyle, GetDomElementExternalWidth, GetDomElementExternalHeight, GetDomElementInnerDimensions, GetDomElementClientCoordinates, CreateDomElement, AddDomElement, AddDiv, ClearDomElement, InsertDomElementBefore, InsertDomElementAfter, ShowDomElement, IsDomElementVisible, SetDomElementWidth, SetDomElementHeight, GetDomElementOuterWidth, GetDomElementOuterHeight, SetDomElementOuterWidth, SetDomElementOuterHeight, CreateDiv } from './viewer/domutils.js';
import { EmbeddedViewer, Init3DViewerElement, Init3DViewerElements } from './viewer/embeddedviewer.js';
@ -285,6 +285,7 @@ export {
ConvertThreeColorToColor,
ConvertColorToThreeColor,
ConvertThreeGeometryToMesh,
DisposeThreeObjects,
ShadingType,
Camera,
CameraIsEqual3D,

View File

@ -108,4 +108,10 @@ export class ThreeModelLoader
}
this.objectUrls = null;
}
Destroy ()
{
this.RevokeObjectUrls ();
this.importer = null;
}
}

View File

@ -181,3 +181,23 @@ export function ConvertThreeGeometryToMesh (threeGeometry, materialIndex)
return mesh;
}
export function DisposeThreeObjects (mainObject)
{
if (mainObject === null) {
return;
}
mainObject.traverse ((obj) => {
if (obj.isMesh || obj.isLineSegments) {
obj.geometry.dispose ();
if (Array.isArray (obj.material)) {
for (let material of obj.material) {
material.dispose ();
}
} else {
obj.material.dispose ();
}
}
});
}

View File

@ -157,6 +157,13 @@ export class EmbeddedViewer
let height = this.parentElement.clientHeight;
this.viewer.Resize (width, height);
}
Destroy ()
{
this.modelLoader.Destroy ();
this.viewer.Destroy ();
this.model = null;
}
}
export function Init3DViewerElement (parentElement, modelUrls, parameters)

View File

@ -686,4 +686,10 @@ export class Viewer
this.ResizeRenderer (originalSize.width, originalSize.height);
return url;
}
Destroy ()
{
this.Clear ();
this.renderer.dispose ();
}
}

View File

@ -1,5 +1,5 @@
import { RGBColor } from '../model/color.js';
import { ConvertColorToThreeColor } from '../threejs/threeutils.js';
import { ConvertColorToThreeColor, DisposeThreeObjects } from '../threejs/threeutils.js';
import * as THREE from 'three';
@ -143,9 +143,7 @@ export class ViewerGeometry
return;
}
this.EnumerateMeshes ((mesh) => {
mesh.geometry.dispose ();
});
DisposeThreeObjects (this.mainObject);
this.scene.remove (this.mainObject);
this.mainObject = null;
}
@ -159,9 +157,7 @@ export class ViewerGeometry
this.EnumerateMeshes ((mesh) => {
SetThreeMeshPolygonOffset (mesh, false);
});
this.EnumerateEdges ((edge) => {
edge.geometry.dispose ();
});
DisposeThreeObjects (this.mainEdgeObject);
this.scene.remove (this.mainEdgeObject);
this.mainEdgeObject = null;
}
@ -236,14 +232,7 @@ export class ViewerExtraGeometry
Clear ()
{
if (this.mainObject === null) {
return;
}
this.mainObject.traverse ((obj) => {
if (obj.isMesh || obj.isLineSegments) {
obj.geometry.dispose ();
}
});
DisposeThreeObjects (this.mainObject);
this.scene.remove (this.mainObject);
this.mainObject = null;
}