Infinite Canvas: Constructing a Seamless, Pan-Wherever Picture House

January 7, 2026

1

1. Introduction

On this tutorial, we’ll construct an Infinite Canvas: a spatial picture gallery that extends endlessly in all instructions. Photos repeat seamlessly, customers can pan freely on the X, Y, and Z axes utilizing mouse, contact, or keyboard enter, and every little thing is engineered for top refresh charges, together with 120 fps on 120 Hz screens ({hardware} permitting).

The element is absolutely interactive and works easily on each desktop and cellular. Drag to pan, scroll or pinch to zoom, and discover the house with out synthetic bounds.

The objective is not only to render a number of photos, however to create the phantasm of infinity whereas preserving the expertise fluid and responsive.

Why this tutorial exists

I made a decision to jot down this after repeatedly seeing variations of this sample over time, constructing associated methods myself prior to now, and noticing a spot in clear, end-to-end explanations of how you can truly implement it in a contemporary, production-ready manner. I had beforehand explored a 2D model of an infinite drag grid with out WebGL, and this text is the results of pushing that concept additional into full 3D. The objective right here is to not current a brand new idea, however to doc a concrete method, the tradeoffs behind it, and the reasoning that formed the implementation.

The infinite, spatial gallery sample explored on this tutorial is just not a brand new concept. Variations of this method have appeared in numerous kinds over time. Specifically, Chakib Mazouni has publicly explored an identical visible sample in prior experiments. This tutorial presents my very own implementation and engineering method, and focuses on how the system is constructed and reasoned about finish to finish.

2. Idea: Faking Infinity

True infinity is just not sensible in rendering. As an alternative, we pretend it.

For this demo, the canvas is populated with Baroque-era artworks, as a result of in the event you’re going to float endlessly by way of house, you may as effectively do it surrounded by dramatic lighting and extreme chiaroscuro (the photographs are sourced from the Artwork Institute of Chicago Open Entry assortment).

The core concept is straightforward: the digicam strikes freely, however the world is generated solely across the digicam. House is split into equally sized chunks, and solely the chunks inside a sure radius of the digicam exist at any given time.

Every chunk incorporates a deterministic structure of picture planes. As a result of the structure is deterministic, chunks may be destroyed and recreated with out visible discontinuities. As you progress, previous chunks fall away and new ones seem, creating the phantasm of an limitless canvas.

Consider it as an infinite grid the place solely a small window is ever rendered.

3. Implementation

Lazy-loading the Scene

The Infinite Canvas is heavy by nature, so we lazy-load your complete scene. This retains the preliminary bundle gentle and avoids blocking the preliminary render whereas Three.js initializes.

const LazyInfiniteCanvasScene = React.lazy(() =>
  import("./scene").then((mod) => ({ default: mod.InfiniteCanvasScene }))
);


export operate InfiniteCanvas(props: React.ComponentProps<typeof LazyInfiniteCanvasScene>) {
  return (
    <React.Suspense fallback={null}>
      <LazyInfiniteCanvasScene {...props} />
    </React.Suspense>
  );
}

Utilizing React.Suspense right here is intentional. The fallback is null as a result of the canvas is normally a full-bleed aspect and we don’t need structure shifts. In case you do need a loader, you may change it with a progress UI pushed by the feel loading progress later within the article.

Chunk-Based mostly World Era

We divide house right into a 3D grid of equally sized cubic chunks. The digicam can journey indefinitely, however we solely hold a hard and fast variety of chunks alive across the digicam.

First we compute the present chunk coordinates from the digicam’s base place:

const cx = Math.ground(s.basePos.x / CHUNK_SIZE);
const cy = Math.ground(s.basePos.y / CHUNK_SIZE);
const cz = Math.ground(s.basePos.z / CHUNK_SIZE);

Then, each time the digicam crosses into a brand new chunk, we regenerate the lively chunk listing utilizing a precomputed set of offsets. The diagram beneath illustrates this: the digicam (marked C) sits within the heart chunk, surrounded by its speedy neighbors in all instructions.

       Z-1 (behind)          Z=0 (digicam depth)       Z+1 (forward)
      ┌─────┬─────┬─────┐   ┌─────┬─────┬─────┐   ┌─────┬─────┬─────┐
      │-1,-1│ 0,-1│ 1,-1│   │-1,-1│ 0,-1│ 1,-1│   │-1,-1│ 0,-1│ 1,-1│
      ├─────┼─────┼─────┤   ├─────┼─────┼─────┤   ├─────┼─────┼─────┤
      │-1,0 │ 0,0 │ 1,0 │   │-1,0 │  C  │ 1,0 │   │-1,0 │ 0,0 │ 1,0 │
      ├─────┼─────┼─────┤   ├─────┼─────┼─────┤   ├─────┼─────┼─────┤
      │-1,1 │ 0,1 │ 1,1 │   │-1,1 │ 0,1 │ 1,1 │   │-1,1 │ 0,1 │ 1,1 │
      └─────┴─────┴─────┘   └─────┴─────┴─────┘   └─────┴─────┴─────┘

This 3×3×3 neighborhood means 27 chunks are lively at any time, a hard and fast value no matter how far the digicam has traveled.

setChunks(
  CHUNK_OFFSETS.map((o) => ({
    key: `${ucx + o.dx},${ucy + o.dy},${ucz + o.dz}`,
    cx: ucx + o.dx,
    cy: ucy + o.dy,
    cz: ucz + o.dz,
  }))
);

Two necessary particulars right here:

The render value stays flat as a result of the variety of chunks is fixed.
Chunk IDs are secure strings, so React can mount and unmount chunk teams predictably.

Deterministic Aircraft Layouts

Inside every chunk we generate a structure of picture planes. The structure have to be deterministic, the identical chunk coordinates ought to all the time produce the identical planes. That manner we are able to destroy and recreate chunks freely with out visible jumps.

Chunk structure era is deferred so it by no means competes with enter dealing with. If the browser helps it, we schedule it throughout idle time:

React.useEffect(() => {
  let canceled = false;
  const run = () => !canceled && setPlanes(generateChunkPlanesCached(cx, cy, cz));

  if (typeof requestIdleCallback !== "undefined") {
    const id = requestIdleCallback(run, { timeout: 100 });
    return () => {
      canceled = true;
      cancelIdleCallback(id);
    };
  }

  const id = setTimeout(run, 0);
  return () => {
    canceled = true;
    clearTimeout(id);
  };
}, [cx, cy, cz]);

The generateChunkPlanes operate converts chunk coordinates right into a deterministic seed, then makes use of it to position planes randomly throughout the chunk bounds:

export const generateChunkPlanes = (cx: quantity, cy: quantity, cz: quantity): PlaneData[] => {
  const planes: PlaneData[] = [];
  const seed = hashString(`${cx},${cy},${cz}`);

  for (let i = 0; i < 5; i++) {
    const s = seed + i * 1000;
    const r = (n: quantity) => seededRandom(s + n);
    const measurement = 12 + r(4) * 8;

    planes.push({
      id: `${cx}-${cy}-${cz}-${i}`,
      place: new THREE.Vector3(
        cx * CHUNK_SIZE + r(0) * CHUNK_SIZE,
        cy * CHUNK_SIZE + r(1) * CHUNK_SIZE,
        cz * CHUNK_SIZE + r(2) * CHUNK_SIZE
      ),
      scale: new THREE.Vector3(measurement, measurement, 1),
      mediaIndex: Math.ground(r(5) * 1_000_000),
    });
  }

  return planes;
};

Outcomes are cached with LRU eviction to keep away from regenerating layouts the consumer has already visited:

const MAX_PLANE_CACHE = 256;
const planeCache = new Map<string, PlaneData[]>();

export const generateChunkPlanesCached = (cx: quantity, cy: quantity, cz: quantity): PlaneData[] => {
  const key = `${cx},${cy},${cz}`;
  const cached = planeCache.get(key);
  if (cached) {
    // Transfer to finish for LRU ordering
    planeCache.delete(key);
    planeCache.set(key, cached);
    return cached;
  }

  const planes = generateChunkPlanes(cx, cy, cz);
  planeCache.set(key, planes);
  
  // Evict oldest entries
  whereas (planeCache.measurement > MAX_PLANE_CACHE) {
    const firstKey = planeCache.keys().subsequent().worth;
    if (firstKey) planeCache.delete(firstKey);
  }
  
  return planes;
};

As soon as we’ve a listing of airplane slots, we map them to actual media. The modulo makes a finite dataset repeat indefinitely:

const mediaItem = media[plane.mediaIndex % media.length];

The result’s a “repeatable universe”: restricted inputs, limitless traversal.

Media Planes and Fading Logic

Every picture is a PlaneGeometry with a MeshBasicMaterial. The fascinating half is just not the geometry, however when it’s seen.

We fade planes primarily based on two distances:

Grid distance: how far the chunk is from the digicam chunk
Depth distance: how far the airplane is from the digicam alongside Z

Right here’s the core fade computation, executed on each body for seen (or just lately seen) planes:

const dist = Math.max(
  Math.abs(chunkCx - cam.cx),
  Math.abs(chunkCy - cam.cy),
  Math.abs(chunkCz - cam.cz)
);

const absDepth = Math.abs(place.z - cam.camZ);

const gridFade =
dist <= RENDER_DISTANCE
? 1
: Math.max(0, 1 - (dist - RENDER_DISTANCE) / Math.max(CHUNK_FADE_MARGIN, 0.0001));

const depthFade =
absDepth <= DEPTH_FADE_START
? 1
: Math.max(0, 1 - (absDepth - DEPTH_FADE_START) / Math.max(DEPTH_FADE_END - DEPTH_FADE_START, 0.0001));

const goal = Math.min(gridFade, depthFade * depthFade);
state.opacity = goal < INVIS_THRESHOLD && state.opacity < INVIS_THRESHOLD
? 0
: lerp(state.opacity, goal, 0.18);

And right here’s the sensible optimization that retains overdraw and sorting below management. When a airplane is absolutely opaque we allow depth writing, when it fades out we finally disable it and conceal the mesh fully:

const isFullyOpaque = state.opacity > 0.99;
materials.opacity = isFullyOpaque ? 1 : state.opacity;
materials.depthWrite = isFullyOpaque;
mesh.seen = state.opacity > INVIS_THRESHOLD;

This “fade then disable” method offers easy transitions, but it surely additionally avoids paying for invisible work.

Digital camera Controller

The controller turns enter into movement, with inertia.

We acquire enter (mouse drag, wheel, contact gestures, keyboard), accumulate it right into a goal velocity, after which ease the precise velocity towards it. This avoids twitchy motion and makes the house really feel bodily.

Pointer panning updates the goal velocity whereas dragging:

if (s.isDragging) {
  s.targetVel.x -= (e.clientX - s.lastMouse.x) * 0.025;
  s.targetVel.y += (e.clientY - s.lastMouse.y) * 0.025;
  s.lastMouse = { x: e.clientX, y: e.clientY };
}

Zooming is dealt with by way of wheel scroll (desktop) and pinch distance (contact). We accumulate scroll into scrollAccum and apply it progressively:

s.scrollAccum += e.deltaY * 0.006;
s.targetVel.z += s.scrollAccum;
s.scrollAccum *= 0.8;

Inertia is the mix between present and goal velocity:

s.velocity.x = lerp(s.velocity.x, s.targetVel.x, VELOCITY_LERP);
s.velocity.y = lerp(s.velocity.y, s.targetVel.y, VELOCITY_LERP);
s.velocity.z = lerp(s.velocity.z, s.targetVel.z, VELOCITY_LERP);

s.basePos.x += s.velocity.x;
s.basePos.y += s.velocity.y;
s.basePos.z += s.velocity.z;

digicam.place.set(s.basePos.x + s.drift.x, s.basePos.y + s.drift.y, s.basePos.z);

s.targetVel.x *= VELOCITY_DECAY;
s.targetVel.y *= VELOCITY_DECAY;
s.targetVel.z *= VELOCITY_DECAY;

The necessary bit is that we replace basePos somewhat than straight pushing the digicam from each occasion. That provides you one predictable, frame-based integration level, which additionally makes chunk updates a lot simpler to purpose about.

4. Refinement

Efficiency

This element is constructed with efficiency as a first-class concern. Each a part of the system is designed to attenuate body time and keep away from spikes, leading to a constantly easy expertise. In apply, the canvas is able to reaching as much as 120 fps on high-refresh shows, and body charges typically stay very excessive on each desktop and cellular gadgets.

1) Throttle chunk updates whereas zooming

When customers zoom rapidly, the digicam can cross a number of chunk boundaries in a short while. Rebuilding chunk lists on each boundary is wasteful, so updates are throttled primarily based on zooming state and Z velocity:

const isZooming = Math.abs(s.velocity.z) > 0.05;

const throttleMs = getChunkUpdateThrottleMs(isZooming, Math.abs(s.velocity.z));

if (s.pendingChunk && shouldThrottleUpdate(s.lastChunkUpdate, throttleMs, now)) {
  const { cx: ucx, cy: ucy, cz: ucz } = s.pendingChunk;
  s.pendingChunk = null;
  s.lastChunkUpdate = now;

  setChunks(
    CHUNK_OFFSETS.map((o) => ({
      key: `${ucx + o.dx},${ucy + o.dy},${ucz + o.dz}`,
      cx: ucx + o.dx,
      cy: ucy + o.dy,
      cz: ucz + o.dz,
    }))
  );
}

2) Cap pixel density and disable costly defaults

We clamp DPR (particularly on contact gadgets), and explicitly choose out of antialiasing. This favors secure body time over barely softer edges, which is an efficient tradeoff for a scene stuffed with layered quads.

const dpr = Math.min(window.devicePixelRatio || 1, isTouchDevice ? 1.25 : 1.5);

<Canvas
  digicam={{ place: [0, 0, INITIAL_CAMERA_Z], fov: cameraFov, close to: cameraNear, far: cameraFar }}
  dpr={dpr}
  flat
  gl={{ antialias: false, powerPreference: "high-performance" }}
  className={kinds.canvas}
>
  {/* ... */}
</Canvas>

3) Don’t render what you may’t see

Fading is barely a transition. As soon as a airplane is absolutely clear, it’s faraway from rendering and now not writes to the depth buffer. This retains the scene light-weight even when many planes overlap.

Responsiveness

The canvas adapts routinely to:

Contact vs mouse enter
Excessive-DPI shows
System efficiency constraints

Controls and hints replace dynamically relying on the enter technique.

5. Wrap-Up

The Infinite Canvas demonstrates how you can create the phantasm of boundless house with out boundless value. The important thing methods (chunk-based streaming, deterministic era, distance-based culling, and inertia-driven enter) mix right into a system that feels expansive however stays predictable.

What We Constructed

A 3D infinite grid that renders solely what’s close to the digicam
Clean, inertia-based navigation for mouse, contact, and keyboard
A fade system that gracefully handles planes coming into and leaving view
Efficiency tuned for 120 fps on succesful {hardware}

The place to Go Subsequent

Click on-to-focus interplay. Raycast from pointer place to detect which airplane the consumer clicked, then animate the digicam to heart on it. This turns the canvas from pure exploration right into a browsable gallery.

Video textures. Substitute static photos with THREE.VideoTexture. The structure doesn’t change; simply swap the feel supply. Contemplate pausing movies for planes exterior the fade threshold to avoid wasting decode prices.

Dynamic content material loading. As an alternative of a hard and fast media array, fetch content material primarily based on chunk coordinates. Chunk (5, -3, 2) might request photos from /api/chunk?x=5&y=-3&z=2, enabling actually infinite, non-repeating content material.

Depth-based theming. Use the Z place to shift shade grading or fog density. Deeper layers might really feel hazier or tinted, creating visible “eras” as you zoom by way of.

Collision-free layouts. The present random placement can overlap planes. A extra refined generator might use Poisson disk sampling or grid snapping to ensure separation.

The true takeaway is the sample itself. When you perceive how you can stream a world round a shifting viewpoint, you may apply it to maps, timelines, knowledge visualizations, or anything that advantages from the sensation of infinite house.

Supply hyperlink