我在玩这个例子：https://threejs.org/examples/?q=glitch#webgl_postprocessing_glitch。
我有一个示例的本地副本，并通过将 Three.js 渲染器的 z-index 设置为 999 并将 {alpha: true} 传递给渲染器以使其透明，从而使 Three.js 渲染器成为一个叠加层。然后我在它下面粘贴了一个普通的html网页，上面有一堆h1，背景颜色设置为红色。所以网页位于画布的正下方。当我这样做时的问题是故障效果最终只是一堆水平白线。
webGL会不会扭曲它下面的html视图？
【问题讨论】：
标签： javascript canvas three.js webgl
我认为你需要更好地理解 HTML 是如何呈现的，three.js 呈现的 canvas 元素被锁定在它自己的呈现上下文中。
您可以扭曲任何 HTML 元素，但为此您需要了解 CSS 自定义过滤器 (CSS Shaders)，这与 Three.js 无关。
【讨论】：
简短的回答是否定的。WebGL 无权访问任何底层/重叠帧缓冲区。你可以做一个 webGL 的透明覆盖，但你只能用你覆盖的东西来掩盖它背后的东西。实际上并不抓取和修改像素。
有一天，我们希望底层缓冲区能够以某种方式暴露给 webGL……如果是这样的话，我们可以在 3d 中制作真正的 HTML UI，并让它适用于 VR 等。
我实现的最接近的方法是将 css3d 对象嵌入到 webGL 场景中，方法是穿透 webgl 帧缓冲区的 alpha 以显示其背后的 HTML 元素，通过在 THREE.js 场景中使用透明对象写入透明值来显示一直到后台。
如果你只是想在你的 html 上绘制一些部分透明的有问题的矩形，那也可以。
【讨论】：
正如其他人已经指出的那样，出于安全原因，您无法访问浏览器呈现的任何内容。
您可以做的是将 html 渲染到画布中（使用 interesting svg-trick）并将该画布用作 webgl 中的纹理。甚至还有 a project called html-gl 是基于它的完整实现。
【讨论】：