[{"data":1,"prerenderedAt":1988},["ShallowReactive",2],{"navigation":3,"/api/objects/reflector":498,"/api/objects/reflector-surround":1983},[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":453,"body":500,"description":1977,"extension":1978,"links":1979,"meta":1980,"navigation":622,"path":454,"seo":1981,"stem":455,"__hash__":1982},"docs/2.api/9.objects/reflector.md",{"type":501,"value":502,"toc":1970},"minimark",[503,509,530,534,823,827,929,938,942,957,1645,1648,1651,1656,1966],[504,505,506],"scene-controls-wrapper",{},[507,508],"objects-reflector",{},[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/Reflector.js",[523],"nofollow","Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  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 { 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","",[514,542,543,578,607,617,624,634,651,675,685,690,700,709,725,740,755,761,784,794,804,814],{"__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"," Reflector",[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, 0, 3]",[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,695,698],{"class":546,"line":692},10,[544,694,656],{"class":550},[544,696,697],{"class":554},"Suspense",[544,699,577],{"class":550},[544,701,703,706],{"class":546,"line":702},11,[544,704,705],{"class":550},"      \u003C",[544,707,708],{"class":554},"Reflector\n",[544,710,712,715,717,719,722],{"class":546,"line":711},12,[544,713,714],{"class":558},"        :rotation",[544,716,565],{"class":550},[544,718,568],{"class":550},[544,720,721],{"class":571},"[-Math.PI * 0.5, 0, 0]",[544,723,724],{"class":550},"\"\n",[544,726,728,731,733,735,738],{"class":546,"line":727},13,[544,729,730],{"class":558},"        :position-y",[544,732,565],{"class":550},[544,734,568],{"class":550},[544,736,737],{"class":571},"-2",[544,739,724],{"class":550},[544,741,743,746,748,750,753],{"class":546,"line":742},14,[544,744,745],{"class":558},"        color",[544,747,565],{"class":550},[544,749,568],{"class":550},[544,751,752],{"class":571},"#fff",[544,754,724],{"class":550},[544,756,758],{"class":546,"line":757},15,[544,759,760],{"class":550},"      >\n",[544,762,764,767,770,773,775,777,780,782],{"class":546,"line":763},16,[544,765,766],{"class":550},"        \u003C",[544,768,769],{"class":554},"TresCircleGeometry",[544,771,772],{"class":558}," :args",[544,774,565],{"class":550},[544,776,568],{"class":550},[544,778,779],{"class":571},"[10, 10]",[544,781,568],{"class":550},[544,783,674],{"class":550},[544,785,787,790,792],{"class":546,"line":786},17,[544,788,789],{"class":550},"      \u003C/",[544,791,453],{"class":554},[544,793,577],{"class":550},[544,795,797,800,802],{"class":546,"line":796},18,[544,798,799],{"class":550},"    \u003C/",[544,801,697],{"class":554},[544,803,577],{"class":550},[544,805,807,810,812],{"class":546,"line":806},19,[544,808,809],{"class":550},"  \u003C/",[544,811,642],{"class":554},[544,813,577],{"class":550},[544,815,817,819,821],{"class":546,"line":816},20,[544,818,612],{"class":550},[544,820,631],{"class":554},[544,822,577],{"class":550},[531,824,826],{"id":825},"props","Props",[828,829,830,847],"table",{},[831,832,833],"thead",{},[834,835,836,841,844],"tr",{},[837,838,840],"th",{"align":839},"left","Prop",[837,842,843],{"align":839},"Description",[837,845,846],{},"Default",[848,849,850,865,878,890,903,916],"tbody",{},[834,851,852,859,862],{},[853,854,855],"td",{"align":839},[856,857,858],"strong",{},"color",[853,860,861],{"align":839},"The base color that's combine with the mirror effect",[853,863,864],{},"'#333'",[834,866,867,872,875],{},[853,868,869],{"align":839},[856,870,871],{},"textureWidth",[853,873,874],{"align":839},"the width of the texture to render on the mirror",[853,876,877],{},"512",[834,879,880,885,888],{},[853,881,882],{"align":839},[856,883,884],{},"textureHeight",[853,886,887],{"align":839},"the height of the texture to render on the mirror",[853,889,877],{},[834,891,892,897,900],{},[853,893,894],{"align":839},[856,895,896],{},"clipBias",[853,898,899],{"align":839},"to use the clipBias property",[853,901,902],{},"0",[834,904,905,910,913],{},[853,906,907],{"align":839},[856,908,909],{},"multisample",[853,911,912],{"align":839},"how many samplers will be render",[853,914,915],{},"4",[834,917,918,923,926],{},[853,919,920],{"align":839},[856,921,922],{},"shader",[853,924,925],{"align":839},"The texture of the smoke.",[853,927,928],{},"Reflector.ReflectorShader",[930,931,932],"prose-warning",{},[510,933,934,935,937],{},"All the props except the ",[514,936,858],{},", are not reactive",[531,939,941],{"id":940},"custom-mirror-effect","Custom mirror effect",[510,943,944,945,948,949,952,953,956],{},"You can provide your own shader by passing a full shader object with ",[514,946,947],{},"uniforms",", ",[514,950,951],{},"vertexShader",", and ",[514,954,955],{},"fragmentShader",". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[535,958,960],{"className":537,"code":959,"language":539,"meta":540,"style":540},"\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",[514,961,962,982,1000,1020,1039,1043,1059,1063,1075,1085,1105,1122,1139,1158,1163,1177,1182,1187,1192,1197,1202,1208,1214,1226,1238,1244,1250,1256,1261,1266,1272,1278,1284,1290,1296,1301,1306,1312,1318,1324,1330,1336,1342,1348,1354,1363,1369,1374,1394,1418,1454,1493,1501,1510,1515,1524,1531,1546,1560,1574,1587,1602,1608,1627,1636],{"__ignoreMap":540},[544,963,964,966,968,970,972,974,976,978,980],{"class":546,"line":547},[544,965,551],{"class":550},[544,967,555],{"class":554},[544,969,559],{"class":558},[544,971,562],{"class":558},[544,973,565],{"class":550},[544,975,568],{"class":550},[544,977,572],{"class":571},[544,979,568],{"class":550},[544,981,577],{"class":550},[544,983,984,986,988,990,992,994,996,998],{"class":546,"line":580},[544,985,584],{"class":583},[544,987,587],{"class":550},[544,989,591],{"class":590},[544,991,594],{"class":550},[544,993,597],{"class":583},[544,995,600],{"class":550},[544,997,603],{"class":571},[544,999,606],{"class":550},[544,1001,1002,1004,1006,1009,1011,1013,1015,1018],{"class":546,"line":609},[544,1003,584],{"class":583},[544,1005,587],{"class":550},[544,1007,1008],{"class":590}," useLoop",[544,1010,594],{"class":550},[544,1012,597],{"class":583},[544,1014,600],{"class":550},[544,1016,1017],{"class":571},"@tresjs/core",[544,1019,606],{"class":550},[544,1021,1022,1024,1026,1029,1031,1033,1035,1037],{"class":546,"line":619},[544,1023,584],{"class":583},[544,1025,587],{"class":550},[544,1027,1028],{"class":590}," shallowRef",[544,1030,594],{"class":550},[544,1032,597],{"class":583},[544,1034,600],{"class":550},[544,1036,539],{"class":571},[544,1038,606],{"class":550},[544,1040,1041],{"class":546,"line":626},[544,1042,623],{"emptyLinePlaceholder":622},[544,1044,1045,1048,1051,1053,1056],{"class":546,"line":636},[544,1046,1047],{"class":558},"const",[544,1049,1050],{"class":590}," reflectorRef ",[544,1052,565],{"class":550},[544,1054,1028],{"class":1055},"s2Zo4",[544,1057,1058],{"class":590},"()\n",[544,1060,1061],{"class":546,"line":653},[544,1062,623],{"emptyLinePlaceholder":622},[544,1064,1065,1067,1070,1072],{"class":546,"line":677},[544,1066,1047],{"class":558},[544,1068,1069],{"class":590}," customShader ",[544,1071,565],{"class":550},[544,1073,1074],{"class":550}," {\n",[544,1076,1077,1080,1083],{"class":546,"line":687},[544,1078,1079],{"class":554},"  uniforms",[544,1081,1082],{"class":550},":",[544,1084,1074],{"class":550},[544,1086,1087,1090,1092,1094,1097,1099,1102],{"class":546,"line":692},[544,1088,1089],{"class":554},"    color",[544,1091,1082],{"class":550},[544,1093,587],{"class":550},[544,1095,1096],{"class":554}," value",[544,1098,1082],{"class":550},[544,1100,1101],{"class":550}," null",[544,1103,1104],{"class":550}," },\n",[544,1106,1107,1110,1112,1114,1116,1118,1120],{"class":546,"line":702},[544,1108,1109],{"class":554},"    tDiffuse",[544,1111,1082],{"class":550},[544,1113,587],{"class":550},[544,1115,1096],{"class":554},[544,1117,1082],{"class":550},[544,1119,1101],{"class":550},[544,1121,1104],{"class":550},[544,1123,1124,1127,1129,1131,1133,1135,1137],{"class":546,"line":711},[544,1125,1126],{"class":554},"    textureMatrix",[544,1128,1082],{"class":550},[544,1130,587],{"class":550},[544,1132,1096],{"class":554},[544,1134,1082],{"class":550},[544,1136,1101],{"class":550},[544,1138,1104],{"class":550},[544,1140,1141,1144,1146,1148,1150,1152,1156],{"class":546,"line":727},[544,1142,1143],{"class":554},"    time",[544,1145,1082],{"class":550},[544,1147,587],{"class":550},[544,1149,1096],{"class":554},[544,1151,1082],{"class":550},[544,1153,1155],{"class":1154},"sbssI"," 0",[544,1157,1104],{"class":550},[544,1159,1160],{"class":546,"line":742},[544,1161,1162],{"class":550},"  },\n",[544,1164,1165,1168,1170,1174],{"class":546,"line":757},[544,1166,1167],{"class":554},"  vertexShader",[544,1169,1082],{"class":550},[544,1171,1173],{"class":1172},"sHwdD"," /* glsl */",[544,1175,1176],{"class":550},"`\n",[544,1178,1179],{"class":546,"line":763},[544,1180,1181],{"class":571},"    uniform mat4 textureMatrix;\n",[544,1183,1184],{"class":546,"line":786},[544,1185,1186],{"class":571},"    varying vec4 vUv;\n",[544,1188,1189],{"class":546,"line":796},[544,1190,1191],{"class":571},"    varying vec2 vPos;\n",[544,1193,1194],{"class":546,"line":806},[544,1195,1196],{"class":571},"    void main() {\n",[544,1198,1199],{"class":546,"line":816},[544,1200,1201],{"class":571},"      vUv = textureMatrix * vec4(position, 1.0);\n",[544,1203,1205],{"class":546,"line":1204},21,[544,1206,1207],{"class":571},"      vPos = position.xy;\n",[544,1209,1211],{"class":546,"line":1210},22,[544,1212,1213],{"class":571},"      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[544,1215,1217,1220,1223],{"class":546,"line":1216},23,[544,1218,1219],{"class":571},"    }",[544,1221,1222],{"class":550},"`",[544,1224,1225],{"class":550},",\n",[544,1227,1229,1232,1234,1236],{"class":546,"line":1228},24,[544,1230,1231],{"class":554},"  fragmentShader",[544,1233,1082],{"class":550},[544,1235,1173],{"class":1172},[544,1237,1176],{"class":550},[544,1239,1241],{"class":546,"line":1240},25,[544,1242,1243],{"class":571},"    uniform vec3 color;\n",[544,1245,1247],{"class":546,"line":1246},26,[544,1248,1249],{"class":571},"    uniform sampler2D tDiffuse;\n",[544,1251,1253],{"class":546,"line":1252},27,[544,1254,1255],{"class":571},"    uniform float time;\n",[544,1257,1259],{"class":546,"line":1258},28,[544,1260,1186],{"class":571},[544,1262,1264],{"class":546,"line":1263},29,[544,1265,1191],{"class":571},[544,1267,1269],{"class":546,"line":1268},30,[544,1270,1271],{"class":571},"    float blendOverlay(float base, float blend) {\n",[544,1273,1275],{"class":546,"line":1274},31,[544,1276,1277],{"class":571},"      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[544,1279,1281],{"class":546,"line":1280},32,[544,1282,1283],{"class":571},"    }\n",[544,1285,1287],{"class":546,"line":1286},33,[544,1288,1289],{"class":571},"    vec3 blendOverlay(vec3 base, vec3 blend) {\n",[544,1291,1293],{"class":546,"line":1292},34,[544,1294,1295],{"class":571},"      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[544,1297,1299],{"class":546,"line":1298},35,[544,1300,1283],{"class":571},[544,1302,1304],{"class":546,"line":1303},36,[544,1305,1196],{"class":571},[544,1307,1309],{"class":546,"line":1308},37,[544,1310,1311],{"class":571},"      float dist = length(vPos);\n",[544,1313,1315],{"class":546,"line":1314},38,[544,1316,1317],{"class":571},"      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[544,1319,1321],{"class":546,"line":1320},39,[544,1322,1323],{"class":571},"      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[544,1325,1327],{"class":546,"line":1326},40,[544,1328,1329],{"class":571},"      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[544,1331,1333],{"class":546,"line":1332},41,[544,1334,1335],{"class":571},"      vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[544,1337,1339],{"class":546,"line":1338},42,[544,1340,1341],{"class":571},"      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[544,1343,1345],{"class":546,"line":1344},43,[544,1346,1347],{"class":571},"      #include \u003Ctonemapping_fragment>\n",[544,1349,1351],{"class":546,"line":1350},44,[544,1352,1353],{"class":571},"      #include \u003Ccolorspace_fragment>\n",[544,1355,1357,1359,1361],{"class":546,"line":1356},45,[544,1358,1219],{"class":571},[544,1360,1222],{"class":550},[544,1362,1225],{"class":550},[544,1364,1366],{"class":546,"line":1365},46,[544,1367,1368],{"class":550},"}\n",[544,1370,1372],{"class":546,"line":1371},47,[544,1373,623],{"emptyLinePlaceholder":622},[544,1375,1377,1379,1381,1384,1387,1390,1392],{"class":546,"line":1376},48,[544,1378,1047],{"class":558},[544,1380,587],{"class":550},[544,1382,1383],{"class":590}," onBeforeRender ",[544,1385,1386],{"class":550},"}",[544,1388,1389],{"class":550}," =",[544,1391,1008],{"class":1055},[544,1393,1058],{"class":590},[544,1395,1397,1400,1403,1406,1410,1413,1416],{"class":546,"line":1396},49,[544,1398,1399],{"class":1055},"onBeforeRender",[544,1401,1402],{"class":590},"(",[544,1404,1405],{"class":550},"({",[544,1407,1409],{"class":1408},"sHdIc"," elapsed",[544,1411,1412],{"class":550}," })",[544,1414,1415],{"class":558}," =>",[544,1417,1074],{"class":550},[544,1419,1421,1424,1427,1429,1432,1435,1438,1441,1444,1446,1449,1451],{"class":546,"line":1420},50,[544,1422,1423],{"class":558},"  const",[544,1425,1426],{"class":590}," uniforms",[544,1428,1389],{"class":550},[544,1430,1431],{"class":590}," reflectorRef",[544,1433,1434],{"class":550},".",[544,1436,1437],{"class":590},"value",[544,1439,1440],{"class":550},"?.",[544,1442,1443],{"class":590},"instance",[544,1445,1440],{"class":550},[544,1447,1448],{"class":590},"material",[544,1450,1440],{"class":550},[544,1452,1453],{"class":590},"uniforms\n",[544,1455,1457,1460,1463,1465,1467,1470,1473,1476,1478,1480,1482,1484,1486,1488,1490],{"class":546,"line":1456},51,[544,1458,1459],{"class":583},"  if",[544,1461,1462],{"class":554}," (",[544,1464,947],{"class":590},[544,1466,1440],{"class":550},[544,1468,1469],{"class":590},"time",[544,1471,1472],{"class":554},") ",[544,1474,1475],{"class":550},"{",[544,1477,1426],{"class":590},[544,1479,1434],{"class":550},[544,1481,1469],{"class":590},[544,1483,1434],{"class":550},[544,1485,1437],{"class":590},[544,1487,1389],{"class":550},[544,1489,1409],{"class":590},[544,1491,1492],{"class":550}," }\n",[544,1494,1496,1498],{"class":546,"line":1495},52,[544,1497,1386],{"class":550},[544,1499,1500],{"class":590},")\n",[544,1502,1504,1506,1508],{"class":546,"line":1503},53,[544,1505,612],{"class":550},[544,1507,555],{"class":554},[544,1509,577],{"class":550},[544,1511,1513],{"class":546,"line":1512},54,[544,1514,623],{"emptyLinePlaceholder":622},[544,1516,1518,1520,1522],{"class":546,"line":1517},55,[544,1519,551],{"class":550},[544,1521,631],{"class":554},[544,1523,577],{"class":550},[544,1525,1527,1529],{"class":546,"line":1526},56,[544,1528,639],{"class":550},[544,1530,708],{"class":554},[544,1532,1534,1537,1539,1541,1544],{"class":546,"line":1533},57,[544,1535,1536],{"class":558},"    ref",[544,1538,565],{"class":550},[544,1540,568],{"class":550},[544,1542,1543],{"class":571},"reflectorRef",[544,1545,724],{"class":550},[544,1547,1549,1552,1554,1556,1558],{"class":546,"line":1548},58,[544,1550,1551],{"class":558},"    :rotation",[544,1553,565],{"class":550},[544,1555,568],{"class":550},[544,1557,721],{"class":571},[544,1559,724],{"class":550},[544,1561,1563,1566,1568,1570,1572],{"class":546,"line":1562},59,[544,1564,1565],{"class":558},"    :position-y",[544,1567,565],{"class":550},[544,1569,568],{"class":550},[544,1571,737],{"class":571},[544,1573,724],{"class":550},[544,1575,1577,1579,1581,1583,1585],{"class":546,"line":1576},60,[544,1578,1089],{"class":558},[544,1580,565],{"class":550},[544,1582,568],{"class":550},[544,1584,752],{"class":571},[544,1586,724],{"class":550},[544,1588,1590,1593,1595,1597,1600],{"class":546,"line":1589},61,[544,1591,1592],{"class":558},"    :shader",[544,1594,565],{"class":550},[544,1596,568],{"class":550},[544,1598,1599],{"class":571},"customShader",[544,1601,724],{"class":550},[544,1603,1605],{"class":546,"line":1604},62,[544,1606,1607],{"class":550},"  >\n",[544,1609,1611,1613,1615,1617,1619,1621,1623,1625],{"class":546,"line":1610},63,[544,1612,656],{"class":550},[544,1614,769],{"class":554},[544,1616,772],{"class":558},[544,1618,565],{"class":550},[544,1620,568],{"class":550},[544,1622,779],{"class":571},[544,1624,568],{"class":550},[544,1626,674],{"class":550},[544,1628,1630,1632,1634],{"class":546,"line":1629},64,[544,1631,809],{"class":550},[544,1633,453],{"class":554},[544,1635,577],{"class":550},[544,1637,1639,1641,1643],{"class":546,"line":1638},65,[544,1640,612],{"class":550},[544,1642,631],{"class":554},[544,1644,577],{"class":550},[510,1646,1647],{},"The Reflector shader use the following configuration by default:",[510,1649,1650],{},"You can extend, modify or just play with them",[1652,1653,1655],"h3",{"id":1654},"default-shader","Default shader",[535,1657,1661],{"className":1658,"code":1659,"language":1660,"meta":540,"style":540},"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",[514,1662,1663,1674,1691,1699,1707,1717,1722,1730,1738,1742,1750,1758,1762,1766,1776,1781,1786,1790,1795,1800,1804,1809,1814,1819,1823,1828,1832,1841,1851,1856,1861,1865,1869,1874,1878,1883,1888,1893,1897,1902,1907,1911,1915,1919,1924,1928,1933,1938,1942,1947,1952,1958,1962],{"__ignoreMap":540},[544,1664,1665,1667,1670,1672],{"class":546,"line":547},[544,1666,1047],{"class":558},[544,1668,1669],{"class":590}," shader ",[544,1671,565],{"class":550},[544,1673,1074],{"class":550},[544,1675,1676,1679,1681,1683,1686,1689],{"class":546,"line":580},[544,1677,1678],{"class":554},"  name",[544,1680,1082],{"class":550},[544,1682,600],{"class":550},[544,1684,1685],{"class":571},"ReflectorShader",[544,1687,1688],{"class":550},"'",[544,1690,1225],{"class":550},[544,1692,1693,1695,1697],{"class":546,"line":609},[544,1694,1079],{"class":554},[544,1696,1082],{"class":550},[544,1698,1074],{"class":550},[544,1700,1701,1703,1705],{"class":546,"line":619},[544,1702,1089],{"class":554},[544,1704,1082],{"class":550},[544,1706,1074],{"class":550},[544,1708,1709,1712,1714],{"class":546,"line":626},[544,1710,1711],{"class":554},"      value",[544,1713,1082],{"class":550},[544,1715,1716],{"class":550}," null\n",[544,1718,1719],{"class":546,"line":636},[544,1720,1721],{"class":550},"    },\n",[544,1723,1724,1726,1728],{"class":546,"line":653},[544,1725,1109],{"class":554},[544,1727,1082],{"class":550},[544,1729,1074],{"class":550},[544,1731,1732,1734,1736],{"class":546,"line":677},[544,1733,1711],{"class":554},[544,1735,1082],{"class":550},[544,1737,1716],{"class":550},[544,1739,1740],{"class":546,"line":687},[544,1741,1721],{"class":550},[544,1743,1744,1746,1748],{"class":546,"line":692},[544,1745,1126],{"class":554},[544,1747,1082],{"class":550},[544,1749,1074],{"class":550},[544,1751,1752,1754,1756],{"class":546,"line":702},[544,1753,1711],{"class":554},[544,1755,1082],{"class":550},[544,1757,1716],{"class":550},[544,1759,1760],{"class":546,"line":711},[544,1761,1283],{"class":550},[544,1763,1764],{"class":546,"line":727},[544,1765,1162],{"class":550},[544,1767,1768,1770,1772,1774],{"class":546,"line":742},[544,1769,1167],{"class":554},[544,1771,1082],{"class":550},[544,1773,1173],{"class":1172},[544,1775,1176],{"class":550},[544,1777,1778],{"class":546,"line":757},[544,1779,1780],{"class":571},"  uniform mat4 textureMatrix;\n",[544,1782,1783],{"class":546,"line":763},[544,1784,1785],{"class":571},"  varying vec4 vUv;\n",[544,1787,1788],{"class":546,"line":786},[544,1789,623],{"emptyLinePlaceholder":622},[544,1791,1792],{"class":546,"line":796},[544,1793,1794],{"class":571},"  #include \u003Ccommon>\n",[544,1796,1797],{"class":546,"line":806},[544,1798,1799],{"class":571},"  #include \u003Clogdepthbuf_pars_vertex>\n",[544,1801,1802],{"class":546,"line":816},[544,1803,623],{"emptyLinePlaceholder":622},[544,1805,1806],{"class":546,"line":1204},[544,1807,1808],{"class":571},"  void main() {\n",[544,1810,1811],{"class":546,"line":1210},[544,1812,1813],{"class":571},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[544,1815,1816],{"class":546,"line":1216},[544,1817,1818],{"class":571},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[544,1820,1821],{"class":546,"line":1228},[544,1822,623],{"emptyLinePlaceholder":622},[544,1824,1825],{"class":546,"line":1240},[544,1826,1827],{"class":571},"    #include \u003Clogdepthbuf_vertex>\n",[544,1829,1830],{"class":546,"line":1246},[544,1831,623],{"emptyLinePlaceholder":622},[544,1833,1834,1837,1839],{"class":546,"line":1252},[544,1835,1836],{"class":571},"  }",[544,1838,1222],{"class":550},[544,1840,1225],{"class":550},[544,1842,1843,1845,1847,1849],{"class":546,"line":1258},[544,1844,1231],{"class":554},[544,1846,1082],{"class":550},[544,1848,1173],{"class":1172},[544,1850,1176],{"class":550},[544,1852,1853],{"class":546,"line":1263},[544,1854,1855],{"class":571},"  uniform vec3 color;\n",[544,1857,1858],{"class":546,"line":1268},[544,1859,1860],{"class":571},"  uniform sampler2D tDiffuse;\n",[544,1862,1863],{"class":546,"line":1274},[544,1864,1785],{"class":571},[544,1866,1867],{"class":546,"line":1280},[544,1868,623],{"emptyLinePlaceholder":622},[544,1870,1871],{"class":546,"line":1286},[544,1872,1873],{"class":571},"  #include \u003Clogdepthbuf_pars_fragment>\n",[544,1875,1876],{"class":546,"line":1292},[544,1877,623],{"emptyLinePlaceholder":622},[544,1879,1880],{"class":546,"line":1298},[544,1881,1882],{"class":571},"  float blendOverlay( float base, float blend ) {\n",[544,1884,1885],{"class":546,"line":1303},[544,1886,1887],{"class":571},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[544,1889,1890],{"class":546,"line":1308},[544,1891,1892],{"class":571},"  }\n",[544,1894,1895],{"class":546,"line":1314},[544,1896,623],{"emptyLinePlaceholder":622},[544,1898,1899],{"class":546,"line":1320},[544,1900,1901],{"class":571},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[544,1903,1904],{"class":546,"line":1326},[544,1905,1906],{"class":571},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[544,1908,1909],{"class":546,"line":1332},[544,1910,1892],{"class":571},[544,1912,1913],{"class":546,"line":1338},[544,1914,623],{"emptyLinePlaceholder":622},[544,1916,1917],{"class":546,"line":1344},[544,1918,1808],{"class":571},[544,1920,1921],{"class":546,"line":1350},[544,1922,1923],{"class":571},"    #include \u003Clogdepthbuf_fragment>\n",[544,1925,1926],{"class":546,"line":1356},[544,1927,623],{"emptyLinePlaceholder":622},[544,1929,1930],{"class":546,"line":1365},[544,1931,1932],{"class":571},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[544,1934,1935],{"class":546,"line":1371},[544,1936,1937],{"class":571},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[544,1939,1940],{"class":546,"line":1376},[544,1941,623],{"emptyLinePlaceholder":622},[544,1943,1944],{"class":546,"line":1396},[544,1945,1946],{"class":571},"    #include \u003Ctonemapping_fragment>\n",[544,1948,1949],{"class":546,"line":1420},[544,1950,1951],{"class":571},"    #include \u003Ccolorspace_fragment>\n",[544,1953,1954,1956],{"class":546,"line":1456},[544,1955,1836],{"class":571},[544,1957,1176],{"class":550},[544,1959,1960],{"class":546,"line":1495},[544,1961,623],{"emptyLinePlaceholder":622},[544,1963,1964],{"class":546,"line":1503},[544,1965,1368],{"class":550},[1967,1968,1969],"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 .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 .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":540,"searchDepth":547,"depth":580,"links":1971},[1972,1973,1974],{"id":533,"depth":580,"text":15},{"id":825,"depth":580,"text":826},{"id":940,"depth":580,"text":941,"children":1975},[1976],{"id":1654,"depth":609,"text":1655},"Create real-time reflections of your scene.","md",null,{},{"title":453,"description":1977},"NJEaFmV8_JnwGN0OZhU-3XOYAdVvh14PeqjaOc-DkDE",[1984,1986],{"title":449,"path":450,"stem":451,"description":1985,"children":-1},"Create organic blob-like shapes using metaballs.",{"title":457,"path":458,"stem":459,"description":1987,"children":-1},"Create real-time refractive (glass-like) surfaces in your scene.",1789116513486]