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