TessellateModifier too many triangles

Questions
1

I use TessellateModifier from documentation on my glb model, everything works perfect but I have too many triangles. How I can reduce number of triangles? Do i need to simplify the model or i can do it through threejs?

    let geometry = g;

    geometry.center();

    const tessellateModifier = new TessellateModifier(8, 6);

    geometry = tessellateModifier.modify(geometry);

    const numFaces = geometry.attributes.position.count / 3;

    const colors = new Float32Array(numFaces * 3 * 3);

    const displacement = new Float32Array(numFaces * 3 * 3);

    const color = new THREE.Color();

    for (let f = 0; f < numFaces; f++) {

        const index = 9 * f;

        const h = 0.2 * Math.random();

        const s = 0.5 + 0.5 * Math.random();

        const l = 0.5 + 0.5 * Math.random();

        color.setHSL(h, s, l);

        const d = 10 * (0.5 - Math.random());

        for (let i = 0; i < 3; i++) {

            colors[index + (3 * i)] = color.r;

            colors[index + (3 * i) + 1] = color.g;

            colors[index + (3 * i) + 2] = color.b;

            displacement[index + (3 * i)] = d;

            displacement[index + (3 * i) + 1] = d;

            displacement[index + (3 * i) + 2] = d;

        }

    }

    geometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));

    geometry.addAttribute('displacement', new THREE.BufferAttribute(displacement, 3));

   uniforms = {
        amplitude: { value: 1.0 }
   };

 const shaderMaterial = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent

 });

mesh = new THREE.Mesh(geometry, shaderMaterial);
mesh.rotation.x = 2 * Math.PI * (90 / 360);
scene.add(mesh);

function render() {

    const time = Date.now() * 0.001;

    if (uniforms) {

        if (uniforms.amplitude.value > 0)

            uniforms.amplitude.value -= 0.01;

      

    }

    controls.update();
    renderer.render(scene, camera);

}
2

Hi!

Try to pass a greater value in the first parameter and a lesser value in the second parameter, in the constructor of TesselationModifier. See the comment section of what the modifier does: three.js/examples/jsm/modifiers/TessellateModifier.js at f0e2b3453f1412b53389beb04add414e3a80023c · mrdoob/three.js · GitHub

1 Like
3

I didn’t get the desired effect by changing those numbers. Now they come from all sides, maybe if they come only along the y axis will solve my problem. I don’t know how to change that