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