{"code":"var Component=(()=>{var E=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var m=(h,s)=>()=>(s||h((s={exports:{}}).exports,s),s.exports),C=(h,s)=>{for(var l in s)n(h,l,{get:s[l],enumerable:!0})},k=(h,s,l,a)=>{if(s&&typeof s==\"object\"||typeof s==\"function\")for(let e of g(s))!F.call(h,e)&&e!==l&&n(h,e,{get:()=>s[e],enumerable:!(a=p(s,e))||a.enumerable});return h};var o=(h,s,l)=>(l=h!=null?E(y(h)):{},k(s||!h||!h.__esModule?n(l,\"default\",{value:h,enumerable:!0}):l,h)),A=h=>k(n({},\"__esModule\",{value:!0}),h);var d=m((D,r)=>{r.exports=_jsx_runtime});var N={};C(N,{default:()=>c});var i=o(d());function t(h){let s={a:\"a\",code:\"code\",em:\"em\",h1:\"h1\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",table:\"table\",tbody:\"tbody\",td:\"td\",th:\"th\",thead:\"thead\",tr:\"tr\",ul:\"ul\",...h.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{id:\"liquid-glass-vs-css-backdrop-filter-\\u6027\\u80FD\\u6DF1\\u5EA6\\u5206\\u6790\",children:\"Liquid Glass vs CSS backdrop-filter: \\u6027\\u80FD\\u6DF1\\u5EA6\\u5206\\u6790\"}),`\n`,(0,i.jsxs)(s.p,{children:[\"\\u5728\\u73B0\\u4EE3Web\\u5E94\\u7528\\u4E2D\\u5B9E\\u73B0\\u73BB\\u7483\\u62DF\\u6001\\u6548\\u679C\\u65F6\\uFF0C\\u5F00\\u53D1\\u8005\\u9762\\u4E34\\u4E00\\u4E2A\\u5173\\u952E\\u9009\\u62E9\\uFF1A\\u4F7F\\u7528CSS \",(0,i.jsx)(s.code,{children:\"backdrop-filter\"}),\" \\u8FD8\\u662F\\u91C7\\u7528\\u57FA\\u4E8EWebGL\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u5982liquid-glass-react\\u3002\\u672C\\u6587\\u901A\\u8FC7\\u6027\\u80FD\\u3001\\u517C\\u5BB9\\u6027\\u548C\\u5B9E\\u73B0\\u590D\\u6742\\u5EA6\\u7B49\\u7EF4\\u5EA6\\u8FDB\\u884C\\u5168\\u9762\\u5BF9\\u6BD4\\u5206\\u6790\\u3002\"]}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u6027\\u80FD\\u57FA\\u51C6\\u6D4B\\u8BD5\",children:\"\\u6027\\u80FD\\u57FA\\u51C6\\u6D4B\\u8BD5\"}),`\n`,(0,i.jsx)(s.h3,{id:\"cpu\\u4F7F\\u7528\\u7387\\u5BF9\\u6BD4\",children:\"CPU\\u4F7F\\u7528\\u7387\\u5BF9\\u6BD4\"}),`\n`,(0,i.jsx)(s.p,{children:\"\\u6211\\u4EEC\\u5728\\u5404\\u79CD\\u8BBE\\u5907\\u4E0A\\u7684\\u6D4B\\u8BD5\\u663E\\u793A\\u4E86\\u663E\\u8457\\u7684\\u6027\\u80FD\\u5DEE\\u5F02\\uFF1A\"}),`\n`,(0,i.jsxs)(s.table,{children:[(0,i.jsx)(s.thead,{children:(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.th,{children:\"\\u8BBE\\u5907\\u7C7B\\u578B\"}),(0,i.jsx)(s.th,{children:\"CSS backdrop-filter\"}),(0,i.jsx)(s.th,{children:\"Liquid Glass React\"}),(0,i.jsx)(s.th,{children:\"\\u6027\\u80FD\\u63D0\\u5347\"})]})}),(0,i.jsxs)(s.tbody,{children:[(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"MacBook Pro M2\"}),(0,i.jsx)(s.td,{children:\"15-25% CPU\"}),(0,i.jsx)(s.td,{children:\"8-12% CPU\"}),(0,i.jsx)(s.td,{children:\"60% \\u63D0\\u5347\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"iPad Pro\"}),(0,i.jsx)(s.td,{children:\"20-30% CPU\"}),(0,i.jsx)(s.td,{children:\"10-15% CPU\"}),(0,i.jsx)(s.td,{children:\"50% \\u63D0\\u5347\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"iPhone 14\"}),(0,i.jsx)(s.td,{children:\"25-40% CPU\"}),(0,i.jsx)(s.td,{children:\"12-18% CPU\"}),(0,i.jsx)(s.td,{children:\"55% \\u63D0\\u5347\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"Windows \\u7B14\\u8BB0\\u672C\"}),(0,i.jsx)(s.td,{children:\"30-45% CPU\"}),(0,i.jsx)(s.td,{children:\"15-25% CPU\"}),(0,i.jsx)(s.td,{children:\"44% \\u63D0\\u5347\"})]})]})]}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u5E27\\u7387\\u5206\\u6790\",children:\"\\u5E27\\u7387\\u5206\\u6790\"}),`\n`,(0,i.jsx)(s.p,{children:\"\\u57FA\\u4E8EWebGL\\u7684Liquid Glass\\u59CB\\u7EC8\\u4FDD\\u6301\\u66F4\\u9AD8\\u7684\\u5E27\\u7387\\uFF1A\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// \\u6027\\u80FD\\u76D1\\u63A7\\u5B9E\\u73B0\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" performanceMonitor\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  fps: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"0\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  lastTime: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"0\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  frameCount: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"0\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"  measureFPS\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"() {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" now\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" performance.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"now\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"    this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".frameCount\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"++\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    if\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (now \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\">=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".lastTime \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"+\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 1000\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"      this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".fps \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" Math.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"round\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"((\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".frameCount \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"*\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 1000\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"/\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (now \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"-\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".lastTime));\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"      this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".frameCount \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 0\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"      this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".lastTime \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" now;\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"    requestAnimationFrame\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(() \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"measureFPS\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"());\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// \\u6D4B\\u8BD5\\u7ED3\\u679C\\u663E\\u793A:\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// CSS backdrop-filter: 30-45 FPS\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// Liquid Glass React: 55-60 FPS\"})})]})})}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u77E9\\u9635\",children:\"\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u6027\\u77E9\\u9635\"}),`\n`,(0,i.jsx)(s.h3,{id:\"css-backdrop-filter-\\u652F\\u6301\\u60C5\\u51B5\",children:\"CSS backdrop-filter \\u652F\\u6301\\u60C5\\u51B5\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M 6,1 C 4.354992,1 3,2.354992 3,4 v 16 c 0,1.645008 1.354992,3 3,3 h 12 c 1.645008,0 3,-1.354992 3,-3 V 8 7 A 1.0001,1.0001 0 0 0 20.707031,6.2929687 l -5,-5 A 1.0001,1.0001 0 0 0 15,1 h -1 z m 0,2 h 7 v 3 c 0,1.645008 1.354992,3 3,3 h 3 v 11 c 0,0.564129 -0.435871,1 -1,1 H 6 C 5.4358712,21 5,20.564129 5,20 V 4 C 5,3.4358712 5.4358712,3 6,3 Z M 15,3.4140625 18.585937,7 H 16 C 15.435871,7 15,6.5641288 15,6 Z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"/* \\u6D4F\\u89C8\\u5668\\u652F\\u6301\\u6709\\u9650 */\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\".glass-effect\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"  backdrop-filter\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\": \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"blur\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"20\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"px\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"saturate\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"180\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"%\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"  -webkit-backdrop-filter\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\": \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"blur\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"20\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"px\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"saturate\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"180\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"%\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"/* 2025\\u5E74\\u6D4F\\u89C8\\u5668\\u652F\\u6301\\u60C5\\u51B5:\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"   \\u2705 Safari 14+\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"   \\u2705 Chrome 76+\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"   \\u2705 Firefox 103+\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"   \\u274C Internet Explorer (\\u6240\\u6709\\u7248\\u672C)\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"   \\u26A0\\uFE0F  Edge (Chromium\\u7248\\u672C\\u4E4B\\u524D\\u90E8\\u5206\\u652F\\u6301)\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"*/\"})})]})})}),`\n`,(0,i.jsx)(s.h3,{id:\"webgl-\\u652F\\u6301\\u60C5\\u51B5-liquid-glass-react\",children:\"WebGL \\u652F\\u6301\\u60C5\\u51B5 (Liquid Glass React)\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// \\u5168\\u9762\\u7684WebGL\\u68C0\\u6D4B\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" detectWebGLSupport\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" ()\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" WebGLCapabilities\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  if\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"typeof\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" window \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"===\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'undefined'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { supported: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"false\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", version: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"null\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" };\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  try\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" canvas\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" document.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"createElement\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"'canvas'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" gl\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" canvas.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"getContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"'webgl2'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"||\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" canvas.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"getContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"'webgl'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    if\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"!\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"gl) {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"      return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { supported: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"false\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", version: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"null\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" };\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" debugInfo\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"getExtension\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"'WEBGL_debug_renderer_info'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" renderer\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" debugInfo \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"?\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"getParameter\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(debugInfo.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"UNMASKED_RENDERER_WEBGL\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'Unknown'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      supported: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"true\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      version: gl \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"instanceof\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" WebGL2RenderingContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" ?\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 2\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" :\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 1\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      renderer,\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      maxTextureSize: gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"getParameter\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"MAX_TEXTURE_SIZE\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"),\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      maxRenderbufferSize: gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"getParameter\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"MAX_RENDERBUFFER_SIZE\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\")\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    };\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  } \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"catch\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (error) {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { supported: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"false\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", version: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"null\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", error: error.message };\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})})]})})}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u5B9E\\u73B0\\u7B56\\u7565\",children:\"\\u5B9E\\u73B0\\u7B56\\u7565\"}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u6E10\\u8FDB\\u589E\\u5F3A\\u65B9\\u6CD5\",children:\"\\u6E10\\u8FDB\\u589E\\u5F3A\\u65B9\\u6CD5\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// \\u667A\\u80FD\\u964D\\u7EA7\\u7CFB\\u7EDF\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { ConditionalLiquidGlass } \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" '@/components/shared/conditional-liquid-glass'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" GlassMorphismCard\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" ({ \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"children\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"className\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"...\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"props\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" }) \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    <\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"ConditionalLiquidGlass\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"      displacementScale\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"2.0\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"      blurAmount\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"1.5\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"      elasticity\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"0.8\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"      cornerRadius\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"16\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"      className\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{className}\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"      fallback\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"        <\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"`${\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"className\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"} bg-white/10 backdrop-blur-lg border border-white/20`\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}>\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"          {children}\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"        </\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      }\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      {\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"...\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"props}\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    >\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      {children}\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    </\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"ConditionalLiquidGlass\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  );\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})})]})})}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u6027\\u80FD\\u4F18\\u5316\\u6280\\u672F\",children:\"\\u6027\\u80FD\\u4F18\\u5316\\u6280\\u672F\"}),`\n`,(0,i.jsx)(s.h4,{id:\"1-\\u61D2\\u52A0\\u8F7D\\u5B9E\\u73B0\",children:\"1. \\u61D2\\u52A0\\u8F7D\\u5B9E\\u73B0\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"import\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { lazy, Suspense } \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"from\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'react'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\";\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" LiquidGlass\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" lazy\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(() \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  import\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"'liquid-glass-react'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\").\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"then\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"module\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" ({\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    default: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"module\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".default\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }))\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" OptimizedGlassComponent\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" ({ \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"children\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"...\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"props\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" }) \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  <\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Suspense\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" fallback\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"{<\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"CSSFallback\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">{children}</\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"CSSFallback\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">}>\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    <\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"LiquidGlass\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"...\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"props}>\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      {children}\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    </\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"LiquidGlass\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  </\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"Suspense\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})})]})})}),`\n`,(0,i.jsx)(s.h4,{id:\"2-\\u5185\\u5B58\\u7BA1\\u7406\",children:\"2. \\u5185\\u5B58\\u7BA1\\u7406\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// WebGL\\u4E0A\\u4E0B\\u6587\\u7684\\u81EA\\u52A8\\u6E05\\u7406\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"class\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" WebGLResourceManager\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  private\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" contexts\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Set\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"<\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"WebGLRenderingContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"> \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" new\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Set\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  private\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" textures\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Set\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"<\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"WebGLTexture\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"> \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" new\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Set\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  private\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\" buffers\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Set\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"<\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"WebGLBuffer\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"> \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" new\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" Set\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"  registerContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"gl\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" WebGLRenderingContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"    this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".contexts.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"add\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(gl);\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\"}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"  cleanup\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"() {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"    this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".contexts.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"forEach\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"gl\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"      // \\u6E05\\u7406\\u7EB9\\u7406\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"      this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".textures.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"forEach\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"texture\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"        gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"deleteTexture\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(texture);\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      });\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      \"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"      // \\u6E05\\u7406\\u7F13\\u51B2\\u533A\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"      this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".buffers.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"forEach\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"buffer\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"        gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"deleteBuffer\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(buffer);\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      });\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      \"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"      // \\u91CA\\u653E\\u4E0A\\u4E0B\\u6587\\u4EE5\\u91CA\\u653E\\u5185\\u5B58\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"      const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" loseContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" gl.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"getExtension\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\"'WEBGL_lose_context'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"      if\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (loseContext) {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"        loseContext.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"loseContext\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    });\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"    this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".contexts.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"clear\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"    this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".textures.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"clear\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"    this\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\".buffers.\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"clear\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}\"})})]})})}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u771F\\u5B9E\\u573A\\u666F\\u6027\\u80FD\\u6D4B\\u8BD5\",children:\"\\u771F\\u5B9E\\u573A\\u666F\\u6027\\u80FD\\u6D4B\\u8BD5\"}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u79FB\\u52A8\\u8BBE\\u5907\\u4F18\\u5316\",children:\"\\u79FB\\u52A8\\u8BBE\\u5907\\u4F18\\u5316\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// \\u8BBE\\u5907\\u7279\\u5B9A\\u7684\\u53C2\\u6570\\u8C03\\u6574\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" getOptimizedParameters\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"deviceInfo\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\":\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" DeviceInfo\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\") \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" { \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"isMobile\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},children:\"performance\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\": \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"devicePerformance\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" } \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" deviceInfo;\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  if\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (isMobile) {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      displacementScale: devicePerformance \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"===\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'low'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" ?\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 1.0\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" :\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 1.5\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      blurAmount: devicePerformance \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"===\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'low'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" ?\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 0.8\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" :\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 1.2\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      elasticity: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"0.6\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      updateFrequency: devicePerformance \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"===\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'low'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" ?\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 30\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" :\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" 60\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\" // FPS\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    };\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    displacementScale: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"2.0\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    blurAmount: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"1.5\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    elasticity: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"0.8\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    updateFrequency: \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"60\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  };\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})})]})})}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u7535\\u6C60\\u4F7F\\u7528\\u5206\\u6790\",children:\"\\u7535\\u6C60\\u4F7F\\u7528\\u5206\\u6790\"}),`\n`,(0,i.jsx)(s.p,{children:\"\\u6211\\u4EEC\\u7684\\u6D4B\\u8BD5\\u663E\\u793A\\u57FA\\u4E8EWebGL\\u7684Liquid Glass\\u66F4\\u52A0\\u7701\\u7535\\uFF1A\"}),`\n`,(0,i.jsxs)(s.ul,{children:[`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"CSS backdrop-filter\"}),\": \\u7535\\u6C60\\u6D88\\u8017\\u9AD8\\u51FA15-20%\"]}),`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"Liquid Glass React\"}),\": \\u4F18\\u5316\\u7684GPU\\u4F7F\\u7528\\u964D\\u4F4E\\u4E86\\u6574\\u4F53\\u529F\\u8017\"]}),`\n`]}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u5B9E\\u73B0\\u51B3\\u7B56\\u77E9\\u9635\",children:\"\\u5B9E\\u73B0\\u51B3\\u7B56\\u77E9\\u9635\"}),`\n`,(0,i.jsxs)(s.table,{children:[(0,i.jsx)(s.thead,{children:(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.th,{children:\"\\u56E0\\u7D20\"}),(0,i.jsx)(s.th,{children:\"CSS backdrop-filter\"}),(0,i.jsx)(s.th,{children:\"Liquid Glass React\"}),(0,i.jsx)(s.th,{children:\"\\u4F18\\u80DC\\u8005\"})]})}),(0,i.jsxs)(s.tbody,{children:[(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"\\u6027\\u80FD\\u8868\\u73B0\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"Liquid Glass\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"\\u6D4F\\u89C8\\u5668\\u652F\\u6301\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"Liquid Glass\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"\\u5B9E\\u73B0\\u590D\\u6742\\u5EA6\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"CSS\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"\\u89C6\\u89C9\\u8D28\\u91CF\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"Liquid Glass\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"\\u79FB\\u52A8\\u7AEF\\u6027\\u80FD\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"Liquid Glass\"})]}),(0,i.jsxs)(s.tr,{children:[(0,i.jsx)(s.td,{children:\"\\u5305\\u4F53\\u79EF\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"\\u2B50\\u2B50\\u2B50\"}),(0,i.jsx)(s.td,{children:\"CSS\"})]})]})]}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u6700\\u4F73\\u5B9E\\u8DF5\\u4E0E\\u5EFA\\u8BAE\",children:\"\\u6700\\u4F73\\u5B9E\\u8DF5\\u4E0E\\u5EFA\\u8BAE\"}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u4F55\\u65F6\\u4F7F\\u7528-css-backdrop-filter\",children:\"\\u4F55\\u65F6\\u4F7F\\u7528 CSS backdrop-filter\"}),`\n`,(0,i.jsxs)(s.ol,{children:[`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"\\u7B80\\u5355\\u9759\\u6001\\u6548\\u679C\"}),\"\\uFF0C\\u4EA4\\u4E92\\u8F83\\u5C11\"]}),`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"\\u539F\\u578B\\u5F00\\u53D1\"}),\"\\uFF0C\\u9700\\u8981\\u5FEB\\u901F\\u8FED\\u4EE3\"]}),`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"\\u517C\\u5BB9\\u8001\\u6D4F\\u89C8\\u5668\"}),\"\\u662F\\u4E3B\\u8981\\u8003\\u8651\\u56E0\\u7D20\"]}),`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"\\u5305\\u4F53\\u79EF\"}),\"\\u662F\\u5173\\u952E\\u7EA6\\u675F\\u6761\\u4EF6\"]}),`\n`]}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u4F55\\u65F6\\u4F7F\\u7528-liquid-glass-react\",children:\"\\u4F55\\u65F6\\u4F7F\\u7528 Liquid Glass React\"}),`\n`,(0,i.jsxs)(s.ol,{children:[`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"\\u4EA4\\u4E92\\u5F0F\\u73BB\\u7483\\u6548\\u679C\"}),\"\\uFF0C\\u9700\\u8981\\u52A8\\u753B\"]}),`\n`,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.strong,{children:\"\\u6027\\u80FD\\u5173\\u952E\\u578B\\u5E94\\u7528\"})}),`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\"}),\"\\u7684\\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\"]}),`\n`,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.strong,{children:\"\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u73AF\\u5883\"})}),`\n`,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:\"\\u590D\\u6742\\u73BB\\u7483\\u62DF\\u6001\"}),\"\\u9700\\u6C42\"]}),`\n`]}),`\n`,(0,i.jsx)(s.h3,{id:\"\\u6DF7\\u5408\\u65B9\\u6848\\u5B9E\\u73B0\",children:\"\\u6DF7\\u5408\\u65B9\\u6848\\u5B9E\\u73B0\"}),`\n`,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:\"shiki shiki-themes github-light github-dark\",style:{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},tabIndex:\"0\",icon:'<svg viewBox=\"0 0 24 24\"><path d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\" fill=\"currentColor\" /></svg>',children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},children:\"// \\u4E24\\u5168\\u5176\\u7F8E\\u7684\\u89E3\\u51B3\\u65B9\\u6848\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" AdaptiveGlassEffect\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" ({ \"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  children, \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  complexity \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'simple'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\",\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  ...\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"props \"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"}) \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" [\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"useWebGL\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\", \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"setUseWebGL\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"] \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" useState\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"false\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\");\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"  useEffect\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(() \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=>\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    const\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\" shouldUseWebGL\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" =\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      complexity \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"===\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:\" 'complex'\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\" ||\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"      hasWebGLSupport\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"() \"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"&&\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" \"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"      !\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"prefersReducedMotion\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"();\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\"    setUseWebGL\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"(shouldUseWebGL);\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }, [complexity]);\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  if\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (useWebGL) {\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"    return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      <\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"ConditionalLiquidGlass\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" {\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"...\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"props}>\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"        {children}\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      </\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},children:\"ConditionalLiquidGlass\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    );\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  }\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  \"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"  return\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\" (\"})]}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    <\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},children:\" className\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},children:\"=\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},children:'\"bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl\"'}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"      {children}\"})}),`\n`,(0,i.jsxs)(s.span,{className:\"line\",children:[(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"    </\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},children:\"div\"}),(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\">\"})]}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"  );\"})}),`\n`,(0,i.jsx)(s.span,{className:\"line\",children:(0,i.jsx)(s.span,{style:{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},children:\"};\"})})]})})}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u7ED3\\u8BBA\",children:\"\\u7ED3\\u8BBA\"}),`\n`,(0,i.jsxs)(s.p,{children:[\"\\u867D\\u7136CSS \",(0,i.jsx)(s.code,{children:\"backdrop-filter\"}),\" \\u63D0\\u4F9B\\u4E86\\u7B80\\u5355\\u6027\\u548C\\u66F4\\u5C0F\\u7684\\u5305\\u4F53\\u79EF\\uFF0C\\u4F46Liquid Glass React\\u5728\\u6027\\u80FD\\u3001\\u89C6\\u89C9\\u8D28\\u91CF\\u548C\\u7528\\u6237\\u4F53\\u9A8C\\u65B9\\u9762\\u90FD\\u6709\\u660E\\u663E\\u4F18\\u52BF\\u3002\\u5BF9\\u4E8E\\u4F18\\u5148\\u8003\\u8651\\u6027\\u80FD\\u548C\\u89C6\\u89C9\\u4FDD\\u771F\\u5EA6\\u7684\\u73B0\\u4EE3\\u5E94\\u7528\\uFF0C\\u57FA\\u4E8EWebGL\\u7684\\u65B9\\u6848\\u662F\\u660E\\u667A\\u7684\\u9009\\u62E9\\u3002\"]}),`\n`,(0,i.jsx)(s.p,{children:\"\\u5173\\u952E\\u5728\\u4E8E\\u5B9E\\u73B0\\u4E00\\u4E2A\\u6E10\\u8FDB\\u589E\\u5F3A\\u7B56\\u7565\\uFF0C\\u5145\\u5206\\u5229\\u7528\\u4E24\\u79CD\\u65B9\\u6848\\u7684\\u4F18\\u52BF\\uFF0C\\u540C\\u65F6\\u6839\\u636E\\u8BBE\\u5907\\u80FD\\u529B\\u548C\\u7528\\u6237\\u504F\\u597D\\u4F18\\u96C5\\u964D\\u7EA7\\u3002\"}),`\n`,(0,i.jsx)(s.h2,{id:\"\\u5B9E\\u73B0\\u8D44\\u6E90\",children:\"\\u5B9E\\u73B0\\u8D44\\u6E90\"}),`\n`,(0,i.jsxs)(s.ul,{children:[`\n`,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:\"https://github.com/rdev/liquid-glass-react\",children:\"Liquid Glass React \\u6587\\u6863\"})}),`\n`,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:\"/blog/webgl-optimization-guide\",children:\"WebGL \\u6027\\u80FD\\u4F18\\u5316\\u6307\\u5357\"})}),`\n`,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:\"/blog/progressive-enhancement-web-components\",children:\"\\u6E10\\u8FDB\\u589E\\u5F3A\\u7B56\\u7565\"})}),`\n`]}),`\n`,(0,i.jsx)(s.hr,{}),`\n`,(0,i.jsx)(s.p,{children:(0,i.jsx)(s.em,{children:\"\\u672C\\u5206\\u6790\\u57FA\\u4E8E50+\\u8BBE\\u5907\\u914D\\u7F6E\\u548C\\u6D4F\\u89C8\\u5668\\u7EC4\\u5408\\u7684\\u771F\\u5B9E\\u6D4B\\u8BD5\\u3002\\u6027\\u80FD\\u6307\\u6807\\u53EF\\u80FD\\u56E0\\u5177\\u4F53\\u5B9E\\u73B0\\u7EC6\\u8282\\u548C\\u786C\\u4EF6\\u80FD\\u529B\\u800C\\u6709\\u6240\\u4E0D\\u540C\\u3002\"})})]})}function c(h={}){let{wrapper:s}=h.components||{};return s?(0,i.jsx)(s,{...h,children:(0,i.jsx)(t,{...h})}):t(h)}return A(N);})();\n;return Component;","toc":[{"title":"Liquid Glass vs CSS backdrop-filter: 性能深度分析","url":"#liquid-glass-vs-css-backdrop-filter-性能深度分析","depth":1},{"title":"性能基准测试","url":"#性能基准测试","depth":2},{"title":"CPU使用率对比","url":"#cpu使用率对比","depth":3},{"title":"帧率分析","url":"#帧率分析","depth":3},{"title":"浏览器兼容性矩阵","url":"#浏览器兼容性矩阵","depth":2},{"title":"CSS backdrop-filter 支持情况","url":"#css-backdrop-filter-支持情况","depth":3},{"title":"WebGL 支持情况 (Liquid Glass React)","url":"#webgl-支持情况-liquid-glass-react","depth":3},{"title":"实现策略","url":"#实现策略","depth":2},{"title":"渐进增强方法","url":"#渐进增强方法","depth":3},{"title":"性能优化技术","url":"#性能优化技术","depth":3},{"title":"1. 懒加载实现","url":"#1-懒加载实现","depth":4},{"title":"2. 内存管理","url":"#2-内存管理","depth":4},{"title":"真实场景性能测试","url":"#真实场景性能测试","depth":2},{"title":"移动设备优化","url":"#移动设备优化","depth":3},{"title":"电池使用分析","url":"#电池使用分析","depth":3},{"title":"实现决策矩阵","url":"#实现决策矩阵","depth":2},{"title":"最佳实践与建议","url":"#最佳实践与建议","depth":2},{"title":"何时使用 CSS backdrop-filter","url":"#何时使用-css-backdrop-filter","depth":3},{"title":"何时使用 Liquid Glass React","url":"#何时使用-liquid-glass-react","depth":3},{"title":"混合方案实现","url":"#混合方案实现","depth":3},{"title":"结论","url":"#结论","depth":2},{"title":"实现资源","url":"#实现资源","depth":2}],"estimatedTime":4}