Within my javascript "Image SNAP Function," I am utilizing a temporary DOM div container along with a THREE.js renderer to generate a high-resolution image file of the current scene. This allows the user to view the image outside the browser or save it as a .JPG file.
Although the functionality works as intended, I have noticed that an additional 0.14Gb of memory is utilized for each "snap" and is not released. This leads to a degradation in PC performance after multiple snaps. Releasing the memory involves closing the "app" (browser tab window), which is inconvenient for the user.
Despite attempting various commands within the Image Snap function to release the memory, none have proven effective.
Below is the code snippet for the Image Snap function:
function F_SNAP_JPG()
{
var bigContainer = document.createElement('div');
bigContainer.style.cssText = 'id: "bigContainer", width: 4000, height:2200 ';
document.body.appendChild( bigContainer );
bigContainer.innerHTML = "";
var bigRenderer = new THREE.WebGLRenderer( {antialias:true , preserveDrawingBuffer: true} );
bigRenderer.setPixelRatio( window.devicePixelRatio );
bigRenderer.setSize( 4000, 2200 );
bigContainer.appendChild( bigRenderer.domElement );
//--------------------------------------------------------------------------------------------
// RENDER
bigRenderer.render ( scene, camera );
//--------------------------------------------------------------------------------------------
//... capture image for viewing or saving
var strMime = "image/jpg";
var fileURL = bigRenderer.domElement.toDataURL( strMime );
var Anchor = document.createElement('a');
document.body.appendChild( Anchor );
Anchor.style = "display: none";
Anchor.href = fileURL;
Anchor.target = '_blank';
Anchor.download = filename || 'unknown';
Anchor.click();
document.body.removeChild( Anchor );
//--------------------------------------------------------------------------------------------
//...attempt memory release
bigContainer.removeChild( bigRenderer.domElement );
bigRenderer.dispose();
document.body.removeChild( bigContainer );
bigContainer.delete();
}//... End of function
I am seeking a solution to release the memory without necessitating the closure of the browser tab window.
Update (Solution)
I came across a solution provided by Konstantin Eletskiy in a 2015 Stack Overflow post titled Clean up Threejs WebGl contexts.
The solution involves adding a single line
bigRenderer.forceContextLoss();
At the end of the F_SNAP_JPEG function. This addition effectively resolves the memory leakage issue experienced during snapshot generation.