අදකාලීන වෙබ් අතුරුමුහුණත් වල ගැඹුරුභාවය තේරුම් ගැනීමට බොහෝ වෙලාවට “shadow” (පෙරළිය) භාවිතා කරයි. එය සැබෑ ගැඹුරුභාවයක් නොව, තිරයේ 2D පළතුරු මත ආලෝකය හා නෙළුම් පෙනුමක් අනුකරණය කිරීමෙන් පෙනෙන දෘශ්ය පණිවිඩයකි. CSS හි box-shadow ගුණය භාවිතා කිරීම ඉතා සරල වුවත්, බ්රවුසරයේ රේන්ඩරින් එන්ජින් එක අභ්යන්තරව සංකීර්ණ ගණිත ගණනයන්, පික්සෙල් කන්වෝලූෂන් සහ GPU සම්පූර්ණ පයිප්ලයින් එකක් හරහා ඒක ක්රියාත්මක කරයි.
කොහොමද shadow එක ගණනය වන්නේ? තිරය (x, y) සමාන්තර පළලක් ලෙස ගනිමින්, කල්පනා කරමු ව්යවහාරික ආලෝක මූලයක් UI අංගයක් වෙතින් කෝණයක් θ යි. එවිට offset‑vector (dx, dy) ගණනය කරයි:
dx = d·cos(θ)
dy = d·sin(θ) එහි d යනු අංගය පසුබිමෙන් යාමට ඇති දුරය. Blur radius (r) පෙනුම මෘදු කිරීම සඳහා Gaussian blur නිරූපණයක් භාවිතා කරයි, නමුත් CPU‑ට බරපතල බැවින් බ්රවුසරය triple box‑blur අලූත්කාලීන කිරීමෙන් සමාන ප්රතිඵලයක් ලබා දෙයි.
GPU රේන්ඩරින් පයිප්ලයින් එක DOM → Layout → Paint → Composite ලෙස ගොඩනැගේ. Box‑shadow එක Paint හා Composite පියරුවල වැඩ බර වැඩි කරයි. රේන්ඩරින් කලින් අංගයේ බෝඩර් රූපය alpha‑mask එකක් ලෙස සකසා, spread‑radius අනුව විස්තාර කර, triple box‑blur යොදා ගෙන, අවසානයේ රංගනය සිදු කරයි. මේ ක්රියාවලිය විශාල පේක්ෂා පින්තූරයක් හෝ අධික blur අගයක් ඇති විට මතක පටලය (memory bandwidth) ඉතා වැඩිවීමක් ඇති කරයි, එමනිසා hover, text input වැනි තත්ත්වයන්හි පූර්ණ frame‑wise නැවත ගණනය කිරීම සිදුවේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලාංකීය වෙබ් සංවර්ධකයන්ට මේ තොරතුරු වැදගත්ය, මන්ද:
- ඉතා හොඳ UI ගැඹුරුභාවයක් ලබා දීමේදී performance bottleneck තේරුම් ගැනීම.
- Box‑shadow අනුකූල කිරීමේදී compositor thread‑වල animate කිරීම, CPU බර අඩු කර GPU‑ට වැඩ භාර දීමේ ක්රමවේදය ඉගෙන ගැනීම.
- දෙවන පරපුරේ සිසුන්ට graphics pipeline, Gaussian blur, vector mathematics වැනි concepts practical web projects තුළ අත්හදා බැලීමට අවස්ථාව.
- ව්යාපාරික වෙබ් අඩවිවල load time අඩු කිරීමෙන් SEO, conversion rate සහ පාරිභෝගික අත්දැකීමේ ගුණාත්මකභාවය වැඩි වීම.
ඉදිරියේදී CSS Custom Properties, will‑change property, සහ hardware‑accelerated transforms භාවිතා කර shadow animation හෝ dynamic elevation සකස් කිරීමේදී, අඩු power consumption සහ smoother animations ලැබේ.
අවසානයේ, box‑shadow එකේ පසුබැසි ගණිතය හා GPU පයිප්ලයින් එකේ තේරුම් ගැනීම, ශ්රී ලංකාවේ developers, designers, startups සඳහා වේගවත්, අලංකාර UI නිර්මාණය කර ගැනීමට මූලික පියවරක් වේ.
