Acrylic Controls
縁の太さ
8px
厚み & ぷっくり感
15
値を上げると表面がより丸く盛り上がります
切り口の光沢
2
滑らかさ
4
不透明度
0.10
仕組み
このページの核は、画像のアルファ形状から「厚みのある透明素材」を作り、 そこに複数のハイライトを重ねてアクリルらしさを作ることです。 3Dモデルは使わず、SVGフィルタの合成だけで見た目を作っています。
1. まず土台となる形を作る
元画像のアルファをぼかしてノイズをならし、`feMorphology` で外側に膨らませます。 これがアクリルの外形になります。
baseShape = dilate(blur(alpha), borderWidth)2. 透明な本体を作る
外形に白色の半透明レイヤーを重ねて、アクリルの本体を作ります。 `opacity` はこの本体の濃さで、値が高いほど白っぽく見えます。
acrylicBody = white x opacity x baseShape3. 厚みを光と影で表現する
`feSpecularLighting` で表面ハイライトを作り、別レイヤーでエッジ側の影を足しています。 `thickness` を上げるとハイライトの立体感と落ち影の距離が増えます。
thicknessUp -> stronger highlight + longer edge shadow4. 切り口の反射を足す
外形の境界だけを抜き出して、切り口に沿った細い反射線を作ります。 `edgeShine` はこの反射の強さです。
edgeShineLayer = specular(edgeRegion) x edgeShine5. 仕上げにインタラクション光を重ねる
マウス位置に合わせて線形グレアと点グレアを動かし、角度で光が走る見え方を作ります。 最後に本体・影・切り口光・元画像・表面ハイライトを順番に合成して完成です。
final = shadow + edge + body + source + surfaceLight + glare