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