如何让 webGL 扭曲它下面的 HTML？
How to make webGL distort the HTML under it?
我在玩这个例子：https://threejs.org/examples/?q=glitch#webgl_postprocessing_glitch。
我有一个示例的本地副本，并通过为它提供 999 的 z-index 并将 {alpha: true} 传递给渲染器以使其透明，使 Three.js 渲染器成为一个覆盖层。然后我在下面粘贴了一个正常的 html 网页，上面有一堆 h1 并且背景颜色设置为红色。所以该网页位于 canvas 的正下方。当我这样做时的问题是故障效果最终只是一堆水平白线。
webGL 是否可以扭曲其下的 html 视图？
我认为您需要更好地了解 HTML 的渲染方式，three.js 渲染的 canvas 元素被锁定在它自己的渲染上下文中。
您可以扭曲任何 HTML 元素，但为此您需要了解 CSS 自定义过滤器（CSS Shaders），这与 Three.js 无关。
简短的回答是否定的。WebGL 无法访问任何 underlying/overlaying 帧缓冲区。您可以对 webGL 进行透明覆盖，但您只能用覆盖的内容掩盖其背后的内容。并不是真正抓取和修改像素。
有一天我们希望底层缓冲区以某种方式暴露给 webGL...如果是这样的话，我们可以在 3d 中做真正的 HTML UI，并拥有它为VR等工作
我最接近的是在 webGL 场景中嵌入 css3d 对象，方法是通过在 THREE.js 场景写入透明值以显示到背景。
如果您只是想在 html 上绘制一些部分透明的毛刺矩形，那也可以。
正如其他人已经指出的那样，您无法访问浏览器为 security-reasons 呈现的任何内容。
您可以将 html 渲染为 canvas（使用 interesting svg-trick) and use that canvas as a texture in webgl. There even is a project called html-gl，这是基于此的完整实现。
我在玩这个例子：https://threejs.org/examples/?q=glitch#webgl_postprocessing_glitch。
我有一个示例的本地副本，并通过为它提供 999 的 z-index 并将 {alpha: true} 传递给渲染器以使其透明，使 Three.js 渲染器成为一个覆盖层。然后我在下面粘贴了一个正常的 html 网页，上面有一堆 h1 并且背景颜色设置为红色。所以该网页位于 canvas 的正下方。当我这样做时的问题是故障效果最终只是一堆水平白线。
webGL 是否可以扭曲其下的 html 视图？
我认为您需要更好地了解 HTML 的渲染方式，three.js 渲染的 canvas 元素被锁定在它自己的渲染上下文中。
您可以扭曲任何 HTML 元素，但为此您需要了解 CSS 自定义过滤器（CSS Shaders），这与 Three.js 无关。
简短的回答是否定的。WebGL 无法访问任何 underlying/overlaying 帧缓冲区。您可以对 webGL 进行透明覆盖，但您只能用覆盖的内容掩盖其背后的内容。并不是真正抓取和修改像素。
有一天我们希望底层缓冲区以某种方式暴露给 webGL...如果是这样的话，我们可以在 3d 中做真正的 HTML UI，并拥有它为VR等工作
我最接近的是在 webGL 场景中嵌入 css3d 对象，方法是通过在 THREE.js 场景写入透明值以显示到背景。
如果您只是想在 html 上绘制一些部分透明的毛刺矩形，那也可以。
正如其他人已经指出的那样，您无法访问浏览器为 security-reasons 呈现的任何内容。
您可以将 html 渲染为 canvas（使用 interesting svg-trick) and use that canvas as a texture in webgl. There even is a project called html-gl，这是基于此的完整实现。