[{"data":1,"prerenderedAt":1915},["ShallowReactive",2],{"navigation":3,"/api/objects/refractor":486,"/api/objects/refractor-surround":1910},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,198,296,322,356,406,452],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186,190,194],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":183,"path":184,"stem":185},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":187,"path":188,"stem":189},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":191,"path":192,"stem":193},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":195,"path":196,"stem":197},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":199,"path":200,"stem":201,"children":202},"Shapes","/api/shapes","2.api/5.shapes/index",[203,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292],{"title":199,"path":200,"stem":201},{"title":205,"path":206,"stem":207},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":209,"path":210,"stem":211},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":213,"path":214,"stem":215},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":217,"path":218,"stem":219},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":221,"path":222,"stem":223},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":225,"path":226,"stem":227},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":229,"path":230,"stem":231},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":233,"path":234,"stem":235},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":237,"path":238,"stem":239},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":241,"path":242,"stem":243},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":245,"path":246,"stem":247},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":249,"path":250,"stem":251},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":253,"path":254,"stem":255},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":257,"path":258,"stem":259},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":261,"path":262,"stem":263},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":265,"path":266,"stem":267},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":269,"path":270,"stem":271},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":273,"path":274,"stem":275},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":277,"path":278,"stem":279},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":281,"path":282,"stem":283},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":285,"path":286,"stem":287},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":289,"path":290,"stem":291},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":293,"path":294,"stem":295},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":297,"path":298,"stem":299,"children":300},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[301,302,306,310,314,318],{"title":297,"path":298,"stem":299},{"title":303,"path":304,"stem":305},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":307,"path":308,"stem":309},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":311,"path":312,"stem":313},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":315,"path":316,"stem":317},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":319,"path":320,"stem":321},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":323,"path":324,"stem":325,"children":326},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[327,328,332,336,340,344,348,352],{"title":323,"path":324,"stem":325},{"title":329,"path":330,"stem":331},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":333,"path":334,"stem":335},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":337,"path":338,"stem":339},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":341,"path":342,"stem":343},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":345,"path":346,"stem":347},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":349,"path":350,"stem":351},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":353,"path":354,"stem":355},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":357,"path":358,"stem":359,"children":360},"Staging","/api/staging","2.api/8.staging/index",[361,362,366,370,374,378,382,386,390,394,398,402],{"title":357,"path":358,"stem":359},{"title":363,"path":364,"stem":365},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":367,"path":368,"stem":369},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":371,"path":372,"stem":373},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":375,"path":376,"stem":377},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":379,"path":380,"stem":381},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":383,"path":384,"stem":385},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":387,"path":388,"stem":389},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":391,"path":392,"stem":393},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":395,"path":396,"stem":397},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":399,"path":400,"stem":401},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":403,"path":404,"stem":405},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":407,"path":408,"stem":409,"children":410},"Objects","/api/objects","2.api/9.objects/index",[411,412,416,420,424,428,432,436,440,444,448],{"title":407,"path":408,"stem":409},{"title":413,"path":414,"stem":415},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":417,"path":418,"stem":419},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":421,"path":422,"stem":423},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":425,"path":426,"stem":427},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":429,"path":430,"stem":431},"HTML","/api/objects/html","2.api/9.objects/html",{"title":433,"path":434,"stem":435},"Image","/api/objects/image","2.api/9.objects/image",{"title":437,"path":438,"stem":439},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":441,"path":442,"stem":443},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":445,"path":446,"stem":447},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":449,"path":450,"stem":451},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":453,"path":454,"stem":455,"children":456},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[457,458,462,466,470,474,478,482],{"title":453,"path":454,"stem":455},{"title":459,"path":460,"stem":461},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":463,"path":464,"stem":465},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":467,"path":468,"stem":469},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":471,"path":472,"stem":473},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":475,"path":476,"stem":477},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":479,"path":480,"stem":481},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":483,"path":484,"stem":485},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":487,"title":445,"body":488,"description":1904,"extension":1905,"links":1906,"meta":1907,"navigation":610,"path":446,"seo":1908,"stem":447,"__hash__":1909},"docs/2.api/9.objects/refractor.md",{"type":489,"value":490,"toc":1897},"minimark",[491,497,518,522,845,849,963,972,976,991,1650,1653,1658,1893],[492,493,494],"scene-controls-wrapper",{},[495,496],"objects-refractor",{},[498,499,500,501,505,506,513,514,517],"p",{},"The ",[502,503,504],"code",{},"cientos"," package provides an abstraction of the ",[507,508,512],"a",{"href":509,"rel":510},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[511],"nofollow","Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[502,515,516],{},"Mesh"," so all the default props can be passed as well.",[519,520,15],"h2",{"id":521},"usage",[523,524,529],"pre",{"className":525,"code":526,"language":527,"meta":528,"style":528},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" />\n    \u003COrbitControls />\n\n    \u003C!-- Place objects behind the refracting plane -->\n    \u003CTresMesh :position=\"[-2, 0, -2]\">\n      \u003CTresTorusKnotGeometry />\n      \u003CTresMeshStandardMaterial color=\"hotpink\" />\n    \u003C/TresMesh>\n\n    \u003CSuspense>\n      \u003CRefractor color=\"#9ec8d4\">\n        \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n      \u003C/Refractor>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[502,530,531,566,595,605,612,622,639,663,673,678,685,706,717,739,749,754,764,784,807,817,826,836],{"__ignoreMap":528},[532,533,536,540,544,548,551,554,557,561,563],"span",{"class":534,"line":535},"line",1,[532,537,539],{"class":538},"sMK4o","\u003C",[532,541,543],{"class":542},"swJcz","script",[532,545,547],{"class":546},"spNyl"," setup",[532,549,550],{"class":546}," lang",[532,552,553],{"class":538},"=",[532,555,556],{"class":538},"\"",[532,558,560],{"class":559},"sfazB","ts",[532,562,556],{"class":538},[532,564,565],{"class":538},">\n",[532,567,569,573,576,580,583,586,589,592],{"class":534,"line":568},2,[532,570,572],{"class":571},"s7zQu","import",[532,574,575],{"class":538}," {",[532,577,579],{"class":578},"sTEyZ"," Refractor",[532,581,582],{"class":538}," }",[532,584,585],{"class":571}," from",[532,587,588],{"class":538}," '",[532,590,591],{"class":559},"@tresjs/cientos",[532,593,594],{"class":538},"'\n",[532,596,598,601,603],{"class":534,"line":597},3,[532,599,600],{"class":538},"\u003C/",[532,602,543],{"class":542},[532,604,565],{"class":538},[532,606,608],{"class":534,"line":607},4,[532,609,611],{"emptyLinePlaceholder":610},true,"\n",[532,613,615,617,620],{"class":534,"line":614},5,[532,616,539],{"class":538},[532,618,619],{"class":542},"template",[532,621,565],{"class":538},[532,623,625,628,631,634,637],{"class":534,"line":624},6,[532,626,627],{"class":538},"  \u003C",[532,629,630],{"class":542},"TresCanvas",[532,632,633],{"class":546}," shadows",[532,635,636],{"class":546}," alpha",[532,638,565],{"class":538},[532,640,642,645,648,651,653,655,658,660],{"class":534,"line":641},7,[532,643,644],{"class":538},"    \u003C",[532,646,647],{"class":542},"TresPerspectiveCamera",[532,649,650],{"class":546}," :position",[532,652,553],{"class":538},[532,654,556],{"class":538},[532,656,657],{"class":559},"[0, 2, 8]",[532,659,556],{"class":538},[532,661,662],{"class":538}," />\n",[532,664,666,668,671],{"class":534,"line":665},8,[532,667,644],{"class":538},[532,669,670],{"class":542},"OrbitControls",[532,672,662],{"class":538},[532,674,676],{"class":534,"line":675},9,[532,677,611],{"emptyLinePlaceholder":610},[532,679,681],{"class":534,"line":680},10,[532,682,684],{"class":683},"sHwdD","    \u003C!-- Place objects behind the refracting plane -->\n",[532,686,688,690,693,695,697,699,702,704],{"class":534,"line":687},11,[532,689,644],{"class":538},[532,691,692],{"class":542},"TresMesh",[532,694,650],{"class":546},[532,696,553],{"class":538},[532,698,556],{"class":538},[532,700,701],{"class":559},"[-2, 0, -2]",[532,703,556],{"class":538},[532,705,565],{"class":538},[532,707,709,712,715],{"class":534,"line":708},12,[532,710,711],{"class":538},"      \u003C",[532,713,714],{"class":542},"TresTorusKnotGeometry",[532,716,662],{"class":538},[532,718,720,722,725,728,730,732,735,737],{"class":534,"line":719},13,[532,721,711],{"class":538},[532,723,724],{"class":542},"TresMeshStandardMaterial",[532,726,727],{"class":546}," color",[532,729,553],{"class":538},[532,731,556],{"class":538},[532,733,734],{"class":559},"hotpink",[532,736,556],{"class":538},[532,738,662],{"class":538},[532,740,742,745,747],{"class":534,"line":741},14,[532,743,744],{"class":538},"    \u003C/",[532,746,692],{"class":542},[532,748,565],{"class":538},[532,750,752],{"class":534,"line":751},15,[532,753,611],{"emptyLinePlaceholder":610},[532,755,757,759,762],{"class":534,"line":756},16,[532,758,644],{"class":538},[532,760,761],{"class":542},"Suspense",[532,763,565],{"class":538},[532,765,767,769,771,773,775,777,780,782],{"class":534,"line":766},17,[532,768,711],{"class":538},[532,770,445],{"class":542},[532,772,727],{"class":546},[532,774,553],{"class":538},[532,776,556],{"class":538},[532,778,779],{"class":559},"#9ec8d4",[532,781,556],{"class":538},[532,783,565],{"class":538},[532,785,787,790,793,796,798,800,803,805],{"class":534,"line":786},18,[532,788,789],{"class":538},"        \u003C",[532,791,792],{"class":542},"TresPlaneGeometry",[532,794,795],{"class":546}," :args",[532,797,553],{"class":538},[532,799,556],{"class":538},[532,801,802],{"class":559},"[8, 5]",[532,804,556],{"class":538},[532,806,662],{"class":538},[532,808,810,813,815],{"class":534,"line":809},19,[532,811,812],{"class":538},"      \u003C/",[532,814,445],{"class":542},[532,816,565],{"class":538},[532,818,820,822,824],{"class":534,"line":819},20,[532,821,744],{"class":538},[532,823,761],{"class":542},[532,825,565],{"class":538},[532,827,829,832,834],{"class":534,"line":828},21,[532,830,831],{"class":538},"  \u003C/",[532,833,630],{"class":542},[532,835,565],{"class":538},[532,837,839,841,843],{"class":534,"line":838},22,[532,840,600],{"class":538},[532,842,619],{"class":542},[532,844,565],{"class":538},[519,846,848],{"id":847},"props","Props",[850,851,852,869],"table",{},[853,854,855],"thead",{},[856,857,858,863,866],"tr",{},[859,860,862],"th",{"align":861},"left","Prop",[859,864,865],{"align":861},"Description",[859,867,868],{},"Default",[870,871,872,889,904,918,933,948],"tbody",{},[856,873,874,881,884],{},[875,876,877],"td",{"align":861},[878,879,880],"strong",{},"color",[875,882,883],{"align":861},"Color tint blended with the refracted image",[875,885,886],{},[502,887,888],{},"'#7f7f7f'",[856,890,891,896,899],{},[875,892,893],{"align":861},[878,894,895],{},"textureWidth",[875,897,898],{"align":861},"Width of the internal render target texture",[875,900,901],{},[502,902,903],{},"512",[856,905,906,911,914],{},[875,907,908],{"align":861},[878,909,910],{},"textureHeight",[875,912,913],{"align":861},"Height of the internal render target texture",[875,915,916],{},[502,917,903],{},[856,919,920,925,928],{},[875,921,922],{"align":861},[878,923,924],{},"clipBias",[875,926,927],{"align":861},"Clip bias for the virtual camera projection",[875,929,930],{},[502,931,932],{},"0",[856,934,935,940,943],{},[875,936,937],{"align":861},[878,938,939],{},"multisample",[875,941,942],{"align":861},"Number of MSAA samples for the render target",[875,944,945],{},[502,946,947],{},"4",[856,949,950,955,958],{},[875,951,952],{"align":861},[878,953,954],{},"shader",[875,956,957],{"align":861},"Custom shader object to override the built-in shader",[875,959,960],{},[502,961,962],{},"Refractor.RefractorShader",[964,965,966],"prose-warning",{},[498,967,968,969,971],{},"All the props except ",[502,970,880],{}," are not reactive",[519,973,975],{"id":974},"custom-refraction-effect","Custom refraction effect",[498,977,978,979,982,983,986,987,990],{},"You can provide your own shader by passing a full shader object with ",[502,980,981],{},"uniforms",", ",[502,984,985],{},"vertexShader",", and ",[502,988,989],{},"fragmentShader",". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[523,992,994],{"className":525,"code":993,"language":527,"meta":528,"style":528},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n  uniforms: {\n    color: { value: null },\n    tDiffuse: { value: null },\n    textureMatrix: { value: null },\n    time: { value: 0 },\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    void main() {\n      vUv = textureMatrix * vec4(position, 1.0);\n      vPos = position.xy;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    float blendOverlay(float base, float blend) {\n      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n    }\n    vec3 blendOverlay(vec3 base, vec3 blend) {\n      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n    }\n    void main() {\n      float dist = length(vPos);\n      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n      vec4 base = texture2DProj(tDiffuse, distortedUv);\n      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n  const uniforms = refractorRef.value?.instance?.material?.uniforms\n  if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRefractor\n    ref=\"refractorRef\"\n    color=\"#9ec8d4\"\n    :shader=\"customShader\"\n  >\n    \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n  \u003C/Refractor>\n\u003C/template>\n",[502,995,996,1016,1034,1054,1073,1077,1093,1097,1109,1119,1139,1156,1173,1192,1197,1210,1215,1220,1225,1230,1235,1240,1245,1257,1269,1275,1281,1287,1292,1297,1303,1309,1315,1321,1327,1332,1337,1343,1349,1355,1361,1367,1373,1379,1385,1394,1400,1405,1425,1449,1485,1524,1532,1541,1546,1555,1563,1579,1592,1607,1613,1632,1641],{"__ignoreMap":528},[532,997,998,1000,1002,1004,1006,1008,1010,1012,1014],{"class":534,"line":535},[532,999,539],{"class":538},[532,1001,543],{"class":542},[532,1003,547],{"class":546},[532,1005,550],{"class":546},[532,1007,553],{"class":538},[532,1009,556],{"class":538},[532,1011,560],{"class":559},[532,1013,556],{"class":538},[532,1015,565],{"class":538},[532,1017,1018,1020,1022,1024,1026,1028,1030,1032],{"class":534,"line":568},[532,1019,572],{"class":571},[532,1021,575],{"class":538},[532,1023,579],{"class":578},[532,1025,582],{"class":538},[532,1027,585],{"class":571},[532,1029,588],{"class":538},[532,1031,591],{"class":559},[532,1033,594],{"class":538},[532,1035,1036,1038,1040,1043,1045,1047,1049,1052],{"class":534,"line":597},[532,1037,572],{"class":571},[532,1039,575],{"class":538},[532,1041,1042],{"class":578}," useLoop",[532,1044,582],{"class":538},[532,1046,585],{"class":571},[532,1048,588],{"class":538},[532,1050,1051],{"class":559},"@tresjs/core",[532,1053,594],{"class":538},[532,1055,1056,1058,1060,1063,1065,1067,1069,1071],{"class":534,"line":607},[532,1057,572],{"class":571},[532,1059,575],{"class":538},[532,1061,1062],{"class":578}," shallowRef",[532,1064,582],{"class":538},[532,1066,585],{"class":571},[532,1068,588],{"class":538},[532,1070,527],{"class":559},[532,1072,594],{"class":538},[532,1074,1075],{"class":534,"line":614},[532,1076,611],{"emptyLinePlaceholder":610},[532,1078,1079,1082,1085,1087,1090],{"class":534,"line":624},[532,1080,1081],{"class":546},"const",[532,1083,1084],{"class":578}," refractorRef ",[532,1086,553],{"class":538},[532,1088,1062],{"class":1089},"s2Zo4",[532,1091,1092],{"class":578},"()\n",[532,1094,1095],{"class":534,"line":641},[532,1096,611],{"emptyLinePlaceholder":610},[532,1098,1099,1101,1104,1106],{"class":534,"line":665},[532,1100,1081],{"class":546},[532,1102,1103],{"class":578}," customShader ",[532,1105,553],{"class":538},[532,1107,1108],{"class":538}," {\n",[532,1110,1111,1114,1117],{"class":534,"line":675},[532,1112,1113],{"class":542},"  uniforms",[532,1115,1116],{"class":538},":",[532,1118,1108],{"class":538},[532,1120,1121,1124,1126,1128,1131,1133,1136],{"class":534,"line":680},[532,1122,1123],{"class":542},"    color",[532,1125,1116],{"class":538},[532,1127,575],{"class":538},[532,1129,1130],{"class":542}," value",[532,1132,1116],{"class":538},[532,1134,1135],{"class":538}," null",[532,1137,1138],{"class":538}," },\n",[532,1140,1141,1144,1146,1148,1150,1152,1154],{"class":534,"line":687},[532,1142,1143],{"class":542},"    tDiffuse",[532,1145,1116],{"class":538},[532,1147,575],{"class":538},[532,1149,1130],{"class":542},[532,1151,1116],{"class":538},[532,1153,1135],{"class":538},[532,1155,1138],{"class":538},[532,1157,1158,1161,1163,1165,1167,1169,1171],{"class":534,"line":708},[532,1159,1160],{"class":542},"    textureMatrix",[532,1162,1116],{"class":538},[532,1164,575],{"class":538},[532,1166,1130],{"class":542},[532,1168,1116],{"class":538},[532,1170,1135],{"class":538},[532,1172,1138],{"class":538},[532,1174,1175,1178,1180,1182,1184,1186,1190],{"class":534,"line":719},[532,1176,1177],{"class":542},"    time",[532,1179,1116],{"class":538},[532,1181,575],{"class":538},[532,1183,1130],{"class":542},[532,1185,1116],{"class":538},[532,1187,1189],{"class":1188},"sbssI"," 0",[532,1191,1138],{"class":538},[532,1193,1194],{"class":534,"line":741},[532,1195,1196],{"class":538},"  },\n",[532,1198,1199,1202,1204,1207],{"class":534,"line":751},[532,1200,1201],{"class":542},"  vertexShader",[532,1203,1116],{"class":538},[532,1205,1206],{"class":683}," /* glsl */",[532,1208,1209],{"class":538},"`\n",[532,1211,1212],{"class":534,"line":756},[532,1213,1214],{"class":559},"    uniform mat4 textureMatrix;\n",[532,1216,1217],{"class":534,"line":766},[532,1218,1219],{"class":559},"    varying vec4 vUv;\n",[532,1221,1222],{"class":534,"line":786},[532,1223,1224],{"class":559},"    varying vec2 vPos;\n",[532,1226,1227],{"class":534,"line":809},[532,1228,1229],{"class":559},"    void main() {\n",[532,1231,1232],{"class":534,"line":819},[532,1233,1234],{"class":559},"      vUv = textureMatrix * vec4(position, 1.0);\n",[532,1236,1237],{"class":534,"line":828},[532,1238,1239],{"class":559},"      vPos = position.xy;\n",[532,1241,1242],{"class":534,"line":838},[532,1243,1244],{"class":559},"      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[532,1246,1248,1251,1254],{"class":534,"line":1247},23,[532,1249,1250],{"class":559},"    }",[532,1252,1253],{"class":538},"`",[532,1255,1256],{"class":538},",\n",[532,1258,1260,1263,1265,1267],{"class":534,"line":1259},24,[532,1261,1262],{"class":542},"  fragmentShader",[532,1264,1116],{"class":538},[532,1266,1206],{"class":683},[532,1268,1209],{"class":538},[532,1270,1272],{"class":534,"line":1271},25,[532,1273,1274],{"class":559},"    uniform vec3 color;\n",[532,1276,1278],{"class":534,"line":1277},26,[532,1279,1280],{"class":559},"    uniform sampler2D tDiffuse;\n",[532,1282,1284],{"class":534,"line":1283},27,[532,1285,1286],{"class":559},"    uniform float time;\n",[532,1288,1290],{"class":534,"line":1289},28,[532,1291,1219],{"class":559},[532,1293,1295],{"class":534,"line":1294},29,[532,1296,1224],{"class":559},[532,1298,1300],{"class":534,"line":1299},30,[532,1301,1302],{"class":559},"    float blendOverlay(float base, float blend) {\n",[532,1304,1306],{"class":534,"line":1305},31,[532,1307,1308],{"class":559},"      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[532,1310,1312],{"class":534,"line":1311},32,[532,1313,1314],{"class":559},"    }\n",[532,1316,1318],{"class":534,"line":1317},33,[532,1319,1320],{"class":559},"    vec3 blendOverlay(vec3 base, vec3 blend) {\n",[532,1322,1324],{"class":534,"line":1323},34,[532,1325,1326],{"class":559},"      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[532,1328,1330],{"class":534,"line":1329},35,[532,1331,1314],{"class":559},[532,1333,1335],{"class":534,"line":1334},36,[532,1336,1229],{"class":559},[532,1338,1340],{"class":534,"line":1339},37,[532,1341,1342],{"class":559},"      float dist = length(vPos);\n",[532,1344,1346],{"class":534,"line":1345},38,[532,1347,1348],{"class":559},"      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[532,1350,1352],{"class":534,"line":1351},39,[532,1353,1354],{"class":559},"      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[532,1356,1358],{"class":534,"line":1357},40,[532,1359,1360],{"class":559},"      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[532,1362,1364],{"class":534,"line":1363},41,[532,1365,1366],{"class":559},"      vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[532,1368,1370],{"class":534,"line":1369},42,[532,1371,1372],{"class":559},"      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[532,1374,1376],{"class":534,"line":1375},43,[532,1377,1378],{"class":559},"      #include \u003Ctonemapping_fragment>\n",[532,1380,1382],{"class":534,"line":1381},44,[532,1383,1384],{"class":559},"      #include \u003Ccolorspace_fragment>\n",[532,1386,1388,1390,1392],{"class":534,"line":1387},45,[532,1389,1250],{"class":559},[532,1391,1253],{"class":538},[532,1393,1256],{"class":538},[532,1395,1397],{"class":534,"line":1396},46,[532,1398,1399],{"class":538},"}\n",[532,1401,1403],{"class":534,"line":1402},47,[532,1404,611],{"emptyLinePlaceholder":610},[532,1406,1408,1410,1412,1415,1418,1421,1423],{"class":534,"line":1407},48,[532,1409,1081],{"class":546},[532,1411,575],{"class":538},[532,1413,1414],{"class":578}," onBeforeRender ",[532,1416,1417],{"class":538},"}",[532,1419,1420],{"class":538}," =",[532,1422,1042],{"class":1089},[532,1424,1092],{"class":578},[532,1426,1428,1431,1434,1437,1441,1444,1447],{"class":534,"line":1427},49,[532,1429,1430],{"class":1089},"onBeforeRender",[532,1432,1433],{"class":578},"(",[532,1435,1436],{"class":538},"({",[532,1438,1440],{"class":1439},"sHdIc"," elapsed",[532,1442,1443],{"class":538}," })",[532,1445,1446],{"class":546}," =>",[532,1448,1108],{"class":538},[532,1450,1452,1455,1458,1460,1463,1466,1469,1472,1475,1477,1480,1482],{"class":534,"line":1451},50,[532,1453,1454],{"class":546},"  const",[532,1456,1457],{"class":578}," uniforms",[532,1459,1420],{"class":538},[532,1461,1462],{"class":578}," refractorRef",[532,1464,1465],{"class":538},".",[532,1467,1468],{"class":578},"value",[532,1470,1471],{"class":538},"?.",[532,1473,1474],{"class":578},"instance",[532,1476,1471],{"class":538},[532,1478,1479],{"class":578},"material",[532,1481,1471],{"class":538},[532,1483,1484],{"class":578},"uniforms\n",[532,1486,1488,1491,1494,1496,1498,1501,1504,1507,1509,1511,1513,1515,1517,1519,1521],{"class":534,"line":1487},51,[532,1489,1490],{"class":571},"  if",[532,1492,1493],{"class":542}," (",[532,1495,981],{"class":578},[532,1497,1471],{"class":538},[532,1499,1500],{"class":578},"time",[532,1502,1503],{"class":542},") ",[532,1505,1506],{"class":538},"{",[532,1508,1457],{"class":578},[532,1510,1465],{"class":538},[532,1512,1500],{"class":578},[532,1514,1465],{"class":538},[532,1516,1468],{"class":578},[532,1518,1420],{"class":538},[532,1520,1440],{"class":578},[532,1522,1523],{"class":538}," }\n",[532,1525,1527,1529],{"class":534,"line":1526},52,[532,1528,1417],{"class":538},[532,1530,1531],{"class":578},")\n",[532,1533,1535,1537,1539],{"class":534,"line":1534},53,[532,1536,600],{"class":538},[532,1538,543],{"class":542},[532,1540,565],{"class":538},[532,1542,1544],{"class":534,"line":1543},54,[532,1545,611],{"emptyLinePlaceholder":610},[532,1547,1549,1551,1553],{"class":534,"line":1548},55,[532,1550,539],{"class":538},[532,1552,619],{"class":542},[532,1554,565],{"class":538},[532,1556,1558,1560],{"class":534,"line":1557},56,[532,1559,627],{"class":538},[532,1561,1562],{"class":542},"Refractor\n",[532,1564,1566,1569,1571,1573,1576],{"class":534,"line":1565},57,[532,1567,1568],{"class":546},"    ref",[532,1570,553],{"class":538},[532,1572,556],{"class":538},[532,1574,1575],{"class":559},"refractorRef",[532,1577,1578],{"class":538},"\"\n",[532,1580,1582,1584,1586,1588,1590],{"class":534,"line":1581},58,[532,1583,1123],{"class":546},[532,1585,553],{"class":538},[532,1587,556],{"class":538},[532,1589,779],{"class":559},[532,1591,1578],{"class":538},[532,1593,1595,1598,1600,1602,1605],{"class":534,"line":1594},59,[532,1596,1597],{"class":546},"    :shader",[532,1599,553],{"class":538},[532,1601,556],{"class":538},[532,1603,1604],{"class":559},"customShader",[532,1606,1578],{"class":538},[532,1608,1610],{"class":534,"line":1609},60,[532,1611,1612],{"class":538},"  >\n",[532,1614,1616,1618,1620,1622,1624,1626,1628,1630],{"class":534,"line":1615},61,[532,1617,644],{"class":538},[532,1619,792],{"class":542},[532,1621,795],{"class":546},[532,1623,553],{"class":538},[532,1625,556],{"class":538},[532,1627,802],{"class":559},[532,1629,556],{"class":538},[532,1631,662],{"class":538},[532,1633,1635,1637,1639],{"class":534,"line":1634},62,[532,1636,831],{"class":538},[532,1638,445],{"class":542},[532,1640,565],{"class":538},[532,1642,1644,1646,1648],{"class":534,"line":1643},63,[532,1645,600],{"class":538},[532,1647,619],{"class":542},[532,1649,565],{"class":538},[498,1651,1652],{},"The Refractor shader uses the following configuration by default:",[1654,1655,1657],"h3",{"id":1656},"default-shader","Default shader",[523,1659,1663],{"className":1660,"code":1661,"language":1662,"meta":528,"style":528},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const shader = {\n  uniforms: {\n    color: {\n      value: null\n    },\n    tDiffuse: {\n      value: null\n    },\n    textureMatrix: {\n      value: null\n    }\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n\n    void main() {\n      vUv = textureMatrix * vec4( position, 1.0 );\n      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    varying vec4 vUv;\n\n    float blendOverlay( float base, float blend ) {\n      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n    }\n\n    vec3 blendOverlay( vec3 base, vec3 blend ) {\n      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n    }\n\n    void main() {\n      vec4 base = texture2DProj( tDiffuse, vUv );\n      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`\n}\n","js",[502,1664,1665,1676,1684,1692,1702,1707,1715,1723,1727,1735,1743,1747,1751,1761,1765,1769,1773,1777,1782,1787,1795,1805,1809,1813,1817,1821,1826,1831,1835,1839,1844,1849,1853,1857,1861,1866,1871,1875,1879,1883,1889],{"__ignoreMap":528},[532,1666,1667,1669,1672,1674],{"class":534,"line":535},[532,1668,1081],{"class":546},[532,1670,1671],{"class":578}," shader ",[532,1673,553],{"class":538},[532,1675,1108],{"class":538},[532,1677,1678,1680,1682],{"class":534,"line":568},[532,1679,1113],{"class":542},[532,1681,1116],{"class":538},[532,1683,1108],{"class":538},[532,1685,1686,1688,1690],{"class":534,"line":597},[532,1687,1123],{"class":542},[532,1689,1116],{"class":538},[532,1691,1108],{"class":538},[532,1693,1694,1697,1699],{"class":534,"line":607},[532,1695,1696],{"class":542},"      value",[532,1698,1116],{"class":538},[532,1700,1701],{"class":538}," null\n",[532,1703,1704],{"class":534,"line":614},[532,1705,1706],{"class":538},"    },\n",[532,1708,1709,1711,1713],{"class":534,"line":624},[532,1710,1143],{"class":542},[532,1712,1116],{"class":538},[532,1714,1108],{"class":538},[532,1716,1717,1719,1721],{"class":534,"line":641},[532,1718,1696],{"class":542},[532,1720,1116],{"class":538},[532,1722,1701],{"class":538},[532,1724,1725],{"class":534,"line":665},[532,1726,1706],{"class":538},[532,1728,1729,1731,1733],{"class":534,"line":675},[532,1730,1160],{"class":542},[532,1732,1116],{"class":538},[532,1734,1108],{"class":538},[532,1736,1737,1739,1741],{"class":534,"line":680},[532,1738,1696],{"class":542},[532,1740,1116],{"class":538},[532,1742,1701],{"class":538},[532,1744,1745],{"class":534,"line":687},[532,1746,1314],{"class":538},[532,1748,1749],{"class":534,"line":708},[532,1750,1196],{"class":538},[532,1752,1753,1755,1757,1759],{"class":534,"line":719},[532,1754,1201],{"class":542},[532,1756,1116],{"class":538},[532,1758,1206],{"class":683},[532,1760,1209],{"class":538},[532,1762,1763],{"class":534,"line":741},[532,1764,1214],{"class":559},[532,1766,1767],{"class":534,"line":751},[532,1768,1219],{"class":559},[532,1770,1771],{"class":534,"line":756},[532,1772,611],{"emptyLinePlaceholder":610},[532,1774,1775],{"class":534,"line":766},[532,1776,1229],{"class":559},[532,1778,1779],{"class":534,"line":786},[532,1780,1781],{"class":559},"      vUv = textureMatrix * vec4( position, 1.0 );\n",[532,1783,1784],{"class":534,"line":809},[532,1785,1786],{"class":559},"      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[532,1788,1789,1791,1793],{"class":534,"line":819},[532,1790,1250],{"class":559},[532,1792,1253],{"class":538},[532,1794,1256],{"class":538},[532,1796,1797,1799,1801,1803],{"class":534,"line":828},[532,1798,1262],{"class":542},[532,1800,1116],{"class":538},[532,1802,1206],{"class":683},[532,1804,1209],{"class":538},[532,1806,1807],{"class":534,"line":838},[532,1808,1274],{"class":559},[532,1810,1811],{"class":534,"line":1247},[532,1812,1280],{"class":559},[532,1814,1815],{"class":534,"line":1259},[532,1816,1219],{"class":559},[532,1818,1819],{"class":534,"line":1271},[532,1820,611],{"emptyLinePlaceholder":610},[532,1822,1823],{"class":534,"line":1277},[532,1824,1825],{"class":559},"    float blendOverlay( float base, float blend ) {\n",[532,1827,1828],{"class":534,"line":1283},[532,1829,1830],{"class":559},"      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[532,1832,1833],{"class":534,"line":1289},[532,1834,1314],{"class":559},[532,1836,1837],{"class":534,"line":1294},[532,1838,611],{"emptyLinePlaceholder":610},[532,1840,1841],{"class":534,"line":1299},[532,1842,1843],{"class":559},"    vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[532,1845,1846],{"class":534,"line":1305},[532,1847,1848],{"class":559},"      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[532,1850,1851],{"class":534,"line":1311},[532,1852,1314],{"class":559},[532,1854,1855],{"class":534,"line":1317},[532,1856,611],{"emptyLinePlaceholder":610},[532,1858,1859],{"class":534,"line":1323},[532,1860,1229],{"class":559},[532,1862,1863],{"class":534,"line":1329},[532,1864,1865],{"class":559},"      vec4 base = texture2DProj( tDiffuse, vUv );\n",[532,1867,1868],{"class":534,"line":1334},[532,1869,1870],{"class":559},"      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[532,1872,1873],{"class":534,"line":1339},[532,1874,611],{"emptyLinePlaceholder":610},[532,1876,1877],{"class":534,"line":1345},[532,1878,1378],{"class":559},[532,1880,1881],{"class":534,"line":1351},[532,1882,1384],{"class":559},[532,1884,1885,1887],{"class":534,"line":1357},[532,1886,1250],{"class":559},[532,1888,1209],{"class":538},[532,1890,1891],{"class":534,"line":1363},[532,1892,1399],{"class":538},[1894,1895,1896],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":528,"searchDepth":535,"depth":568,"links":1898},[1899,1900,1901],{"id":521,"depth":568,"text":15},{"id":847,"depth":568,"text":848},{"id":974,"depth":568,"text":975,"children":1902},[1903],{"id":1656,"depth":597,"text":1657},"Create real-time refractive (glass-like) surfaces in your scene.","md",null,{},{"title":445,"description":1904},"aTZyJsI5__o7UZbpkupUfyx_02PvriUqnYmBjh-brjE",[1911,1913],{"title":441,"path":442,"stem":443,"description":1912,"children":-1},"Create real-time reflections of your scene.",{"title":449,"path":450,"stem":451,"description":1914,"children":-1},"Render text in 3D using TextGeometry.",1782892882801]