如何将网页指定矩形区域转换为WebGL纹理？

完全可以把网页的指定矩形区域转为WebGL可采样的纹理，刚好能满足你给顶部工具栏做液态玻璃效果的需求，下面是具体实现思路和步骤：

1. 捕获目标网页区域到Canvas #

要获取网页区域的像素数据，最直接的方式是把目标区域渲染到Canvas上：

• 先通过Element.getBoundingClientRect()获取目标区域（比如工具栏下方的页面区域）的位置和尺寸
• 创建一个Canvas，设置对应的宽高（为了性能可以适当缩小分辨率，比如按0.5倍缩放）
• 使用CanvasRenderingContext2D.drawImage()方法，把整个document.body或者目标父元素绘制到Canvas的对应区域，只截取你需要的部分
• 如果你遇到跨域资源（比如页面里有第三方图片）导致绘制失败，需要给这些资源设置crossOrigin="anonymous"属性，或者使用专门的DOM转Canvas库处理跨域和复杂DOM渲染（原生方案性能更优）

示例代码片段：

const targetElement = document.querySelector('.toolbar-backdrop-area');
const rect = targetElement.getBoundingClientRect();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 可选：缩小分辨率提升性能
const scale = 0.5;
canvas.width = rect.width * scale;
canvas.height = rect.height * scale;

// 绘制目标区域到Canvas
ctx.scale(scale, scale);
ctx.drawImage(document.body, rect.left, rect.top, rect.width, rect.height, 0, 0, rect.width, rect.height);

2. 将Canvas转为WebGL纹理 #

把上面得到的Canvas作为纹理输入到WebGL中：

• 初始化WebGL上下文后，创建一个纹理对象
• 绑定纹理并设置纹理参数（比如TEXTURE_MIN_FILTER用LINEAR，避免锯齿）
• 使用gl.texImage2D()将Canvas传入WebGL纹理
• 如果页面内容动态变化，需要在requestAnimationFrame回调里重复执行texSubImage2D()来更新纹理，避免频繁创建新纹理

示例代码片段：

const gl = webglCanvas.getContext('webgl');
const texture = gl.createTexture();

gl.bindTexture(gl.TEXTURE_2D, texture);
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);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

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

3. 结合WebGL实现液态玻璃效果 #

基于你找到的WebGL液态玻璃演示，做以下调整：

• 把原来的纹理输入替换成上面捕获的网页区域纹理
• 将WebGL的Canvas通过CSS定位到顶部工具栏的下方，设置position: absolute、匹配工具栏的宽高、调整z-index让它处于工具栏之后
• 工具栏本身设置半透明或者完全透明，这样就能透过工具栏看到WebGL渲染的液态玻璃效果

性能优化要点 #

• 只采样必要区域：不要捕获全页，只捕获工具栏覆盖的那一小块页面区域，能大幅降低纹理尺寸和计算量
• 降低纹理分辨率：比如用0.5或0.75倍缩放，人眼很难察觉差异，但能减少WebGL的渲染压力
• 控制更新频率：如果页面不是实时动态变化，不需要每帧都更新纹理，可以设置防抖或者间隔更新的逻辑

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