Appinn Feed
通过摄像头实现镜面效果。 示例： https://shiny-button.vercel.app/ 项目： https://github.com/alexwidua/prototypes 视频 蚁工厂
#css #gl b23.tv/BV1vwM3zFESr
如果组件形状固定，可以预先计算好法线贴图和高光贴图，直接使用svg filter来实现，无需javascript和WebGL。无论使用css实现还是着色器，计算负载都要远远小于使用Three.js这样的真3D引擎，实际上使用法线贴图渲染折射比高斯模糊计算量还小。
https://github.com/rxing365/html-liquid-glass-effect-webgl #code
如果组件形状固定，可以预先计算好法线贴图和高光贴图，直接使用svg filter来实现，无需javascript和WebGL。无论使用css实现还是着色器，计算负载都要远远小于使用Three.js这样的真3D引擎，实际上使用法线贴图渲染折射比高斯模糊计算量还小。
https://github.com/rxing365/html-liquid-glass-effect-webgl #code
Bilibili
在HTML中实现液态玻璃组件_哔哩哔哩_bilibili
众所周知目前CSS没有一个叫做“折射”的效果（废话），在看了苹果发布会之后虽然对实用性有些疑问，不过感觉比较有趣，于是用HTML中的canvas组件以及片段着色器也实现了一个，发个视频记录一下。可以基本模仿苹果的折射、高光、毛玻璃效果，不过苹果在法线形状、光照、动效上明显有着更加深入的打磨。因为GPU对使用法线扰动实现的折射效果支持非常成熟（2004年的Half-life2就有这种效果了），意外的, 视频播放量 2847、弹幕量 0、点赞数 69、投硬币枚数 9、收藏人数 62、转发人数 12, 视频作者…