能否在DOM元素上使用WebGL/GLSL着色器？如何将DOM作为纹理传入着色器？

当然有可行的方案啦！我之前折腾类似需求的时候，核心思路就是把DOM元素先转成Canvas纹理，再喂给WebGL的GLSL着色器。下面给你拆解具体步骤和需要注意的点：

第一步：把DOM元素转成Canvas/图像数据 #

要让WebGL能识别DOM，首先得把DOM渲染成WebGL支持的纹理源（比如Canvas、ImageBitmap），这里有两种常用途径：

• 原生API（适合简单DOM）
  利用Canvas 2D上下文的drawImage方法，不过原生方法对复杂DOM（比如带CSS动画、渐变、iframe的元素）支持有限，简单元素可以这么写：

  const targetDom = document.getElementById('your-target-element');
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 匹配DOM的实际尺寸，记得考虑设备像素比避免模糊
  const dpr = window.devicePixelRatio;
  canvas.width = targetDom.offsetWidth * dpr;
  canvas.height = targetDom.offsetHeight * dpr;
  ctx.scale(dpr, dpr);
  
  // 注意：原生方法直接绘制DOM需要先将其转为可绘制对象，复杂场景不推荐，建议用下面的第三方库
  ctx.drawImage(targetDom, 0, 0);
  

• 第三方库（推荐复杂DOM场景）
  像html2canvas或者dom-to-image这类库能完美处理复杂DOM（包括自定义字体、阴影、渐变甚至简单动画），兼容性也更好。以html2canvas为例：

  import html2canvas from 'html2canvas';
  
  const targetDom = document.getElementById('your-target-element');
  // 将DOM渲染为Canvas
  const canvas = await html2canvas(targetDom, {
    useCORS: true, // 处理跨域图片
    scale: window.devicePixelRatio // 保证分辨率清晰
  });
  

第二步：将Canvas绑定为WebGL纹理 #

拿到Canvas之后，就可以像处理普通图像纹理一样把它传入WebGL：

// 假设你已经获取了WebGL上下文gl
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数，避免拉伸变形和边缘模糊
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 将Canvas传入WebGL纹理
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);

第三步：在GLSL着色器中使用DOM纹理 #

接下来就可以在着色器里采样这个纹理，叠加你想要的特效了：

顶点着色器（传递UV坐标） #

attribute vec2 a_position;
attribute vec2 a_uv;
varying vec2 v_uv;

void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
  v_uv = a_uv;
}

片元着色器（采样DOM纹理+添加特效） #

precision mediump float;
varying vec2 v_uv;
uniform sampler2D u_domTexture;

void main() {
  // 采样DOM纹理
  vec4 domColor = texture2D(u_domTexture, v_uv);
  
  // 这里可以叠加任意GLSL特效，比如灰度滤镜
  float gray = dot(domColor.rgb, vec3(0.299, 0.587, 0.114));
  gl_FragColor = vec4(gray, gray, gray, domColor.a);
}

避坑指南 #

• 跨域问题：如果DOM里包含跨域图片，一定要在html2canvas配置中开启useCORS: true，同时图片服务器要设置正确的CORS响应头。
• 性能优化：如果DOM元素频繁更新，不要每次都重新渲染Canvas+更新纹理，可以用requestAnimationFrame做批量更新，或者用OffscreenCanvas做离屏渲染减少主线程阻塞。
• 分辨率问题：一定要乘以设备像素比（window.devicePixelRatio），不然渲染出来的DOM纹理会模糊。

内容的提问来源于stack exchange，提问作者yawn