Skip to content

Adding a camera to a scene then resizing the scene deletes all meshes from the scene #453

@CompSciFutures

Description

@CompSciFutures

Steps to reproduce

  1. Add some meshes to a `Scene`
  2. Add a `DOMElement` to the Scene (this is required for the bug to occur)
  3. Add a `Camera` to the same Scene
  4. Resize the said Scene with Scene#setScale()
  5. Observe the meshes will disappar

Isolation

Tested against:

  • v0.6.2 (hard to observe in the code example but its there)
  • v0.7.0
  • a5d7fd5

Code Example

    '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 Camera = famous.components.Camera;

    var scene = FamousEngine.createScene();
    var centeredOriginNode;

    FamousEngine.init();

    scene
        .setSizeMode('relative', 'relative', 'absolute')
        .setProportionalSize(0.7, 0.7, 0.7)
        .setAbsoluteSize(1000, 1000, 500)
        .setOrigin(0.5,0.5,0.5)
        .setRotation(0.5,0.5,0.5)
        ;

    centeredOriginNode =
        scene.addChild()
            .setSizeMode('relative','relative','relative')
            .setProportionalSize(0.6,0.6,0.6)
            .setAlign(0.5,0.5,0.5)
            .setOrigin(0.5,0.5,0.5)
            .setMountPoint(0.5,0.5,0.5)
            ;

    var oCubeNode = addDebugCube(centeredOriginNode);
    oCubeNode.setOrigin(0.5,0.5,0.5);

    var oDOMElement = new DOMElement(centeredOriginNode, {properties: {'font-size':'100px', 'background-color':'#F00'}}).setContent("hello cruel world!");

    setTimeout(function() {
        var oCamera = new Camera(scene).setDepth(800);
        oDOMElement.setContent("camera added to scene");
        setTimeout(function() {
            scene.setScale(0.5,0.5,0.5);
            oDOMElement.setContent("scene scaled (notice we are now missing the cube mesh)");
        }, 1000 * 3);
    }, 1000 * 3);


    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;
    };

Relevant code chunk

        setTimeout(function() {
            scene.setScale(0.5,0.5,0.5);
            oDOMElement.setContent("scene scaled (notice we are now missing the cube mesh)");
        }, 1000 * 3);

Observed Output

After one adds a wireframe cube mesh & a DOM element (correct output):
tick1

After then adding a camera (again correct output):
tick2

Finally, this is the output after scaling the scene. Notice that the wireframe cube has disappeared:
tick3

Expected Output

The red DOM element should be enclosed by a wireframe cube. Instead the cube has disappeared.

Workaround

Add a child node to the scene below the camera then Node#setScale() the child node instead.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions