Constructing an Infinite Loom: Unravelling Pictures into Threads with Three.js

Editor’s Notice: Our Three.js Convention celebration takes a fantastically tactile flip at present. Clément Grellier’s “Unwoven” transforms a easy picture strip into one thing splendidly alive, with pictures gently weaving themselves collectively and unraveling into threads as they transfer throughout the display screen. A beautiful instance of how somewhat Three.js magic could make acquainted UI really feel utterly surprising.

🧵 Get woven into the motion! The very first Three.js Convention is coming to Paris, bringing the neighborhood collectively for 2 days of talks, concepts, and connections. Use code CODROPS for 15% off and get your ticket →

Most picture sliders transfer footage round. This one takes them aside.

Unwoven is an infinite horizontal strip of picture playing cards, with every card made up of 26 horizontal ribbons relatively than a single rectangle. In the course of the display screen, the ribbons sit flush and the cardboard reads as an abnormal {photograph}. Close to both fringe of the viewport, they slide out of body at totally different speeds, splay aside, flutter, and bleach into the white of the web page. Playing cards arriving from the precise weave themselves collectively, whereas playing cards leaving on the left come undone.

Three.js, GSAP, two shaders, one HTML file, no construct step.

The psychological mannequin

Every of the 26 bands is a ribbon: an unbiased piece of geometry, two vertices tall and 21 vast, textured with its personal horizontal slice of the picture. Stacked with no gaps, they type a seamless image.

Every ribbon then derives two random numbers from its index, which decide how briskly it escapes, how far it drifts, and the way a lot it flutters. That distinction is all the impact.

Step 1: Give each thread its personal vertices

The plain method is to make use of one huge airplane with plenty of horizontal subdivisions. Don’t. Neighbouring strips in a airplane share vertices, and a shared vertex can solely be in a single place at a time. If strip 4 has slid 300px and strip 5 has slid 80px, the vertex between them has to choose one place, stretching the geometry to cowl the distinction. You get a rubbery membrane as an alternative of a spot.

So, construct the threads individually, every with its personal vertices:

for (let t = 0; t < 26; t++) {
  for (let row = 0; row < 2; row++) {          // prime and backside edge
    const v = (t + row) / 26;
    for (let c = 0; c <= segments; c++) {
      const u = c / segments;
      place.push((u - 0.5) * width, (v - 0.5) * top, 0);
      uv.push(u, v);                           // nonetheless spans the entire card
      rim.push(row === 0 ? -1 : 1);            // which fringe of the thread
      threadId.push(t);                        // used as a random seed
    }
  }
}

Step 2: Slide every thread at a random pace

First, one quantity telling the shader how shut a card is to an edge. Name it tear: 0 in the midst of the display screen, 1 on the edge.

float tear = max(
  1.0 - smoothstep(-halfWidth, -halfWidth + zone, x),
  smoothstep(halfWidth - zone, halfWidth, x)
);

Then slide:

float rnd = hash(threadId + seed);
world.x += course * pow(tear, 1.4) * (60.0 + rnd * 420.0);

That’s the entire impact. rnd differs per thread, so all of them journey totally different distances. Widen 60.0 + rnd * 420.0 and it reads as a comb; slender it and it reads as movement blur.

Step 3: Open gaps and fade out

The threads are shifting aside, however every continues to be a full-height rectangle, in order that they nonetheless tile with no gaps. Make the gaps by hiding every thread’s edges within the fragment shader:

float edge  = abs(rim);                  // 0 on the thread's center, 1 at its edge
float width = combine(0.8, 0.2, tear);       // seen width: practically all, then a core
float alpha = 1.0 - smoothstep(width, width + 0.06, edge);

alpha = combine(1.0, alpha, smoothstep(0.03, 0.30, tear));   // no gaps till they transfer

coloration = combine(coloration, vec3(1.0), smoothstep(0.55, 1.0, tear) * 0.8);   // whiten
alpha *= 1.0 - smoothstep(0.75, 1.0, tear) * 0.65;                  // then vanish

Two issues there are price realizing. The combine(1.0, alpha, ...) line forces alpha to precisely 1 whereas a card is mid-screen, so a woven card appears an identical to a plain photograph. And whitening earlier than fading issues: fading alpha alone leaves see-through colored strains, whereas whitening first means the threads have nearly turn out to be the web page earlier than they disappear.