javascript - 如何让webGL扭曲它下面的HTML？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 5 年前。

Improve this question

我正在玩这个例子:https://threejs.org/examples/?q=glitch#webgl_postprocessing_glitch .

我有该示例的本地副本，并通过将 z-index 设置为 999 并将 {alpha: true} 传递给渲染器以使其透明，从而使 Three.js 渲染器成为叠加层。然后我在下面粘贴了一个普通的html网页，上面有一堆h1并将背景颜色设置为红色。所以网页位于 Canvas 的正下方。当我这样做时，问题是故障效果最终只是一堆水平白线。

webGL是否有可能扭曲其下的html View ？

Answer 1

简短的回答是否定的。WebGL 无法访问任何底层/覆盖帧缓冲区。您可以对 webGL 进行透明覆盖，但只能用覆盖的内容来掩盖其后面的内容。实际上并没有抓取和修改像素。

有一天，我们希望底层缓冲区能够以某种方式暴露给 webGL...如果是这样的话，我们可以在 3d 中制作真正的 HTML UI，并让它适用于 VR 等。

我实现的最接近的是在 webGL 场景中嵌入 css3d 对象，通过穿透 webgl 帧缓冲区的 alpha 来显示其后面的 HTML 元素，通过在 THREE.js 场景中使用透明对象来写入透明值来显示一直到后台。

如果您只是想在 html 顶部绘制一些部分透明的故障矩形，那也可以。