Hello,
I’ve been recently testing occlusion culling in BJS. And I resulted finding some unstable behavior when setting the occlusion culling to all meshes in my scene. Some meshes flickered or disappeared when it should be seen and rendered for sure. Pls check out my screen record and the codes I posted. Any suggestions and help would be appreciated.
Playground codes:
https://www.babylonjs-playground.com/#GLWT40
Source codes are posted below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>occl-test</title>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script>
var createScene = function (engine) {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera('Camera', 0, 0, 10, null, scene);
camera.minZ = 0.01;
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
const origin = BABYLON.Vector3.Zero();
const size = 750;
var m = BABYLON.MeshBuilder.CreateSphere('sphere', {
segments: 64,
diameter: 0.8
}, scene);
m.isVisible = false;
var sharedGeometry = m.geometry;
var gridSize = 3;
var meshList = [];
var ground = BABYLON.Mesh.CreateGround('ground1', gridSize * 1.5, gridSize * 1.5, 2, scene);
ground.position.y = gridSize / 2;
this.totalSize = gridSize * gridSize * gridSize;
for (var x = 0; x < gridSize; x++)
for (var y = 0; y < gridSize; y++)
for (var z = 0; z < gridSize; z++) {
var mesh = new BABYLON.Mesh('sphere ' + x + '_' + y + '_' + z, scene);
sharedGeometry.applyToMesh(mesh);
mesh.occlusionRetryCount = -1;
mesh.position.set(-gridSize / 2 + x, -gridSize / 2 + y, -gridSize / 2 + z);
mesh.occlusionQueryAlgorithmType = BABYLON.AbstractMesh.OCCLUSION_ALGORITHM_TYPE_CONSERVATIVE;
mesh.occlusionType = BABYLON.AbstractMesh.OCCLUSION_TYPE_OPTIMISTIC;
mesh.isOccluded = true;
meshList.push(mesh);
}
var frameCount = 0;
scene.registerBeforeRender(() => {
console.log('frame -----------------------------------')
//adjust the position
frameCount++;
if (frameCount % 120 < 60) {
camera.setPosition(new BABYLON.Vector3(-4.85140043738961, 1.5112470313327224, 1.0862993171239395 * 1.1));
}else {
camera.setPosition(new BABYLON.Vector3(-4.85140043738961, 1.5112470313327224, 1.0862993171239395));
}
this.occludedSize = meshList.filter((mesh) => {
if (mesh.isOccluded) console.log(mesh.id);
return mesh.isOccluded;
}).length;
console.log('occludeSize:' + this.occludedSize);
});
return scene;
};
var canvas = document.getElementById("mycanvas");
canvas.style.width = '100%';
canvas.style.height = '100%';
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }, false);
window.scene = createScene(engine);
engine.runRenderLoop(function () {
scene.render();
});
</script>
</body>
</html>
