Mesh not removed from scene when a node in its parent chain is dismount()ed #439
Description
Description
Calling dismount() on a Node() that is a parent of a Mesh() does not remove the mesh from a scene. Instead, the Mesh remains in the scene and any components along that same chain are no longer updated, thus any animated transformations applied to the mesh seem to "freeze".
I have encountered some other more obscure examples of generalised weirdness when dismount()ing meshes, but hopefully they are all part of this same bug. Will test a few things again once a fix comes through.
Steps to Reproduce
- Add a node X to a scene using `var x = scene.addChild()`
- Add a `Mesh` to node X
- Add a component to that mesh to animate it
- Dismount node X `x.dismount()`
- Observe that mesh remains in scene but animation of mesh stops
Isolation
Problem exists in:
- 0.6.2
- 0.7.0
- develop as at 2015-07-21 (b2017d9)
with @alexanderGugel's pull request entitled 'fix: Correctly mount and dismount' (700d259) applied.
Code Example
In this complete example, a wire-frame cube should spin for 3 seconds then disappear. Instead it freezes in place after 3 seconds.
See oCubeNode.dismount(); below:
<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="http://code.famo.us/famous/0.6.2/famous.min.js"></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)
//.setAbsoluteSize(110,110,110)
.setAlign(0.5,0.5,0.5)
.setMountPoint(0.5,0.5,0.5)
;
var oCubeNode = addDebugCube(centeredOriginNode);
var spinner = scene.addComponent({
onUpdate: function(time) {
centeredOriginNode.setRotation(time/250, time/1000, time/500);
scene.requestUpdateOnNextTick(spinner);
}
});
scene.requestUpdate(spinner);
setTimeout(function() {
//centeredOriginNode.hide(); // this works (mesh disappears)
//centeredOriginNode.dismount(); // DOES NOT WORK (MESH FREEZES IN PLACE)
oCubeNode.dismount(); // DOES NOT WORK (MESH FREEZES IN PLACE)
}, 1000 * 3);
// utils
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>