Анимированные каркасные линии

Question

Мне просто любопытно, если у кого-нибудь есть идея, как добиться такого каркасного "постепенного" рисования эффекта линия за линией?

Возможно, не совсем точно, но похоже на такую ​​анимацию svg, чтобы сделать ее более наглядной и удобной для визуализации https://maxwellito.github.io/vivus/

Пример Webgl здесь https://www.orano.group/experience/innovation/en/slider при переключении между слайдами.

Answer 1

Вам нужно дать каждому элементу, который вы хотите нарисовать, номер в том порядке, в котором вы хотите их нарисовать.Например, если вы хотите нарисовать каркасный проход в числе для каждой вершины в том порядке, в котором вы хотите их нарисовать, передайте это число от вершинного шейдера до фрагментного шейдера, а затем передайте за время.Если число больше числа discard (или каким-либо другим способом не рисовать)

Пример:

'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 40;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 25;

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

  const objects = [];

  {
    const width = 8;
    const height = 8;
    const depth = 8;
    // using edges just to get rid of the lines triangles
    const geometry = new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(width, height, depth));
    const numVertices = geometry.getAttribute('position').count;
    const counts = new Float32Array(numVertices);
    // every 2 points is one line segment so we want the numbers to go
    // 0, 1, 1, 2, 2, 3, 3, 4, 4, 5 etc
    const numSegments = numVertices / 2;
    for (let seg = 0; seg < numSegments; ++seg) {
      const off = seg * 2;
      counts[off + 0] = seg;
      counts[off + 1] = seg + 1;
    }
    const itemSize = 1;
    const normalized = false;
    const colorAttrib = new THREE.BufferAttribute(counts, itemSize, normalized);     geometry.addAttribute('count', colorAttrib);
    
    const timeLineShader = {
      uniforms: {
        color: { value: new THREE.Color('red'), },
        time: { value: 0 },
      },
      vertexShader: `
        attribute float count;
        varying float vCount;
        void main() {
          vCount = count;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
        }
      `,
      fragmentShader: `
        #include <common>

        varying float vCount;
        uniform vec3 color;
        uniform float time;

        void main() {
          if (vCount > time) {
            discard;
          }
          gl_FragColor = vec4(color, 1);
        }
      `,
    };
   
    const material = new THREE.ShaderMaterial(timeLineShader);
    const mesh = new THREE.LineSegments(geometry, material);
    scene.add(mesh);
    objects.push(mesh);
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    objects.forEach((obj, ndx) => {
      const speed = .1 + ndx * .05;
      const rot = time * speed;
      obj.rotation.x = rot;
      obj.rotation.y = rot;
      obj.material.uniforms.time.value = (time * 4) % 15;
    });

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

body { margin: 0; }
#c { width: 100vw; height: 100vh; display: block; }

<canvas id="c"></canvas>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r98/three.min.js"></script>

Если вы хотите, чтобы несколько объектов рисовались последовательно, просто отрегулируйте время для каждого

'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 40;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 15;

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

  const objects = [];

  {
    const width = 2;
    const height = 2;
    const depth = 2;
    // using edges just to get rid of the lines triangles
    const geometry = new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(width, height, depth));
    const numVertices = geometry.getAttribute('position').count;
    const counts = new Float32Array(numVertices);
    // every 2 points is one line segment so we want the numbers to go
    // 0, 1, 1, 2, 2, 3, 3, 4, 4, 5 etc
    const numSegments = numVertices / 2;
    for (let seg = 0; seg < numSegments; ++seg) {
      const off = seg * 2;
      counts[off + 0] = seg;
      counts[off + 1] = seg + 1;
    }
    const itemSize = 1;
    const normalized = false;
    const colorAttrib = new THREE.BufferAttribute(counts, itemSize, normalized);     geometry.addAttribute('count', colorAttrib);
    
    const timeLineShader = {
      vertexShader: `
        attribute float count;
        varying float vCount;
        void main() {
          vCount = count;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
        }
      `,
      fragmentShader: `
        #include <common>

        varying float vCount;
        uniform vec3 color;
        uniform float time;

        void main() {
          if (vCount > time) {
            discard;
          }
          gl_FragColor = vec4(color, 1);
        }
      `,
    };
   
    for (let x = -2; x <= 2; x += 1) {
      timeLineShader.uniforms = {
        color: { value: new THREE.Color('red'), },
        time: { value: 0 },
      };
      const material = new THREE.ShaderMaterial(timeLineShader);
      const mesh = new THREE.LineSegments(geometry, material);
      scene.add(mesh);
      mesh.position.x = x * 4;
      objects.push(mesh);
    }
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    objects.forEach((obj, ndx) => {
      const rotSpeed = .1;
      const rot = time * rotSpeed;
      obj.rotation.x = rot;
      obj.rotation.y = rot;
      const segmentsPer = 12;
      const speed = 8;
      const totalTime = segmentsPer * objects.length + 5 * speed;
      obj.material.uniforms.time.value = ((time * speed) % totalTime) - ndx * segmentsPer;
    });

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

body { margin: 0; }
#c { width: 100vw; height: 100vh; display: block; }

<canvas id="c"></canvas>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r98/three.min.js"></script>

Обратите внимание, что при использовании счетчика каждому сегменту требуется одинаковое количество времени для появления.Если вы хотите, чтобы они занимали больше времени, чем вместо добавления 1 к каждому сегменту, вам нужно добавить расстояние до следующей точки

distanceSoFar = 0;
for each segment
  data.push(distanceSoFar);
  distanceSoFar += distance(segmentStartPosition, segmentEndPosition); 
  data.push(distanceSoFar);
}