Bad performance with complex geometries

Hello,

This animation is not fluid. There are twenty Hopf tori (the three-lobed things), and each one is composed of a lot of triangles (something like 2x150x150), otherwise they are not smooth. Is there something to do to make it more fluid?

Hi!
Could you clarify what it means?

Not easy with my English :wink:
The animation pains, it is not perfectly continuous. Sometimes it seems that the animation stops a brief time. This is more striking if you increase the number of triangles (by increasing uSteps and vSteps at the third line).

I think this is a memory issue. If I switch from ParametricGeometry to ParametricBufferGeometry, the demo runs fine.

http://jsfiddle.net/qr7p9xvg/

In general, BufferGeometry is way more memory friendly, since Geometry allocates for each vertex, normal or face an object. This is not true for BufferGeometry.

I don’t see the difference. But maybe I should restart my computer. I have not restarted for a couple of days, and there are many open windows. It consumes 6 GB of memory.

On my machine, the animation is perfectly fluid and smooth when it’s just rotating on it’s own.

When i try to rotate it with my mouse, it jitters. Looks to me that it’s maybe an issue with the mouse values.

If i comment out the automatic rotation, the drag rotation is perfectly smooth at higher speeds. If i move my mouse really slow it “jumps”.

This is perfectly normal and expected. With low mouse deltas, you only get a handful of directions - NWSE and NE, NW, SE, SW. Depending on the speed and rotation ratio, this may feel jittery.

You could try blending over a few frames, or playing with the speeds. For example, this feels like total butter:

if (isDragging) {
        var deltaRotationQuaternion = new THREE.Quaternion()
            .setFromEuler(new THREE.Euler(
                Math.PI / 180 * (deltaMove.y * .1),
                Math.PI / 180 * (deltaMove.x * .1),
                0,
                'XYZ'
            ));
        object.quaternion.multiplyQuaternions(deltaRotationQuaternion,
            object.quaternion);
    }

Thank you.

Oddly, the animation becomes very smooth when I use a texture :
https:// laustep .github.io/stlahblog/frames/threejs_TwentyHopfTori.html (remove the two white spaces, I can’t insert this link here)
Is it expected?

And even with the MeshNormalMaterial… This has nothing to do with the material: my PC had a problem yesterday! Today the animation is smooth!

But you’re right @Mugen87, this is smooth with the ParametricBufferGeometry only.

Previously I started with ParametricGeometry, and I converted to a buffer geometry with fromGeometry. So it’s not a good idea to do that.

The issue here is that the per frame rotation is “fighting” with the mouse rotation. You just need to add a check to prevent rotation in the render loop when the mouse is dragged.

http://jsfiddle.net/looeee/rgb6v5tk/

1 Like