Properly free memory when removing mesh in three.js - memory

There is already some subject around three.js and memory usage, but i don't know if they're too old or if I'm still missing something : their solutions doesn't work for me with three.js r90.
LOADING all Meshs
here is how i'm loading objects :
var loader = new THREE.ObjectLoader();
var objects = [];
function loadMesh(path) {
loader.load(path, function (obj) {
obj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.skinning = true;
}
});
scene.add(obj);
objects.push(obj);
});
}
// ...
loadMesh('path/to/obj01.json');
loadMesh('path/to/obj02.json');
loadMesh('...');
///...
After all meshs loaded, memory increase of around 1Go.
REMOVING all meshs (and free memory)
1 - first try
function clearAll() {
var objLen = objects.length;
for (var i = 0; i < objLen; i++) {
scene.remove(objects[i]);
objects[i] = undefined;
objects.slice(i, 1);
}
}
After calling this, all meshs are well removed from scene but memory don't decrease after the GC cycle. (I'm using the "about:memory" page in firefox)
2- try with dispose()
function clearAll() {
for (var i = 0; i < objects.length; i++) {
scene.remove(objects[i]);
objects[i].traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.geometry.dispose();
child.material.dispose();
}
});
objects[i] = undefined;
objects.slice(i, 1);
}
renderer.dispose();
}
still no memory releasing after GC cycle.
3 - Trying to unset the renderer.
In the first try I notice that memory is release when i'm calling clearAll() if I never render the scene withrenderer.render(scene, camera).
So i tried to unset it :
function clearAll() {
var objLen = objects.length;
for (var i = 0; i < objLen; i++) {
scene.remove(objects[i]);
objects[i] = undefined;
objects.slice(i, 1);
}
renderer = undefined;
initRenderer(); // recreate and configure renderer.
}
This way the GC free properly memory. This make me think that there is still some references to meshs in the renderer? Why they're not unset when i'm calling dispose on mesh and renderer?
EDIT
4 - try with the Gaitat's solution from here :
Three.js Collada - What's the proper way to dispose() and release memory (garbage collection)?
function clearAll() {
for (var i = 0; i < objects.length; i++) {
scene.remove(objects[i]);
disposeHierarchy (objects[i], disposeNode);
delete(objects[i]);
}
function disposeNode(){...}
function disposeHierarchy(){...}
and no more memory release.

Related

How to extrude height ol3-Cesium?

I've got a GeoJson that I can load in ol3 without any problems.
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJson(),
url: 'my_file.json',
})
});
My GeoJson have got a properties (let's say foo ) that I want to use to extrudedHeight.
I've done this in Cesium (see the Cesium exemple): http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=Showcases
But I can't find a way to do this on my ol3 layer.
Any clue ?
Edit:
I've hacked a bit and create my FeatureConverter like this:
test = {};
function extend(base, sub) {
// Avoid instantiating the base class just to setup inheritance
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
// for a polyfill
// Also, do a recursive merge of two prototypes, so we don't overwrite
// the existing prototype, but still maintain the inheritance chain
// Thanks to #ccnokes
var origProto = sub.prototype;
sub.prototype = Object.create(base.prototype);
for (var key in origProto) {
sub.prototype[key] = origProto[key];
}
// Remember the constructor property was set wrong, let's fix it
sub.prototype.constructor = sub;
// In ECMAScript5+ (all modern browsers), you can make the constructor property
// non-enumerable if you define it like this instead
Object.defineProperty(sub.prototype, 'constructor', {
enumerable: false,
value: sub
});
}
test.FeatureConverter = function(scene) {
olcs.FeatureConverter.call(this, scene);
}
test.FeatureConverter.prototype = {
olPolygonGeometryToCesium : function(layer, feature, olGeometry, projection, olStyle) {
olGeometry = olcs.core.olGeometryCloneTo4326(olGeometry, projection);
goog.asserts.assert(olGeometry.getType() == 'Polygon');
var rings = olGeometry.getLinearRings();
// always update Cesium externs before adding a property
var hierarchy = {};
var polygonHierarchy = hierarchy;
goog.asserts.assert(rings.length > 0);
for (var i = 0; i < rings.length; ++i) {
var olPos = rings[i].getCoordinates();
var positions = olcs.core.ol4326CoordinateArrayToCsCartesians(olPos);
goog.asserts.assert(positions && positions.length > 0);
if (i == 0) {
hierarchy.positions = positions;
} else {
hierarchy.holes = {
// always update Cesium externs before adding a property
positions: positions
};
hierarchy = hierarchy.holes;
}
}
var fillGeometry = new Cesium.PolygonGeometry({
// always update Cesium externs before adding a property
polygonHierarchy: polygonHierarchy,
perPositionHeight: true,
extrudedHeight: parseInt(feature.getProperties()['foo'])
});
var outlineGeometry = new Cesium.PolygonOutlineGeometry({
// always update Cesium externs before adding a property
polygonHierarchy: hierarchy,
perPositionHeight: true
});
var primitives = this.wrapFillAndOutlineGeometries(
layer, feature, olGeometry, fillGeometry, outlineGeometry, olStyle);
return this.addTextStyle(layer, feature, olGeometry, olStyle, primitives);
}
}
extend(olcs.FeatureConverter, test.FeatureConverter);
But it does not work... (and I do not know why...).

Is my implementation of unloaders proper?

I was re-reading this post here: https://stackoverflow.com/a/24473888/1828637
And got concerned about if I did things correctly. This is how I do unloading:
So I set up some stuff per window. And unload them on shutdown. (i dont unload on window close, i havent found a need to yet, as when it closes, everything i added to it goes with with the close [such as my mutation observers]).
All code below is theoretical, the mutation stuff is example, so there might be typos or bugs in it. I was wondering if the idea behind it is appropriate:
var unloadersOnShutdown = [];
var unloadersOnClose = [];
function startup() {
let DOMWindows = Services.wm.getEnumerator(null);
while (DOMWindows.hasMoreElements()) {
let aDOMWindow = DOMWindows.getNext();
var worker = new winWorker(aDOMWindow);
unloadersOnShutdown.push({DOMWindow: aDOMWindow, fn: worker.destroy});
}
}
function shutdown() {
Array.forEach.call(unloadersOnShutdown, function(obj) {
//should probably test if obj.DOMWindow exists/is open, but just put it in try-ctach
try {
obj.fn();
} catch(ex) {
//window was probably closed
console.warn('on shutdown unlaoder:', ex);
}
});
}
function winWorker(aDOMWindow) {
this.DOMWindow = aDOMWindow;
this.init();
}
winWorker.prototype = {
init: function() {
this.gMutationObserver = new this.DOMWindow.MutationObserver(gMutationFunc.bind(this));
this.myElement = this.DOMWindow.querySelector('#myXulEl');
this.gMutationObserver.observe(this.myElement, gMutationConfig);
if (this.DOMWindow.gBrowser && this.DOMWindow.gBrowser.tabContainer) {
this.onTabSelectBinded = this.onTabSelect.bind(this);
this.gBrowser.tabContainer.addEventListener('TabSelect', this.onTabSelectBinded, false);
}
},
destroy: function() {
this.gMutationObserver.disconnect();
if (this.onTabSelectBinded) {
this.gBrowser.tabContainer.removeEventListener('TabSelect', this.onTabSelectBinded, false);
}
},
onTabSelect: function() {
console.log('tab selected = ', thisDOMWindow.gBrowser.selectedTab);
}
};
var windowListener = {
onOpenWindow: function (aXULWindow) {},
onCloseWindow: function (aXULWindow) {
var DOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
for (var i=0; i<unloadersOnClose.length; i++) {
if (unloadersOnClose.DOMWindow == DOMWindow) {
try {
unloadersOnClose.fn();
} catch(ex) {
console.warn('on close unloader:', ex);
}
unloadersOnClose.splice(i, 1);
i--;
}
}
},
onWindowTitleChange: function (aXULWindow, aNewTitle) {},
}
I think one problem is me not using weak references with DOMWindows but I'm not sure.
The idea around unloaders in general seems to be OK, but very limited (to windows only).
The implementation is lacking. E.g. there is a big, fat bug:
unloadersOnShutdown.push({DOMWindow: aDOMWindow, fn: worker.destroy});
// and
obj.fn();
// or
unloadersOnClose.fn();
This will call winWorker.prototype.destroy with the wrong this.
The i++/i-- loop also looks, um... "interesting"?!
Also, keep in mind that there can be subtle leaks, so you should mind and test for Zombie compartments.
Not only can a window leak parts of your add-on (e.g. bootstrap.js) but it is also possible to leak closed windows by keeping references in your add-on. And of course, it's not just windows you need to care about, but also e.g. observers, other types of (XPCOM) listeners etc.

my shapes aren't changing colors I'm not sure why

I have a code that draws a bunch of customized shapes from an xml... I want to make each shape select-able /de-selectable by changing the color of the object and changing backk all other colors when things change but my codes broken but i'm not getting any errors or anything it just doesn't work.
var graphicsShape
function drawLayer(layer){
for (var i =0; i < xmlDoc.getElementsByTagName("polygon").length; i++)
{
if (layer == xmlDoc.getElementsByTagName("polygon")[i].childNodes[0].attributes[4].value)
{ drawSegment(i);
}
}
}
// layer = index z
function drawSegment(a){
var vertexList = xmlDoc.getElementsByTagName("polygon")[a].childNodes;
var graphicsObject = new createjs.Graphics();
graphicsShape = new createjs.Shape(graphicsObject);
graphicsObject.setStrokeStyle(1);
graphicsObject.beginStroke(createjs.Graphics.getRGB(0,0,0));
graphicsObject.beginFill(createjs.Graphics.getRGB(255,0,0));
for(var i = 0; i < vertexList.length; i++){
graphicsObject.lineTo(vertexList[i].attributes[2].value, vertexList[i].attributes[3].value)
stage.addChild(graphicsShape);
}
segmentsArray.push(graphicsShape);
//createContainer(segmentsArray[i]);
}
function createArraysForSegments() {
for(var i=0; i <segmentsArray.length; i++){
segmentsData[i] = new Array;
}
}
function ColorChangeAddEventListener() {
for(var i = 0; i < segmentsArray.length; i++){
segmentsArray[i].addEventListener('click', colorChange(i));
}
}
function colorChange(index){
segmentsArray[index].graphics.beginFill('white');
stage.update();
}
i call the functions later
ColorChangeAddEventListener();
drawLayer(0);
stage.update();
if i type segmentsArray[0].alpha =0.5; it works for that shape, but when I put it in segmentsArray[0].addEventsListener('click', function){segmentsArray[0].alpha=0.5;}) that doesn't work
Just setting the beginFill won't affect the current shape, you will also have to segmentsArray[index].graphics.clear() and redraw the shape.
beginFill() is not the setter for a property but rather a command that affects subsequents commands, like drawRect() for example.

add each dataLabel a function on mouseover/mouseout

I want to add each dataLabel a (just call it "highlightPoint()") function on a mouseover event. It works, if I add this function to a single point.
chartObj.series[0].data[1].dataLabel.on("mouseover", function () {
chartObj.series[0].data[1].setState('hover');
});
It doesn't work if I loop threw my data points. I guess the reference to each individual point is incorrect or something like that.
jsfiddle-link
After you have looped through both data sets, i = 2 and k = 1. So the mouse events are always trying to use i=2 and k=1 to access the data point, which of course is out of bounds. See this fiddle: http://jsfiddle.net/bLvfS/1/
for (var i = 0; i < chartObj.series.length; i++) {
for (var k = 0; k < chartObj.series[i].data.length; k++) {
var onmouseover = function(u, j) {
return function() {chartObj.series[u].data[j].setState('hover');};
}
var onmouseout = function(u, j) {
return function() {chartObj.series[u].data[j].setState();};
}
chartObj.series[i].data[k].dataLabel.on("mouseover", onmouseover(i,k));
chartObj.series[i].data[k].dataLabel.on("mouseout", onmouseout(i,k));
}
}
I've added functions that get passed the current i,k pair and return the actual function you want to run on the mouse events. Maybe someone has a better solution... but it seems to work.
Problem is with closures, see working fiddle: http://jsfiddle.net/Fusher/bLvfS/2/
for (var i = 0; i < chartObj.series.length; i++) {
for (var k = 0; k < chartObj.series[i].data.length; k++) {
(function(i,k){
chartObj.series[i].data[k].dataLabel.on("mouseover", function () {
chartObj.series[i].data[k].setState('hover');
});
chartObj.series[i].data[k].dataLabel.on("mouseout", function () {
chartObj.series[i].data[k].setState();
});
})(i,k);
}
}

iOS UIAutomation UIAElement.isVisible() throwing stale response?

I'm trying to use isVisible() within a loop to create a waitForElement type of a function for my iOS UIAutomation. When I try to use the following code, it fails while waiting for an element when a new screen pops up. The element is clearly there because if I do a delay(2) before tapping the element it works perfectly fine. How is everyone else accomplishing this, because I am at a loss...
Here's the waitForElement code that I am using:
function waitForElement(element, timeout, step) {
if (step == null) {
step = 0.5;
}
if (timeout == null) {
timeout = 10;
}
var stop = timeout/step;
for (var i = 0; i < stop; i++) {
if (element.isVisible()) {
return;
}
target.delay(step);
}
element.logElement();
throw("Not visible");
}
Here is a simple wait_for_element method that could be used:
this.wait_for_element = function(element, preDelay) {
if (!preDelay) {
target.delay(0);
}
else {
target.delay(preDelay);
}
var found = false;
var counter = 0;
while ((!found) && (counter < 60)) {
if (!element.isValid()) {
target.delay(0.5);
counter++;
}
else {
found = true;
target.delay(1);
}
}
}
I tend to stay away from my wait_for_element and look for any activityIndicator objects on screen. I use this method to actual wait for the page to load.
this.wait_for_page_load = function(preDelay) {
if (!preDelay) {
target.delay(0);
}
else {
target.delay(preDelay);
}
var done = false;
var counter = 0;
while ((!done) && (counter < 60)) {
var progressIndicator = UIATarget.localTarget().frontMostApp().windows()[0].activityIndicators()[0];
if (progressIndicator != "[object UIAElementNil]") {
target.delay(0.25);
counter++;
}
else {
done = true;
}
}
target.delay(0.25);
}
Here is a simple and better one using recursion. "return true" is not needed but incase u want it.
waitForElementToDismiss:function(elementToWait,waitTime){ //Using recursion to wait for an element. pass in 0 for waitTime
if(elementToWait && elementToWait.isValid() && elementToWait.isVisible() && (waitTime < 30)){
this.log("Waiting for element to invisible");
target.delay(1);
this.waitForElementToDismiss(elementToWait, waitTime++);
}
if(waitTime >=30){
fail("Possible login failed or too long to login. Took more than "+waitTime +" seconds")
}
return true;
}
Solution
I know this is an old question but here is my solution for a situation where I have to perform a repetitive task against a variable timed event. Since UIAutomation runs on javascript I use a recursive function with an empty while loop that checks the critical control state required before proceeding to the next screen. This way one never has to hard code a delay.
// Local target is the running simulator
var target = UIATarget.localTarget();
// Get the frontmost app running in the target
var app = target.frontMostApp();
// Grab the main window of the application
var window = app.mainWindow();
//Get the array of images on the screen
var allImages = window.images();
var helpButton = window.buttons()[0];
var nextButton = window.buttons()[2];
doSomething();
function doSomething ()
{
//only need to tap button for half the items in array
for (var i=0; i<(allImages.length/2); i++){
helpButton.tap();
}
//loop while my control is NOT enabled
while (!nextButton.isEnabled())
{
//wait
}
//proceed to next screen
nextButton.tap();
//go again
doSomething();
}

Resources