Meshes disappears near the ground

[insane_joe]

I have an issue with meshes, which lies on the ground: when I move camera - they appears and disappears. Can you help me to fix this?

 

link: https://ptg-logistic-ts-insane-joe.c9users.io/

 

I tried to use _updateBoundingBox and others.

 

Babylon v: 2.2.0

 

 

[insane_joe]

The code for add ground:

var _ground = BABYLON.Mesh.CreateGround("ground",            config.ground.width,            config.ground.height,            config.ground.subdivisions,            scene, false, function () {                    });        _ground.material = groundMaterial;            _ground.setPivotMatrix(BABYLON.Matrix.Translation(config.ground.width / 2, 0, config.ground.height / 2));    _ground.position = new BABYLON.Vector3(+(config.coords.boxCoords.lon) * +(config.coords.multiplicator), 0, +(config.coords.boxCoords.lat) * +(config.coords.multiplicator));        camera.setTarget( _ground.position );        XHRGetter.get('/decorations/building/by-location/' + config.coords.boxCoords.lat + '/' + config.coords.boxCoords.lon, function (buildingsIds) {        var ids = JSON.parse(buildingsIds);                ids.forEach(function (buildingId) {            var b = new CBuildingMesh(buildingId);        });                console.log('UPLADED BOX BUILDINGS FOR BOX: ' + config.coords.boxCoords.lat + '\/' + config.coords.boxCoords.lon, 'TOTAL BUILDINGS: ' + ids.length);    });

The code for building (disappearing mesh) : 

function vectorFromCoords(coordsPoint, useCoordsMultiplicator:bool):BABYLON.Vector3 {    if (useCoordsMultiplicator) {        return new BABYLON.Vector3(+(coordsPoint.lon) * +(config.coords.multiplicator), 0, +(coordsPoint.lat) * +(config.coords.multiplicator));    } else {        return new BABYLON.Vector3(+(coordsPoint.lon), 0, +(coordsPoint.lat));    }    }export class CBuildingMesh extends CGroundDecoration {    public walls:BABYLON.AbstractMesh[] = [];    public points:[];        constructor(pointsOrId) {        super('building', scene);                if (Array.isArray(pointsOrId)) {            this.points = pointsOrId;            this.drawBuilding(true);        } else {            var self = this;                        XHRGetter.get('/decorations/building/' + pointsOrId, function (data) {                self.points = JSON.parse(data);                                self.drawBuilding(false);            });        }            }        drawBuilding(useCoordsMultiplicator) {        var startPoint = vectorFromCoords(this.points[0], useCoordsMultiplicator);                var resultVectors = [];                for(var i = 0; i < (this.points.length); i++) {            var vector1 = vectorFromCoords(this.points[i], useCoordsMultiplicator);            //var vector2 = vectorFromCoords(this.points[i + 1], useCoordsMultiplicator);                        resultVectors.push(vector1.subtract(startPoint));            //resultVectors.push(vector2.subtract(startPoint));        }                // console.log(resultVectors);                var roofPath = [].concat(resultVectors);        roofPath.pop();        var roofMesh = this.createFreeGround('buildingRoof', roofPath, scene, false);        roofMesh.material = ROOF_MATERIAL;                roofMesh.parent = this;                resultVectors = resultVectors.map(function (x) {            return new BABYLON.Vector3(x.x, x.z, 0);        });                var buildingShape = BABYLON.Mesh.ExtrudeShape('buildingShape', resultVectors, [BABYLON.Vector3.Zero(), new BABYLON.Vector3(0,0,-config.buildings.height)], 1, 0, 0, scene, false, BABYLON.Mesh.DOUBLESIDE);        buildingShape.rotate(new BABYLON.Vector3(1,0,0), Math.PI / 2);        buildingShape.rotate(new BABYLON.Vector3(0,0,1), Math.PI);        buildingShape.rotate(new BABYLON.Vector3(1,0,0), Math.PI);                buildingShape.material = WALL_MATERIAL;                buildingShape.parent = this;        this.position = startPoint;    }}

ground attached in project by src="built/main-objects/ground.js", building attached by src="built/classes/decorations/building/index.js"

[insane_joe]

I think, i found a bug in my code in this part: 

resultVectors = resultVectors.map(function (x) {            return new BABYLON.Vector3(x.x, x.z, 0);        });                var buildingShape = BABYLON.Mesh.ExtrudeShape('buildingShape', resultVectors, [BABYLON.Vector3.Zero(), new BABYLON.Vector3(0,0,-config.buildings.height)], 1, 0, 0, scene, false, BABYLON.Mesh.DOUBLESIDE);        buildingShape.rotate(new BABYLON.Vector3(1,0,0), Math.PI / 2);        buildingShape.rotate(new BABYLON.Vector3(0,0,1), Math.PI);        buildingShape.rotate(new BABYLON.Vector3(1,0,0), Math.PI);

I get buildings walls by extruding lines verically over Y axis, but i haven't found any option to extrude it over Y-axis and used extrude over Z (which worked normally) and then have two rotations to get shape vertically extruded. Can you help me with extrude shape vertically?

 

for example vectors, I try to extrude over Y: 

[  {"x":0,"y":0,"z":0},  {"x":-1.1400000001303852,"y":0,"z":-207.99000000022352},  {"x":428.25,"y":0,"z":-208.74000000022352},  {"x":429.23999999975786,"y":0,"z":-28.75},  {"x":306.25,"y":0,"z":-28.540000000037253},  {"x":306.04999999981374,"y":0,"z":-66.29000000003725},  {"x":58.299999999813735,"y":0,"z":-65.86000000033528},  {"x":58.66000000014901,"y":0,"z":-0.09999999962747097},  {"x":0,"y":0,"z":0}]

but I use vectorsX0Z -> map -> vectorsXZ0 and then extrude over Z and rotate it over X and Z axises that is why my buildings is under the ground.

 

Playgound demo

 

http://www.babylonjs-playground.com/#1YZBCH

 

can you help please?

[jerome]

For extrusion, the model shape MUST always be defined in the xOy plane... well, a 2D shape.

 

Then you can extrude it in any direction you want. 

[insane_joe]

But it doesn't work - see play ground demo : http://www.babylonjs-playground.com/#1YZBCH

[insane_joe]

I make extrudion with Ribbon directly and now all my Meshes are over the ground. But they still continues blinking when I rotating camera...

[insane_joe]

I applied babylon v. 2-3 alpha version to project, and when I run SceneOptimizer over debug layer - all builnding meshes are disappears. May be - this is the key to bug in my code?

[insane_joe]

You can turn on debug layer over Dat.GUI interface in top-right corner (bottom flag). I have no idea - what can I change to fix this blinks to continue move forward )
 

[insane_joe]

I checked all vertices of buildings - if they are under the Y=0 with this code: 

buildings = scene.meshes.filter(function (x) {return x.name.indexOf('building') !== -1;});buildings.forEach(function (building) {   verticesArrays = [];   building.getChildren().forEach(function (x) {verticesArrays.push(x.getVerticesData(BABYLON.VertexBuffer.PositionKind))});   verticesArrays.forEach(function (currentVerticeArray) {      for (var i = 0; i < currentVerticeArray.length / 3; i++) {         pY = currentVerticeArray[i*3+1];         if (pY < 0) {            console.log(pY);         }      }   });});

it haven't log anything.

 

ground vertices are:

scene.meshes.filter(function (x) {return x.name.indexOf('ground') !== -1;})[0].getVerticesData(BABYLON.VertexBuffer.PositionKind)[-500, 0, 500, 500, 0, 500, -500, 0, -500, 500, 0, -500]

[insane_joe]

Even I kill the 'ground' 

scene.meshes.filter(function (x) {return x.name.indexOf('ground') !== -1;})[0].dispose()

roofs still continue blinking on buildings

[c75]

Try PolygonMeshBuilder method to build your buildings. it's more suitable for your task.

http://www.babylonjs-playground.com/#EALGM#1

[insane_joe]

carcinogen75

Sorry, but it doesn't help too (((

 

https://ptg-logistic-ts-insane-joe.c9users.io/

 

Now I make it: 

var resultVectors = [];                for(var i = 0; i < (this.points.length); i++) {            var vector1 = vectorFromCoords(this.points[i], useCoordsMultiplicator);                        resultVectors.push(vector1.subtract(startPoint));        }........        var shape = resultVectors.map(function (v) { return new BABYLON.Vector2(v.x, v.z); });                var buildingShape = new BABYLON.PolygonMeshBuilder('buildingShape' + this.timestampCreate, shape, scene).build(true, config.buildings.height);        buildingShape.enableEdgesRendering();        buildingShape.material = ROOF_MATERIAL;                buildingShape.parent = this;        this.position = startPoint.clone();        this.position.y = config.buildings.height;

Any indeas?

[insane_joe]

May be I create ground with bugs?

var _ground,    groundMaterial = new BABYLON.StandardMaterial("ground", scene);    groundMaterial.diffuseTexture = new BABYLON.Texture("src/ground/grass.png", scene);    groundMaterial.diffuseTexture.uScale = 6;    groundMaterial.diffuseTexture.vScale = 6;    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);var _ground = BABYLON.Mesh.CreateGround("ground",            config.ground.width,            config.ground.height,            config.ground.subdivisions,            scene, true, function () {                    });        _ground.material = groundMaterial;            _ground.setPivotMatrix(BABYLON.Matrix.Translation(config.ground.width / 2, 0, config.ground.height / 2));    _ground.position = new BABYLON.Vector3(+(config.coords.boxCoords.lon) * +(config.coords.multiplicator), 0, +(config.coords.boxCoords.lat) * +(config.coords.multiplicator));        camera.setTarget( _ground.position );

[c75]

I think you have problem that I have seen before. Check this thread http://www.html5gamedevs.com/topic/18593-hi-value-positions-glitch/ and demo from first post

[insane_joe]

carcinogen75

Thanx!!! This - helps me!

 

in future cases: if you use extra big coords - you have troubles with dynamic zIndex. To fix this problem - add to material useLogarithmicDepth setted to true.

Something like that:

const WALL_MATERIAL = new BABYLON.StandardMaterial("wallMaterial", scene);WALL_MATERIAL.diffuseTexture = new BABYLON.Texture("src/materials/bricks.jpg", scene);WALL_MATERIAL.diffuseTexture.uScale = 10;WALL_MATERIAL.diffuseTexture.vScale = 10;WALL_MATERIAL.useLogarithmicDepth = true;const ROOF_MATERIAL = new BABYLON.StandardMaterial('roofMaterial', scene);ROOF_MATERIAL.diffuseColor = BABYLON.Color3.Gray();ROOF_MATERIAL.useLogarithmicDepth = true;