CODEWITHSUNDEEP
javascriptthree.js
Keith M
Keith M

Reputation: 1249

Optimize three.js for a large mesh

So I'm working on a project where I have around 59k points, and each point should be represented as a cube in three.js.

I have it combining all the geometries together, into one mesh so that it improves performance, but It is still pretty slow (around 10-30 fps).

How can I improve this? For this project it's only acceptable to have it running smoothly (say around 40-60 fps), so I really need some improvements.

Here is my code that creates the mesh and scene:

function init() {

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

camera.position.set(230.09813315369976, 233.67707474083232, -181.06937619976165);
camera.updateProjectionMatrix();

THREE.currentCamera = camera;

if (controlsEnabled) {
    controls = new THREE.OrbitControls(camera);
    controls.damping = 0.2;
}
scene = new THREE.Scene();

geometry = new THREE.Geometry();
material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false});
console.log("Adding " + locations.length + " voxels");

var matrix = new THREE.Matrix4();

$.each(locations, function (index, value) {
    geo = new THREE.BoxGeometry(1, 1, 1);

    matrix.makeTranslation(
            value['x'],
            0,
            value['y']
            );

    geometry.merge(geo, matrix);
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
axes = new THREE.AxisHelper(100);
scene.add(axes);
camera.lookAt(mesh);
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
var element = renderer.domElement;
document.getElementById('page-wrapper').appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
var flag = 0;
element.addEventListener("mousedown", function () {
    flag = 0;
}, false);
element.addEventListener("mousemove", function () {
    flag = 1;
}, false);
element.addEventListener("mouseup", function () {
    if (flag === 0) {
        console.log("click");
        doRaycast = true;
    }
    else if (flag === 1) {
        console.log("drag");
    }
}, false);
$('#loading-vis').hide();
animate();

}

Upvotes: 0

Views: 1346

Answers (1)

pailhead
pailhead

Reputation: 5431

While it is true that batching the geometry into as few draw calls as possible is an optimization, it's not exactly that straightforward.

I can't exactly explain what goes on under the hood, but the safest and easiest way is to issue a draw call that has less than 65536 triangles (2^16) in a so called "triangle soup".

What happened was you batched everything into one geometry, but under the hood either something messy happened with the indexed geometry, or somehow the geometry wa broken back into fewer pieces.

The solution was not to batch everything into one geom, but multiple, each having less than 65536 triangles.

Upvotes: 1

Related Questions