如何让webGL扭曲其下的HTML？

Question

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

我有一个示例的本地副本，并通过给它的z-index为999并将{alpha：true}传递给渲染器使其透明，使Three.js渲染器成为叠加层。然后我用一堆h1粘贴了一个正常的html网页，背景颜色设置为红色。因此网页位于画布正下方。我这样做的问题是毛刺效应最终会成为一堆水平白线。

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

Answer 1

简短回答是否定的.WebGL无法访问任何底层/覆盖帧缓冲区。你可以对webGL做一个透明的叠加，但你只能用你覆盖的内容来模糊背后的内容。实际上并没有抓住并修改像素。

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

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

如果你只是想在你的html上绘制一些部分透明的毛刺矩形，那可能会有效。

Answer 2

As others have already noted, you cannot access anything rendered by the browser for security-reasons.

What you can do is render the html into a canvas (using an interesting svg-trick) and use that canvas as a texture in webgl. There even is a project called html-gl that is a full implementation based on that.

Answer 3

我认为你需要更好地理解HTML呈现的方式，将three.js渲染的canvas元素锁定在它自己的渲染上下文中。

您可以扭曲任何HTML元素，但为此您需要了解CSS自定义过滤器（CSS Shaders），这与Three.js无关。