ब्राउज़र में Liquid Glass लागू करना: CSS और SVG से प्रकाश का अपवर्तन

 (kube.io)
5 पॉइंट द्वारा GN⁺ 2025-09-09 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • Apple ने 2025 के WWDC में पेश किए गए Liquid Glass effect को वेब पर CSS, SVG, और physics-based refraction calculation से दोबारा बनाने का तरीका दिखाया है
  • Refraction के सिद्धांत और Snell's law का उपयोग करके glass surface rendering और refraction simulation की प्रक्रिया समझाई गई है
  • SVG displacement map का उपयोग कर rendering के लिए उपयुक्त displacement vector field बनाया जाता है, और इसे वास्तविक UI components पर लागू किया जा सकता है
  • Chrome में SVG filter को backdrop-filter के रूप में इस्तेमाल किया जा सकता है, और इसे कई UI elements (magnifying glass, switch, player आदि) पर लागू करने के उदाहरण दिए गए हैं
  • Real-time effect संभव है, लेकिन cross-browser समस्याएँ और performance सीमाएँ हैं, और आगे इसे open source करने की योजना का भी उल्लेख है

परिचय

Apple ने जून 2025 के WWDC में पहली बार Liquid Glass effect पेश किया। यह effect interface elements को मुड़े हुए refractive glass जैसा दिखाता है, जिससे वास्तविक काँच जैसी visual experience मिलती है। यह लेख वेब environment में CSS, SVG displacement map, और physics-based refraction calculation के जरिए ऐसा मिलता-जुलता effect बनाने की प्रक्रिया बताता है। लक्ष्य पूरी तरह समान implementation बनाना नहीं है, बल्कि refraction और reflective highlights जैसी मुख्य विशेषताओं को दोहराने वाला एक scalable proof of concept बनाना है। इसकी शुरुआत इस बुनियादी सिद्धांत से होती है कि जब प्रकाश अलग-अलग materials से होकर गुजरता है तो वह कैसे refract होता है, और फिर चरण-दर-चरण effect तैयार किया जाता है। अंत में दिया गया interactive demo अभी केवल Chrome में सही तरह काम करता है।

अपवर्तन को समझना

Refraction वह घटना है जिसमें प्रकाश एक material से दूसरे material में जाते समय अपनी दिशा बदलता है। यह इसलिए होता है क्योंकि हर material में प्रकाश की गति अलग होती है, और Snell's law से incident angle और refracted angle का संबंध इस सूत्र से व्यक्त किया जाता है:

  • n1 * sin(θ1) = n2 * sin(θ2)
    • n1: पहले medium का refractive index
    • θ1: incident angle
    • n2: दूसरे medium का refractive index
    • θ2: refracted angle

Interactive diagram में देखा जा सकता है:

  • अगर दोनों media का refractive index समान हो, तो प्रकाश बिना मुड़े सीधा चलता है
  • अगर दूसरे medium का refractive index अधिक हो, तो प्रकाश normal की दिशा में मुड़ता है
  • अगर दूसरे medium का refractive index कम हो, तो प्रकाश normal से दूर मुड़ता है, और कुछ मामलों में total internal reflection हो सकती है
  • अगर incident light सतह पर लंबवत हो, तो refractive index कुछ भी हो, वह सीधी जाती है

इस प्रोजेक्ट की सीमाएँ

Complexity सीमित रखने और algorithm को सरल बनाने के लिए ये शर्तें रखी गई हैं:

  • बाहरी medium का refractive index 1 है (हवा)
  • अंदर के glass material के लिए 1.5 इस्तेमाल किया गया है (सामान्य काँच)
  • refraction event केवल एक बार माना गया है (exit पर होने वाले refraction को नज़रअंदाज़ किया गया है)
  • incident light हमेशा background plane पर लंबवत मानी गई है
  • सभी objects 2D shapes हैं, और केवल circle form का उपयोग किया गया है (rectangle आदि तक बढ़ाया जा सकता है, लेकिन अतिरिक्त calculation चाहिए)
  • object और background plane के बीच कोई gap नहीं है
  • इन शर्तों के साथ Snell's law से सभी rays का सरल calculation संभव हो जाता है

Glass surface बनाना

Liquid Glass effect लागू करने के लिए virtual glass के cross-section (lens या curved panel) को mathematical function से परिभाषित करना पड़ता है।

Surface function

Glass surface को surface function से परिभाषित किया जाता है, जो edge से लेकर सपाट inner भाग तक की thickness दिखाता है

  • function input value 0: outer edge, 1: bezel end (जहाँ flat surface शुरू होती है)
  • हर बिंदु पर thickness के derivative से surface का normal vector निकाला जाता है
const height = f(distanceFromSide);
const delta = 0.001;
const y1 = f(distanceFromSide - delta);
const y2 = f(distanceFromSide + delta);
const derivative = (y2 - y1) / (2 * delta);
const normal = { x: -derivative, y: 1 };

मुख्य surface function प्रकार

  • Convex Circle: y = sqrt((1 - (1 - x))^2)
    • साधारण circular arc shape, जो अंदर की ओर जाते हुए जल्दी flat हो जाती है, इसलिए refractive edge स्पष्ट दिखती है
  • Convex Squircle: y = ((1 - (1 - x))^4)^(1/4)
    • Apple द्वारा पसंद की जाने वाली shape, जिसमें curve और flat भाग की सीमा अधिक smooth होती है और scale बढ़ाने पर भी effect स्वाभाविक लगता है
  • Concave: y = 1 - Convex(x)
    • धँसी हुई shape, जिसमें प्रकाश object boundary के बाहर की ओर refract होता है, इसलिए बाहर की sampling चाहिए
  • Lip: y = mix(Convex(x), Concave(x), Smootherstep(x))
    • edge पर उभरा हुआ lip और बीच में हल्का depression वाली composite structure

इन चार functions से ही surface shape के अनुसार refraction के अंतर को प्रभावी ढंग से तुलना किया जा सकता है

Simulation

हर surface function के अनुसार light rays की refracted path simulate की जाती है ताकि वास्तविक effect का अंतर देखा जा सके।

  • Convex प्रकाश के path को अंदर की ओर समेटता है, जबकि Concave उसे बाहर की ओर धकेलता है
  • Apple का Liquid Glass ज़्यादातर convex form को पसंद करता है (हालाँकि Switch जैसी exceptions हैं)
  • Background arrows में refraction amount (displacement) को magnitude के आधार पर रंग देकर दिखाया जाता है
  • बाएँ-दाएँ boundary से समान दूरी पर समान displacement मिलता है, इसलिए efficient reuse संभव है

Displacement vector field बनाना

Glass surface के पूरे क्षेत्र में हर position के लिए प्रकाश के displacement की दिशा और magnitude बताने वाला vector field बनाया जाता है

  • Circle में boundary के आधार पर movement हमेशा normal direction में होती है

Displacement magnitude पहले से calculate करना

  • displacement magnitude boundary से दूरी के अनुसार symmetric होती है, इसलिए radius unit के हिसाब से values पहले calculate कर array में store की जाती हैं
  • 2D में केवल एक बार (127 ray simulations) calculate करके, फिर z-axis के चारों ओर rotate करके पूरा field बनाया जाता है

Vector normalization

Vector को displacement map में इस्तेमाल करने के लिए normalization (अधिकतम 1.0 scale) की जाती है

  • maximum displacement value के आधार पर बाकी vector magnitudes को divide करके normalize किया जाता है
const maximumDisplacement = Math.max(...displacementMagnitudes);
displacementVector_normalized = {
  angle: normalAtBorder,
  magnitude: magnitude / maximumDisplacement,
};

SVG displacement map में वास्तविक pixel unit conversion के समय scale से फिर maximum displacement value गुणा कर मूल आकार वापस लिया जाता है

SVG Displacement Map

Mathematical refraction calculation के परिणाम को वास्तविक browser rendering में लागू करने के लिए SVG displacement map का उपयोग किया जाता है

  • <feDisplacementMap /> के हर channel (RGBA, 8-bit) को displacement के X, Y axis के लिए इस्तेमाल किया जा सकता है
  • हर channel की value 0~255 होती है, और 128 neutral (कोई displacement नहीं) को दर्शाता है
  • displacement map को image में convert करना ज़रूरी है
<svg colorInterpolationFilters="sRGB">
  <filter id={id}>
    <feImage
      href={displacementMapDataUrl}
      x={0}
      y={0}
      width={width}
      height={height}
      result="displacement_map"
    />
    <feDisplacementMap
      in="SourceGraphic"
      in2="displacement_map"
      scale={scale}
      xChannelSelector="R"
      yChannelSelector="G"
    />
  </filter>
</svg>

Scale

Red(X) और Green(Y) channel values को [−1, 1] range में map किया जाता है

  • scale property से pixel unit में maximum displacement गुणा करके वास्तविक rendering की जाती है
  • scale को animate करके effect intensity बदली जा सकती है

Vector → Red/Green value conversion

  • displacement vector (angle, magnitude) को x, y Cartesian coordinates में बदलकर 128 (neutral) को आधार मानते हुए 0~255 में map किया जाता है
const x = Math.cos(angle) * magnitude;
const y = Math.sin(angle) * magnitude;
const result = {
  r: 128 + x * 127,
  g: 128 + y * 127,
  b: 128,
  a: 255,
};

तैयार image को SVG filter displacement map के रूप में इस्तेमाल किया जा सकता है

Playground

Interactive Playground में surface shape, bezel thickness, glass thickness, effect scale आदि को real time में बदलते हुए refraction field, displacement map, और final rendering के बदलाव देखे जा सकते हैं

Specular Highlight

अंत में specular highlight (glass surface की चमकीली edge highlight) जोड़ी जाती है

  • Apple का implementation rim light (edge light) शैली का है, जहाँ surface normal और light source angle के अनुसार brightness intensity बदलती है

Refraction और Specular Highlight को मिलाना

अंतिम SVG filter में displacement map और specular highlight image को अलग-अलग <feImage /> से लोड करके <feBlend /> से मिलाया जाता है, और इसी से final effect बनता है

  • filter parameters को समायोजित करके अलग-अलग visuals बनाए जा सकते हैं

SVG filter को backdrop-filter के रूप में इस्तेमाल करना

  • वास्तव में UI component पर Liquid Glass effect लगाने के लिए Chrome में backdrop-filter: url(#...) support होना ज़रूरी है
  • backdrop-filter image size अपने-आप फिट नहीं करता, इसलिए element के आकार के अनुसार displacement map तैयार करना आवश्यक है
.glass-panel {
  backdrop-filter: url(#liquidGlassFilterId);
}

वास्तविक UI components पर लागू करना

Calculate किए गए refraction और displacement map के आधार पर वास्तविक दिखने वाले UI components पर इसके उपयोग के उदाहरण बनाए गए हैं

  • केवल Chrome ही SVG filter को backdrop-filter के रूप में संभाल सकता है
  • ये examples production components नहीं हैं, बल्कि अलग-अलग UI में Liquid Glass effect कैसा दिखता है, यह दिखाने के लिए हैं

Magnifying Glass

  • दोनों तरफ refraction और zoom के लिए दो displacement maps इस्तेमाल होते हैं
  • shadow और scale adjustment से interactive effect दिया जाता है
  • drag करके lens deformation और refraction path देखी जा सकती है
  • smooth specular highlight जोड़ी गई है

Searchbox

  • standard input box form पर Liquid Glass effect लागू किया गया है

Switch

  • lip bezel का उपयोग कर बाहर convex और अंदर concave shape बनाई गई है
  • केवल center slider zoomed state में है, जबकि किनारों पर inner image refraction लागू होती है

Slider

  • convex bezel का उपयोग किया गया है, current value काँच के माध्यम से ज्यों-की-त्यों दिखती है, और दोनों ओर background refraction लागू होती है

Music Player

  • Apple Music के Liquid Glass panel style की नकल की गई है

  • convex bezel और subtle specular highlight से depth दी गई है

  • iTunes Search API से album art, track title आदि जानकारी लोड की जाती है

  • (सूची रूप में track title और album जानकारी दी जाती है)

निष्कर्ष

यह prototype Apple के Liquid Glass विचार को real-time refraction effect और सरल highlight के साथ एक सरल रूप में प्रस्तुत करता है। यह व्यवहारिक रूप से केवल Chromium-आधारित browsers (या Electron) में काम करता है, जबकि दूसरे browsers में इसे blur layer से बदला जा सकता है।
यह एक प्रयोगात्मक implementation है, और हर shape/size बदलाव पर displacement map को फिर से बनाना बहुत अप्रभावी है (filter scale जैसे कुछ parameters ही animate किए जा सकते हैं)।
आगे इसे open source करने पर विचार किया जा रहा है, और optimization तथा code cleanup में रुचि जताई गई है।

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.