dismounting any node containing a mesh dismounts all meshes #443
Description
Calling dismount() on any Node() that is a parent of a Mesh() removes all meshes from the scene regardless of where they are in the scene graph.
Steps to reproduce
- Add two nodes X & Y to a scene using `var x = scene.addChild(), y = scene.addChild()`
- Add a first `Mesh` to node X
- Add a second `Mesh` to node Y
- dismount() node X with `x.dismount()`
- Observe that:
- the dismounted() X mesh disappears (correct behavior); AND
- the Y mesh which is a non-descendant of X also disappears (incorrect behavior)
Isolation
- This issue is not present in 0.7.0 but instead is replaced by the freezing problem described in bug Mesh not removed from scene when a node in its parent chain is dismount()ed #439
- This issue is in today's develop head (a5d7fd5) and was introduced by @alexanderGugel's fix for Mesh not removed from scene when a node in its parent chain is dismount()ed #439 (6fff5ce)
Example
Relevant Code Section
See aCubeNodes[0].dismount();:
Working Example Code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Famous0.6.2</title>
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="Seed Famous@0.6.2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src="lib/famous-20150722-a5d7fd552505c0f2d40c4a86aa0a61950736ff16.js"></script>
</script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: black;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
</style>
</head>
<body>
<script>
'use strict';
console.log(famous);
//var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var FamousEngine = famous.core.FamousEngine;
var Mesh = famous.webglRenderables.Mesh;
var Color = famous.utilities.Color;
var Geometry = famous.webglGeometries.Geometry;
var scene = FamousEngine.createScene();
var centeredOriginNode = scene.addChild();
FamousEngine.init();
scene
.setSizeMode('relative', 'relative', 'absolute')
.setProportionalSize(0.7, 0.7, 0.7)
.setAbsoluteSize(1000, 1000, 500)
;
centeredOriginNode =
createNode(scene)
.setAlign(0.5,0.5,0.5)
.setMountPoint(0.5,0.5,0.5)
;
spin(centeredOriginNode, 2500,10000,5000);
// add big cube
var oBigCubeNode = addDebugCube(centeredOriginNode);
// add some little cubes to it
var aCubeNodes = [];
for ( var i = 0; i < 100; i++ ) {
var fCubeSize = Math.random() * 100;
var oNewCube =
addDebugCube(oBigCubeNode)
.setSizeMode('absolute', 'absolute', 'absolute')
.setProportionalSize(0.7, 0.7, 0.7)
.setAbsoluteSize(fCubeSize, fCubeSize, fCubeSize)
.setAlign(Math.random(), Math.random(), Math.random())
.setOrigin(0.5, 0.5, 0.5)
.setMountPoint(0.5, 0.5, 0.5)
;
spin(oNewCube,(Math.random()-0.5) * 1000 + 100, (Math.random()-0.5) * 1000 + 100, (Math.random()-0.5) * 1000 + 100);
aCubeNodes.push(oNewCube);
}
setTimeout(function() {
//centeredOriginNode.hide(); // this works (mesh disappears)
//centeredOriginNode.dismount(); // this works (mesh disappears)
//oBigCubeNode.dismount(); // this works (mesh disappears)
//removeCube(); // THIS DOESN'T WORK (EVERYTHING DISAPPEARS AT ONCE)
aCubeNodes[0].dismount(); // THIS DOESN'T WORK (EVERYTHING DISAPPEARS AT ONCE)
}, 1000 * 3);
// utils
function removeCube() {
if (aCubeNodes.length <= 0)
return;
aCubeNodes.pop().dismount();
setTimeout(removeCube, 100);
}
function spin(node, tx,ty,tz) {
var spinner = node.addComponent({
onUpdate: function(time) {
node.setRotation(!tx ? 0 : time/tx, !ty ? 0 : time/ty, !tz ? 0 : time/tz);
node.requestUpdateOnNextTick(spinner);
}
});
node.requestUpdate(spinner);
}
function addDebugCube(parent) {
var oCube = parent.addChild().setOpacity(0.3);
// cube
var oGeometry =
new Geometry({
type: 'LINES',
buffers: [
{ name: 'a_pos', data: [
-1,-1,-1, 1,-1,-1, 1,1,-1, -1,1,-1,
-1,-1,1, 1,-1,1, 1,1,1, -1,1,1
], size: 3 },
{ name: 'indices', data: [
0,1, 1,2, 2,3, 3,0, // front face
4,5, 5,6, 6,7, 7,4, // back face
0,4, 4,7, 7,3, 3,0, // left face
1,5, 5,6, 6,2, 2,1 // right face
], size: 2 }
]});
var oMesh =
new Mesh(oCube)
.setGeometry(oGeometry)
.setBaseColor(new Color("#FFFFFF"))
;
return oCube;
};
function createNode(parent) {
var node = parent.addChild();
var aParentSizeMode = parent.getSizeMode();
var aParentProportionalSize = parent.getProportionalSize();
var aParentAbsoluteSize = parent.getAbsoluteSize();
var aParentDifferentialSize = parent.getDifferentialSize();
node
.setSizeMode(aParentSizeMode[0], aParentSizeMode[1], aParentSizeMode[2])
.setProportionalSize(aParentProportionalSize[0], aParentProportionalSize[1], aParentProportionalSize[2])
.setAbsoluteSize(aParentAbsoluteSize[0], aParentAbsoluteSize[1], aParentAbsoluteSize[2])
.setDifferentialSize(aParentDifferentialSize[0], aParentDifferentialSize[1], aParentDifferentialSize[2])
.setOrigin(0.5, 0.5, 0.5)
;
return node;
}
</script>
</body>
</html>