Javascript 如何使webGL扭曲其下的HTML？

我在玩这个例子：

我有一个本地副本的例子，并使三.js渲染器覆盖给它的z索引999和传递{alpha:true}渲染器，使其透明。然后我在它下面粘贴了一个普通的html网页，上面有一堆

h1

，背景颜色设置为红色。因此，网页位于画布的正下方。当我这样做的时候，问题是小故障效应最终只是一堆水平的白线

---

webGL有可能扭曲它下面的html视图吗？

我认为您需要更好地理解html是如何呈现的，三个.js呈现的画布元素被锁定在它自己的呈现上下文下

---

您可以扭曲任何HTML元素，但为此您需要了解CSS Custom filters（），而这与Three.js无关。

我认为您需要更好地了解HTML如何呈现，Three.js呈现的画布元素被锁定在其自己的呈现上下文下

---

您可以扭曲任何HTML元素，但为此您需要了解CSS Custom filters（），这与Three.js无关。

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

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

我已经实现的最接近的方法是在webGL场景中嵌入css3d对象，通过打孔webGL帧缓冲区的alpha来显示其背后的HTML元素，通过在THREE.js场景中使用透明对象写入透明值以显示到背景中

---

如果您只想在html上绘制一些部分透明的漂亮矩形，那也行。

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

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

我已经实现的最接近的方法是在webGL场景中嵌入css3d对象，通过打孔webGL帧缓冲区的alpha来显示其背后的HTML元素，通过在THREE.js场景中使用透明对象写入透明值以显示到背景中

---

如果您只想在html顶部绘制一些部分透明的漂亮矩形，这可能会奏效。

正如其他人所指出的，出于安全原因，您无法访问浏览器呈现的任何内容

---

您可以做的是将html呈现到画布中（使用），并将该画布用作webgl中的纹理。甚至还有一个基于此的完整实现。

正如其他人已经指出的，出于安全原因，您无法访问浏览器呈现的任何内容

---

您可以做的是将html呈现到画布中（使用），并将该画布用作webgl中的纹理。甚至还有一个基于此的完整实现。

该功能在2013/2014年左右从chrome和webkit（它们是唯一实现该功能的）中删除。该功能在2013/2014年左右从chrome和webkit（它们是唯一实现该功能的）中删除。