看起来你已经给WebGL背景设了低层级的z-index，但还是跑到内容前面了？别担心，咱们一步步调整，让它稳稳待在所有内容后面，同时完美适配页面高度和滚动需求~

一、先确认层级问题（确保背景在最底层） #

你的Layout结构其实已经做对了：用一个relative父容器包裹背景和内容，内容容器设z-10，背景设-z-50。不过再确认两个细节：

1. 你给WebGL canvas加的pointerEvents: "none"非常关键（已经加了，很棒！），这样点击事件能直接穿透到内容，不会被canvas挡住。
2. 背景容器和canvas的z-index已经设为-50，这个层级足够低，只要内容没有设置比-50更小的z-index，就不会被背景覆盖。

二、适配页面高度与滚动（让背景覆盖整个页面） #

你当前的背景高度可能只覆盖了视口，当页面内容超过屏幕时，滚动后背景就会“断片”。咱们修改两处：

1. 调整背景容器的样式

把BackgroundCanvas组件返回的容器样式里的h-full改成min-h-screen，同时用fixed定位确保它始终覆盖视口，滚动时不会移位：

// BackgroundCanvas组件的返回部分
return (
  <div ref={containerRef} className="fixed top-0 left-0 w-full min-h-screen -z-50 pointer-events-none" />
);

2. 优化resize函数，获取真实的页面总高度

原来的container.scrollHeight只能获取容器自身的高度，改成获取整个文档的高度，这样不管内容多长，背景都会完全适配：

const resize = () => {
  const w = window.innerWidth;
  // 取文档的最大高度，适配超长页面
  const h = Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
  renderer.setSize(w, h);
  program.uniforms.iResolution.value.set(w, h, w / h);
};

三、可选：让背景响应滚动（实现动态跟随效果） #

要是你想让背景随滚动产生变化（比如纹理随滚动位移），可以加个滚动监听，把滚动位置传给shader：

1. 先给Program新增一个iScrollY的uniform：

const program = new Program(gl, {
  vertex: vertexShader,
  fragment: fragmentShader,
  uniforms: {
    iTime: { value: 0 },
    iResolution: { value: new Color(0, 0, 0) },
    iScrollY: { value: 0 } // 新增滚动位置uniform
  },
});

2. 添加滚动监听并传递参数：

useEffect(() => {
  // ... 其他初始化代码
  const handleScroll = () => {
    program.uniforms.iScrollY.value = window.scrollY;
  };
  window.addEventListener("scroll", handleScroll);

  return () => {
    // ... 其他清理代码
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

3. 在fragment shader里用iScrollY调整uv，实现滚动联动效果：

// fragment shader里的uv计算部分
vec2 uv = gl_FragCoord.xy / iResolution.xy;
// 加入滚动位移（数值0.1可根据需求调整）
uv.y += iScrollY / iResolution.y * 0.1;

这样调整后，你的WebGL背景就会乖乖待在内容后面，高度完美适配整个页面，滚动时也能正常显示啦~

内容来源于stack exchange