如何在玻璃上创建具有折射和反射作用的玻璃文字？

Question

我想实现的目标接近此there。您也可以只看一下这些屏幕截图。

The actual result

注意页面向下/向上滚动时折射的演变方式。滚动时，还有一个从右到左的光源。

After scrolling

理想情况下，我希望文本具有透明的玻璃反射效果，就像提供的示例一样。但是，也要折射背后的事实，在这里似乎并非如此。确实，当画布单独放置时，折射仍然会发生，因此我怀疑在知道背景显示内容的情况下效果已经完成。对于我来说，我想动态地折射背后的故事。再一次，我想我可能由于某种原因（也许是性能问题）而达到了这种目的。

All non canvas elements removed

实际上，它看起来像是基于背景，但是背景不在画布内。另外，如您所见，在下一张图片上，即使删除了背景，折射效果仍在减弱。

Refraction

光源仍然存在，我怀疑它正在使用某种射线投射/射线追踪方法。我根本不熟悉在画布上绘画（除了使用p5.js做简单的事情之外），而且花了很长时间找到射线追踪却一无所知。

....问题....

1. 我如何在文字上获得玻璃透明的反射效果？是否应该使用图形设计工具来实现？ （我不知道如何获得一个似乎在之后绑定了纹理的对象（请参见下面的屏幕截图）。我什至不确定我是否使用了正确的词汇，但假设我是，我不知道如何制作出这样的质地。）text object no "texture"

2. 如何折射将放置在玻璃物体后面的所有物体？ （在得出我需要使用canvas的结论之前，不仅因为我发现了这个例子，还因为与我正在从事的项目有关的其他考虑。我已经投入了大量时间来学习足够的svg，达到您在下一个屏幕截图中看到的内容，但没有达到目标。我不愿意对光线投射做同样的事情，因此是我的第三个问题。我希望这是可以理解的...仍然存在折射部分，但是看起来比提供的示例现实得多。）SVG

3. 射线投射/射线追踪是实现折射的正确途径吗？如果它的光线跟踪后面的每个对象，可以使用吗？

感谢您的时间和关注。

我想达到的目标与那里的目标差不多。您也可以只看一下这些屏幕截图。实际结果请注意，随着页面向下/向上滚动，折射是如何演变的。滚动，...

Answer 1

反射和折射