Mesh colisions

[neshke89]

I'm trying to create a room with a panel on a wall which is movable. I'm getting laggy movement with this code, do anyone have any suggestions:
http://prntscr.com/6jlj3y

 

var createScene = function (engine) {    if (BABYLON.Engine.isSupported()) {        BABYLON.SceneLoader.Load("Resources/Models/", "scene1.babylon", engine, function (newScene) {            // Wait for textures and shaders to be ready             newScene.executeWhenReady(function () {                // Attach camera to canvas inputs                window.scene = newScene;                 newScene.activeCamera.attachControl(window.canvas);                window.canvas.addEventListener("pointerdown", onPointerDown, false);                window.canvas.addEventListener("pointerup", onPointerUp, false);                window.scene.onDispose = function () {                    window.canvas.removeEventListener("pointerdown", onPointerDown);                    window.canvas.removeEventListener("pointerup", onPointerUp);                    window.canvas.removeEventListener("pointermove", onPointerMove);                }                window.scene.collisionsEnabled = true;                window.scene.getMeshByName(elementNames.Floor).checkCollisions = true;                window.scene.getMeshByName(elementNames.SideWall).checkCollisions = true;                // BaseWall textures                baseWall = window.scene.getMeshByName(elementNames.BaseWall);                var baseWallMaterial = new BABYLON.StandardMaterial("wall-texture", window.scene);                var baseWallTexture = new BABYLON.Texture("../../../Resources/Textures/wall-texture-1.jpg", window.scene);                baseWallTexture.uScale = 13.0;                baseWallTexture.vScale = 13.0;                baseWallMaterial.diffuseTexture = baseWallTexture;                baseWall.type = elementTypes.Wall;                if (baseWall.material.diffuseTexture) {                    baseWall.material.diffuseTexture.dispose();                }                 baseWall.material = baseWallMaterial;                 addPanel();                // Once the window.scene is loaded, just register a render loop to render it                engine.runRenderLoop(function () {                    window.scene.render();                });            });        });    }}function addPanel() {    $.ajax({        type: "GET",        url: "get-selected-panel",        success: function (data) {            var response = JSON.parse(data);            if (response.Successful) {                var meshName = response.Data.panelName.concat(".babylon");                var preTexture = "../../../Resources/Textures/";                var textureName = preTexture.concat(response.Data.panelTexture).concat(".jpg");                BABYLON.SceneLoader.ImportMesh("", "Resources/Models/", meshName, window.scene, function (meshes) {                    if (window.scene != null) {                        // var panelMaterial = new BABYLON.StandardMaterial("material", window.scene);                        // panelMaterial.diffuseTexture = new BABYLON.Texture (textureName,window.scene);                        // panelMaterial.diffuseTexture.uScale = 5.0;                        // panelMaterial.diffuseTexture.vScale = 5.0;                        meshes.forEach(function (mesh) {                            //   mesh.position = window.scene.activeCamera.getTarget();                            //   mesh.material = panelMaterial;                            mesh.type = elementTypes.Panel;                            mesh.checkCollisions = true;                        });                    }                });            }            else {                alert(response.Error);            }        }    })}var getReferentPosition = function (elementType) {    // Use a predicate to get position on the baseWall    var pickinfo = window.scene.pick(window.scene.pointerX, window.scene.pointerY, function (mesh) {            return mesh == baseWall;        //        else if (elementType == elementTypes.Movable) {       // }    });    if (pickinfo.hit) {        return pickinfo.pickedPoint;    }    return null;}var onPointerDown = function (evt) {    if (evt.button !== 0) {        return;    }    // check if we are under a mesh    var pickInfo = window.scene.pick(window.scene.pointerX, window.scene.pointerY, function (mesh) {        /*        if (!mesh.hasOwnProperty("type") || mesh.type == null) {            return false;        }        if (mesh.type == elementTypes.Panel) {        */            return mesh !== baseWall;        /*        }        else if (mesh.type == elementTypes.Panel) {            return mesh !== window.scene.getMeshByName(elementNames.Panel1);        }        else {            return false;        }        */    });    if (pickInfo.hit) {        window.currentMesh = pickInfo.pickedMesh;        console.log(window.currentMesh);        window.startingPoint = getReferentPosition(window.currentMesh.type);        window.canvas.addEventListener("pointermove", onPointerMove, false);    }}var onPointerUp = function () {    if (window.startingPoint) {        window.startingPoint = null;        window.currentMesh = null;        window.canvas.removeEventListener("pointermove", onPointerMove);    }}var onPointerMove = function (evt) {    console.log(window.currentMesh);    if (!window.startingPoint || !window.currentMesh) {        return;    }    var current = getReferentPosition(window.currentMesh.type);    if (!current) {        return;    }    var diff = current.subtract(window.startingPoint);    //diff.z = 0;    //diff.y = 0;//   window.currentMesh.position.x += diff.x;     window.currentMesh.moveWithCollisions(diff);    window.startingPoint = current;    /*    var current = getReferentPosition(window.currentMesh.type);    if (!current) {        return;    }    var diff = current.subtract(window.startingPoint);    if (window.currentMesh.type == elementTypes.Movable) {        diff.x = 0;        diff.z = 0;        window.currentMesh.position.y += diff.y;        //    window.currentMesh.moveWithCollisions(diff);    }    else if (window.currentMesh.type == elementTypes.Panel) {        console.log("panel");        //diff.y = 0;       // diff.z = 0;        console.log(window.currentMesh.checkCollisions);        window.currentMesh.position.x += diff.x;        // window.currentMesh.moveWithCollisions(diff);    }    */}

[GameMonetize]

Can you share it on the Playground. We will be able to update the code then

[neshke89]

is it possible to upload files to playground? As I'm loading scene and mesh from 3d Max exported files

[Wingnut]

Hi neshke89, welcome to the forum!   No, it is not yet possible to import .babylon files at the playground.  I hear it's CORS related.

To be perfectly frank, we don't see many users attempt dragging of a vertical mesh (panel) along a vertical wall (basewall).  You present us with a fun and adventurous challenge.

I was going to make a testing playground FOR you, but I figured I would give you a chance to try it, first.  Your problem is within the pick and move areas, so you can use ANY mesh/scene for testing that section, right?

So, if you would like to build a playground test scene... head for here... http://playground.babylonjs.com/?1  Don't worry.  It is impossible to accidentally over-write/damage any of our pre-built playground scenes.  You can use ANY of them... as starters for your own "Custom" playground scene.

Remove the sphere, leave the ground.  Add two CreatePlanes or flat-scaled boxes (sidewall and basewall), and get them into proper position with the ground/floor.  Then make one more plane/flatbox (your panel),  and position it on the basewall, just like your picture above. 

Aside:  Are the popup intellisense windows in the playground... annoying?  I hear ya.  Just swear alot, like I do.  It somehow helps.    I'm currently researching a way to do a in-scene-code popup.style.display = "none"... for those intellisense poppers.  Ok, back on topic...

Save often... and don't accidentally hit control-r (reload) or you will lose your recent changes.  Always click the RUN button for scene testing.  Zip it and take the scene to your home computer, if you wish.  When done, paste the code back into a playground (maybe after hitting a CLEAR button)... and save it, then tell us the URL of that SAVE.  (and maybe bookmark it for yourself, too)

Every time you SAVE in the playground, the playground issues a new URL for your custom playground scene.  You'll see it change after every SAVE.

Easy. Now you have your test scene.  Next, install your picking/dragging code, (likely removing references to "window").  You are probably using Window to store things... because of scope issues.  (I hear you.  I've had MANY scope issues in my projects).  But, if I were you, I would try to eliminate all "Window" references.

I recently did a playground for a somewhat-similar issue that Vahith was having.  http://playground.babylonjs.com/#1TZI08#1  Although this playground demo is using on-the-ground pick and drag... it might still be an easy "starter scene" for you. 

At minimum, it might show some functions/examples that don't use Window.

Keep editing your playground scene and hitting RUN, doing saves as often as you like.  Get that playground to be as similar to your scene... as possible.  You essentially have 4 mesh... which are quite easy to create (for a testing scene) without needing a .babylon import. 

Good luck.  Ask questions if you get stuck... we're here for you, and when you get your little playground demo completed, we will all be able to test your vertical dragging and see what it's problem is.

Sound good?

[neshke89]

First of all, I must say WOW. I did not expect that much detailed answer I must thank you for your help. Regarding my problem, I can manage meshes to move, but performance is what is troubling me. Because of loading meshes i couldn't set up playground, but you can see code in action here (I will post whole source code below): http://configurator.devbox9.com/en/configurator.
My problems are:

Why is there no collision detection between two panels?

Why does moving items sometimes stops working (between two self, sometimes between panel and wall)?

 

Also, I'm going to open a newthread because I'm getting these two errors:

-Image corrupt or truncated: blob:http://configurator.devbox9.com/2236e2f7-c4ac-423f-be06-248962949285

- NS_ERROR_NOT_AVAILABLE - this results in textures not loading, I haven't had no luck googling this

As you said that no one did moving panel on walls before - here's source code that can serve as a guidence:
 

var scene;var canvas;var sceneElements;var currentMesh;var startingPoint;var baseWall;var panel;var basePath = "Resources/Models/";var elementNames = {    Floor: "Floor_Object002",    SideWall: "Box1176",    BaseWall: "Box1175",    Panel1: "wandelement1"}var fileNames = {    Panel1: "wandelement1",    Panel2: "wandelement1 (1)",    Shelf_800x200: "Konsolenboden-800x200",    Shelf_800x280: "Konsolenboden-800x280",    Shelf_800x350: "Konsolenboden-800x350",    Korpus_800x450x430: "Korpus-800x450x430"}var elementTags = {    Panel: "panel",    Shelf: "shelf"}var elementTypes = {    Wall: 0,    Panel: 1,    Movable: 2,    New: 3}var createScene = function (engine) {    if (BABYLON.Engine.isSupported()) {        BABYLON.SceneLoader.Load("Resources/Models/", "scene1.babylon", engine, function (newScene) {            // Wait for textures and shaders to be ready            newScene.executeWhenReady(function () {                // Attach camera to canvas inputs                scene = newScene;                newScene.activeCamera.attachControl(canvas);                canvas.addEventListener("pointerdown", onPointerDown, false);                canvas.addEventListener("pointerup", onPointerUp, false);                scene.onDispose = function () {                    canvas.removeEventListener("pointerdown", onPointerDown);                    canvas.removeEventListener("pointerup", onPointerUp);                    canvas.removeEventListener("pointermove", onPointerMove);                }                scene.collisionsEnabled = true;                scene.getMeshByName(elementNames.Floor).checkCollisions = true;                scene.getMeshByName(elementNames.SideWall).checkCollisions = true;                // BaseWall textures                baseWall = scene.getMeshByName(elementNames.BaseWall);                var baseWallMaterial = new BABYLON.StandardMaterial("wall-texture", scene);                var baseWallTexture = new BABYLON.Texture("../../../Resources/Textures/wall-texture-1.jpg", scene);                baseWallTexture.uScale = 13.0;                baseWallTexture.vScale = 13.0;                baseWallMaterial.diffuseTexture = baseWallTexture;                baseWall.type = elementTypes.Wall;                if (baseWall.material.diffuseTexture) {                    baseWall.material.diffuseTexture.dispose();                }                baseWall.material = baseWallMaterial;                addPanel();                // Once the window.scene is loaded, just register a render loop to render it                engine.runRenderLoop(function () {                    scene.render();                });            });        });    }}//define global variables$(document).ready(function () {    canvas = document.getElementById("renderCanvas");    var engine = new BABYLON.Engine(canvas, true);    $("#addShelf").on("click", addShelf);    createScene(engine);    window.addEventListener("resize", function () {        engine.resize();    });});function addShelf() {    var meshName = fileNames.Shelf_800x350;    var meshFileName = meshName.concat(".babylon");    BABYLON.SceneLoader.ImportMesh("", "Resources/Models/", meshFileName, scene, function (meshes) {            console.log(scene);            if (scene != null) {                meshes.forEach(function (mesh) {                    mesh.type = elementTypes.New;                    mesh.checkCollisions = true;                    BABYLON.Tags.AddTagsTo(mesh, elementTags.Shelf);                    mesh.actionManager = new BABYLON.ActionManager(scene);                    var panels = scene.getMeshesByTags(elementTags.Panel);                    panels.forEach(function (panel) {                        //registering triggers                        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction({                            trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger,                            parameter: panel                        }, function () {                            console.log(panel.id);                            mesh.possibleParent = panel;                        }));                        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction({                            trigger: BABYLON.ActionManager.OnIntersectionExitTrigger,                            parameter: panel                        }, function () {                            console.log(panel.id);                            if (mesh.possibleParent == panel) {                                mesh.possibleParent = null;                            }                        }));                    });                });            }        },        function (error) {            console.log("error");            console.log(error);        });}function addPanel() {    $.ajax({        type: "GET",        url: "get-selected-panel",        success: function (data) {            var response = JSON.parse(data);            if (response.Successful) {                var meshName = response.Data.panelName.concat(".babylon");                var preTexture = "../../../Resources/Textures/";                var textureName = preTexture.concat(response.Data.panelTexture).concat(".jpg");                BABYLON.SceneLoader.ImportMesh("", "Resources/Models/", meshName, scene, function (meshes) {                    if (scene != null) {                        // var panelMaterial = new BABYLON.StandardMaterial("material", scene);                        // panelMaterial.diffuseTexture = new BABYLON.Texture (textureName,scene);                        // panelMaterial.diffuseTexture.uScale = 5.0;                        // panelMaterial.diffuseTexture.vScale = 5.0;                        meshes.forEach(function (mesh) {                            //   mesh.position = scene.activeCamera.getTarget();                            //   mesh.material = panelMaterial;                            if (scene.getMeshesByTags(elementTags.Panel).length > 0) {                                mesh.position.z = scene.getMeshesByTags(elementTags.Panel)[0].position.z;                            }                            mesh.type = elementTypes.Panel;                            mesh.checkCollisions = true;                            BABYLON.Tags.AddTagsTo(mesh, elementTags.Panel);                        });                    }                });            }            else {                alert(response.Error);            }        }    })}function changeTexture(mesh, textureName) {    var material;    if (mesh.material != null) {        material = mesh.material;    }    else {        material = new BABYLON.StandardMaterial("material", scene);    }    var preTexture = "../../../Resources/Textures/";    var texturePath = preTexture.concat(textureName).concat(".jpg");    material.diffuseTexture = new BABYLON.Texture(texturePath, scene);    material.diffuseTexture.uScale = 5.0;    material.diffuseTexture.vScale = 5.0;    //freeing memory    if (material.diffuseTexture) {        material.diffuseTexture.dispose();    }    mesh.material = material;}function takeScreenshot() {    if (scene != null) {        BABYLON.Tools.CreateScreenshot(scene.getEngine(), scene.activeCamera, {precision: 2});    }}var getReferentPosition = function (currentMesh) {    console.log(currentMesh.name);    // Use a predicate to get position on the baseWall    var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {        if (currentMesh.type == elementTypes.Panel || currentMesh.type == elementTypes.New) {            return mesh == baseWall;        }        else if (currentMesh.type == elementTypes.Movable) {            if (currentMesh.hasOwnProperty("parent") && currentMesh.parent != null) {                return currentMesh.parent == mesh;            }        }    });    if (pickinfo.hit) {        return pickinfo.pickedPoint;    }    return null;}var onPointerDown = function (evt) {    if (evt.button !== 0) {        return;    }    // check if we are under a mesh    var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {        if (!mesh.hasOwnProperty("type") || mesh.type == null) {            return false;        }        if (mesh.type == elementTypes.Panel || mesh.type == elementTypes.New) {            return mesh !== baseWall;        }        else if (mesh.type == elementTypes.Movable) {            return mesh !== scene.getMeshByName(elementNames.Panel1);        }        else {            return false;        }    });    if (pickInfo.hit) {        currentMesh = pickInfo.pickedMesh;        if (currentMesh.type == elementTypes.New) {            scene.getMeshesByTags(elementTags.Panel)[0].material.emissiveColor = new BABYLON.Color4(0, 1, 0, 1);        }        startingPoint = getReferentPosition(currentMesh);        canvas.addEventListener("pointermove", onPointerMove, false);    }}var onPointerMove = function (evt) {    if (!startingPoint || !currentMesh) {        return;    }    var current = getReferentPosition(currentMesh);    if (!current) {        return;    }    var diff = current.subtract(startingPoint);    if (currentMesh.type == elementTypes.Movable) {        diff.x = 0;        diff.z = 0;        currentMesh.moveWithCollisions(diff);        //    currentMesh.moveWithCollisions(diff);    }    else if (currentMesh.type == elementTypes.Panel || currentMesh.type == elementTypes.New) {        diff.z = 0;        //console.log(currentMesh.checkCollisions);        currentMesh.moveWithCollisions(diff);    }    startingPoint = current;}var onPointerUp = function () {    if (startingPoint) {        startingPoint = null;        if (currentMesh.type == elementTypes.New) {            scene.getMeshesByTags(elementTags.Panel)[0].material.emissiveColor = new BABYLON.Color4(0, 0, 0, 1);            //add element to panel            currentMesh.type = elementTypes.Movable;            if (currentMesh.possibleParent) {                currentMesh.position.x = currentMesh.possibleParent.getBoundingInfo().boundingBox.center.x;                SetParent(currentMesh, currentMesh.possibleParent);            }            else {                currentMesh.dispose();            }            //currentMesh.parent = panel;            //currentMesh.position.x = 0;            //currentMesh.position.z = 0;            //panel.subMeshes.push(mesh);        }        currentMesh = null;        canvas.removeEventListener("pointermove", onPointerMove);    }}//HELPERSfunction SetParent(child, parent) {    var globalPosition = child.position;    child.parent = parent;    var matrix = new BABYLON.Matrix();    parent.getWorldMatrix().invertToRef(matrix);    child.position = BABYLON.Vector3.TransformCoordinates(globalPosition, matrix);    child.rotate(BABYLON.Axis.Y, -3.14 / 2, BABYLON.Space.LOCAL);    var positionX = parent.getBoundingInfo().boundingBox.center.x;    child.setAbsolutePosition(new BABYLON.Vector3(positionX, child.getAbsolutePosition().y, child.getAbsolutePosition().z));}

I can post scene and models if someone wish to reproduce

[Wingnut]

Ahh, sorry.   I can't help much with Blender exporting... but maybe others can.  Yes, a bogged-down scene can definitely affect drag-moves and collision detect. 

 

I was hoping you could temporarily MAKE all of your meshes in a playground scene, and then we would know if something in the .babylon import was a problem (because the import would not be used in the playground demo). 

 

You know, make the same scene, but create the meshes with babylonJS, in the playground, and don't import any models.  Then we could test the functionality of your code (in a bare-bones environment).  You know how it goes.  Try turning things off... to find what is causing the scene to be slow.   A good thing to turn-off... is the importer.

 

Once you do that, you can ask yourself "Does the scene run much faster/better when simple "local-made" mesh are used... instead of imported mesh?" 

 

If YES, then... you know... something is wrong with the Blender models... or something went goofy during the export, or during the import.  (a problem in the .babylon file or the making-of)

 

I dunno.  Maybe some experts can spot something in your code.  Good luck.

[neshke89]

Yep, I know what you mean. I just wanted to see if I made some rookie mistake, that's why I shared the code. It's interesting issue so I will replicate in playground as soon as I can.