小编Mys*_*iam的帖子

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

实际结果

请注意当页面向下/向上滚动时折射如何变化。滚动时，还有一个光源从右到左。

滚动后

理想情况下，我希望文本具有透明玻璃反射效果，如提供的示例所示。而且还要折射背后的东西，这里似乎并非如此。事实上，当画布单独放置时，折射仍然会发生，所以我怀疑效果是在知道背景中将显示什么的情况下完成的。对我来说，我想动态地折射背后的东西。我再次认为我可能以这种方式取得成就是有原因的，也许是性能问题

删除所有非画布元素

事实上，它看起来像是基于背景，但背景不在画布内。另外，正如您所看到的，在下一张图片中，即使背景被移除，折射效果仍然发生。

折射

光源仍然存在，我怀疑它正在使用某种光线投射/光线追踪方法。我一点也不熟悉在画布上绘图（除了使用 p5.js 进行简单的事情），并且我花了很长时间才找到光线追踪，但不知道我在寻找什么。

.... 问题 ....

1. 如何在文本上获得玻璃透明反光效果？应该用图形设计工具来实现吗？（我不知道如何获取一个对象（参见下面的屏幕截图），该对象之后似乎具有纹理绑定。我什至不确定我是否使用了正确的词汇表，但假设我是，我不知道如何制作这样的纹理。） 文本对象没有“纹理”

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

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

感谢您的时间和关心。