[{"data":1,"prerenderedAt":1549},["ShallowReactive",2],{"navigation":3,"/api/objects/reflector":478,"/api/objects/reflector-surround":1544},[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,194,288,314,348,398,444],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186,190],{"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},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":187,"path":188,"stem":189},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":191,"path":192,"stem":193},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":195,"path":196,"stem":197,"children":198},"Shapes","/api/shapes","2.api/5.shapes/index",[199,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284],{"title":195,"path":196,"stem":197},{"title":201,"path":202,"stem":203},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":205,"path":206,"stem":207},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":209,"path":210,"stem":211},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":213,"path":214,"stem":215},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":217,"path":218,"stem":219},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":221,"path":222,"stem":223},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":225,"path":226,"stem":227},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":229,"path":230,"stem":231},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":233,"path":234,"stem":235},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":237,"path":238,"stem":239},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":241,"path":242,"stem":243},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":245,"path":246,"stem":247},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":249,"path":250,"stem":251},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":253,"path":254,"stem":255},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":257,"path":258,"stem":259},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":261,"path":262,"stem":263},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":265,"path":266,"stem":267},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":269,"path":270,"stem":271},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":273,"path":274,"stem":275},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":277,"path":278,"stem":279},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":281,"path":282,"stem":283},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":285,"path":286,"stem":287},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":289,"path":290,"stem":291,"children":292},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[293,294,298,302,306,310],{"title":289,"path":290,"stem":291},{"title":295,"path":296,"stem":297},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":299,"path":300,"stem":301},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":303,"path":304,"stem":305},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":307,"path":308,"stem":309},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":311,"path":312,"stem":313},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":315,"path":316,"stem":317,"children":318},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[319,320,324,328,332,336,340,344],{"title":315,"path":316,"stem":317},{"title":321,"path":322,"stem":323},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":325,"path":326,"stem":327},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":329,"path":330,"stem":331},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":333,"path":334,"stem":335},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":337,"path":338,"stem":339},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":341,"path":342,"stem":343},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":345,"path":346,"stem":347},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":349,"path":350,"stem":351,"children":352},"Staging","/api/staging","2.api/8.staging/index",[353,354,358,362,366,370,374,378,382,386,390,394],{"title":349,"path":350,"stem":351},{"title":355,"path":356,"stem":357},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":359,"path":360,"stem":361},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":363,"path":364,"stem":365},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":367,"path":368,"stem":369},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":371,"path":372,"stem":373},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":375,"path":376,"stem":377},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":379,"path":380,"stem":381},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":383,"path":384,"stem":385},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":387,"path":388,"stem":389},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":391,"path":392,"stem":393},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":395,"path":396,"stem":397},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":399,"path":400,"stem":401,"children":402},"Objects","/api/objects","2.api/9.objects/index",[403,404,408,412,416,420,424,428,432,436,440],{"title":399,"path":400,"stem":401},{"title":405,"path":406,"stem":407},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":409,"path":410,"stem":411},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":413,"path":414,"stem":415},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":417,"path":418,"stem":419},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":421,"path":422,"stem":423},"HTML","/api/objects/html","2.api/9.objects/html",{"title":425,"path":426,"stem":427},"Image","/api/objects/image","2.api/9.objects/image",{"title":429,"path":430,"stem":431},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":433,"path":434,"stem":435},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":437,"path":438,"stem":439},"Text","/api/objects/text","2.api/9.objects/text",{"title":441,"path":442,"stem":443},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":445,"path":446,"stem":447,"children":448},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[449,450,454,458,462,466,470,474],{"title":445,"path":446,"stem":447},{"title":451,"path":452,"stem":453},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":455,"path":456,"stem":457},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":459,"path":460,"stem":461},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":463,"path":464,"stem":465},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":467,"path":468,"stem":469},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":471,"path":472,"stem":473},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":475,"path":476,"stem":477},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":479,"title":433,"body":480,"description":1538,"extension":1539,"links":1540,"meta":1541,"navigation":602,"path":434,"seo":1542,"stem":435,"__hash__":1543},"docs/2.api/9.objects/reflector.md",{"type":481,"value":482,"toc":1531},"minimark",[483,489,510,514,803,807,909,918,922,925,1162,1165,1168,1173,1527],[484,485,486],"scene-controls-wrapper",{},[487,488],"objects-reflector",{},[490,491,492,493,497,498,505,506,509],"p",{},"The ",[494,495,496],"code",{},"cientos"," package provides an abstraction of the ",[499,500,504],"a",{"href":501,"rel":502},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[503],"nofollow","Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[494,507,508],{},"Mesh"," so all the default props can be passed as well:",[511,512,15],"h2",{"id":513},"usage",[515,516,521],"pre",{"className":517,"code":518,"language":519,"meta":520,"style":520},"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","",[494,522,523,558,587,597,604,614,631,655,665,670,680,689,705,720,735,741,764,774,784,794],{"__ignoreMap":520},[524,525,528,532,536,540,543,546,549,553,555],"span",{"class":526,"line":527},"line",1,[524,529,531],{"class":530},"sMK4o","\u003C",[524,533,535],{"class":534},"swJcz","script",[524,537,539],{"class":538},"spNyl"," setup",[524,541,542],{"class":538}," lang",[524,544,545],{"class":530},"=",[524,547,548],{"class":530},"\"",[524,550,552],{"class":551},"sfazB","ts",[524,554,548],{"class":530},[524,556,557],{"class":530},">\n",[524,559,561,565,568,572,575,578,581,584],{"class":526,"line":560},2,[524,562,564],{"class":563},"s7zQu","import",[524,566,567],{"class":530}," {",[524,569,571],{"class":570},"sTEyZ"," Reflector",[524,573,574],{"class":530}," }",[524,576,577],{"class":563}," from",[524,579,580],{"class":530}," '",[524,582,583],{"class":551},"@tresjs/cientos",[524,585,586],{"class":530},"'\n",[524,588,590,593,595],{"class":526,"line":589},3,[524,591,592],{"class":530},"\u003C/",[524,594,535],{"class":534},[524,596,557],{"class":530},[524,598,600],{"class":526,"line":599},4,[524,601,603],{"emptyLinePlaceholder":602},true,"\n",[524,605,607,609,612],{"class":526,"line":606},5,[524,608,531],{"class":530},[524,610,611],{"class":534},"template",[524,613,557],{"class":530},[524,615,617,620,623,626,629],{"class":526,"line":616},6,[524,618,619],{"class":530},"  \u003C",[524,621,622],{"class":534},"TresCanvas",[524,624,625],{"class":538}," shadows",[524,627,628],{"class":538}," alpha",[524,630,557],{"class":530},[524,632,634,637,640,643,645,647,650,652],{"class":526,"line":633},7,[524,635,636],{"class":530},"    \u003C",[524,638,639],{"class":534},"TresPerspectiveCamera",[524,641,642],{"class":538}," :position",[524,644,545],{"class":530},[524,646,548],{"class":530},[524,648,649],{"class":551},"[0, 0, 3]",[524,651,548],{"class":530},[524,653,654],{"class":530}," />\n",[524,656,658,660,663],{"class":526,"line":657},8,[524,659,636],{"class":530},[524,661,662],{"class":534},"OrbitControls",[524,664,654],{"class":530},[524,666,668],{"class":526,"line":667},9,[524,669,603],{"emptyLinePlaceholder":602},[524,671,673,675,678],{"class":526,"line":672},10,[524,674,636],{"class":530},[524,676,677],{"class":534},"Suspense",[524,679,557],{"class":530},[524,681,683,686],{"class":526,"line":682},11,[524,684,685],{"class":530},"      \u003C",[524,687,688],{"class":534},"Reflector\n",[524,690,692,695,697,699,702],{"class":526,"line":691},12,[524,693,694],{"class":538},"        :rotation",[524,696,545],{"class":530},[524,698,548],{"class":530},[524,700,701],{"class":551},"[-Math.PI * 0.5, 0, 0]",[524,703,704],{"class":530},"\"\n",[524,706,708,711,713,715,718],{"class":526,"line":707},13,[524,709,710],{"class":538},"        :position-y",[524,712,545],{"class":530},[524,714,548],{"class":530},[524,716,717],{"class":551},"-2",[524,719,704],{"class":530},[524,721,723,726,728,730,733],{"class":526,"line":722},14,[524,724,725],{"class":538},"        color",[524,727,545],{"class":530},[524,729,548],{"class":530},[524,731,732],{"class":551},"#fff",[524,734,704],{"class":530},[524,736,738],{"class":526,"line":737},15,[524,739,740],{"class":530},"      >\n",[524,742,744,747,750,753,755,757,760,762],{"class":526,"line":743},16,[524,745,746],{"class":530},"        \u003C",[524,748,749],{"class":534},"TresCircleGeometry",[524,751,752],{"class":538}," :args",[524,754,545],{"class":530},[524,756,548],{"class":530},[524,758,759],{"class":551},"[10, 10]",[524,761,548],{"class":530},[524,763,654],{"class":530},[524,765,767,770,772],{"class":526,"line":766},17,[524,768,769],{"class":530},"      \u003C/",[524,771,433],{"class":534},[524,773,557],{"class":530},[524,775,777,780,782],{"class":526,"line":776},18,[524,778,779],{"class":530},"    \u003C/",[524,781,677],{"class":534},[524,783,557],{"class":530},[524,785,787,790,792],{"class":526,"line":786},19,[524,788,789],{"class":530},"  \u003C/",[524,791,622],{"class":534},[524,793,557],{"class":530},[524,795,797,799,801],{"class":526,"line":796},20,[524,798,592],{"class":530},[524,800,611],{"class":534},[524,802,557],{"class":530},[511,804,806],{"id":805},"props","Props",[808,809,810,827],"table",{},[811,812,813],"thead",{},[814,815,816,821,824],"tr",{},[817,818,820],"th",{"align":819},"left","Prop",[817,822,823],{"align":819},"Description",[817,825,826],{},"Default",[828,829,830,845,858,870,883,896],"tbody",{},[814,831,832,839,842],{},[833,834,835],"td",{"align":819},[836,837,838],"strong",{},"color",[833,840,841],{"align":819},"The base color that's combine with the mirror effect",[833,843,844],{},"'#333'",[814,846,847,852,855],{},[833,848,849],{"align":819},[836,850,851],{},"textureWidth",[833,853,854],{"align":819},"the width of the texture to render on the mirror",[833,856,857],{},"512",[814,859,860,865,868],{},[833,861,862],{"align":819},[836,863,864],{},"textureHeight",[833,866,867],{"align":819},"the height of the texture to render on the mirror",[833,869,857],{},[814,871,872,877,880],{},[833,873,874],{"align":819},[836,875,876],{},"clipBias",[833,878,879],{"align":819},"to use the clipBias property",[833,881,882],{},"0",[814,884,885,890,893],{},[833,886,887],{"align":819},[836,888,889],{},"multisample",[833,891,892],{"align":819},"how many samplers will be render",[833,894,895],{},"4",[814,897,898,903,906],{},[833,899,900],{"align":819},[836,901,902],{},"shader",[833,904,905],{"align":819},"The texture of the smoke.",[833,907,908],{},"Reflector.ReflectorShader",[910,911,912],"prose-warning",{},[490,913,914,915,917],{},"All the props except the ",[494,916,838],{},", are not reactive",[511,919,921],{"id":920},"custom-mirror-effect","Custom mirror effect",[490,923,924],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[515,926,928],{"className":517,"code":927,"language":519,"meta":520,"style":520},"\u003Cscript setup lang=\"ts\">\nimport vertexShader from 'MyCustomVertexShader.glsl'\n\nconst customShader = {\n  vertexShader\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n    ...\n    \u003CReflector\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    ...\n  \u003C/TresCanvas>\n\u003C/template>\n",[494,929,930,950,967,971,984,989,994,1002,1006,1014,1026,1044,1049,1055,1068,1081,1094,1108,1113,1131,1139,1144,1153],{"__ignoreMap":520},[524,931,932,934,936,938,940,942,944,946,948],{"class":526,"line":527},[524,933,531],{"class":530},[524,935,535],{"class":534},[524,937,539],{"class":538},[524,939,542],{"class":538},[524,941,545],{"class":530},[524,943,548],{"class":530},[524,945,552],{"class":551},[524,947,548],{"class":530},[524,949,557],{"class":530},[524,951,952,954,957,960,962,965],{"class":526,"line":560},[524,953,564],{"class":563},[524,955,956],{"class":570}," vertexShader ",[524,958,959],{"class":563},"from",[524,961,580],{"class":530},[524,963,964],{"class":551},"MyCustomVertexShader.glsl",[524,966,586],{"class":530},[524,968,969],{"class":526,"line":589},[524,970,603],{"emptyLinePlaceholder":602},[524,972,973,976,979,981],{"class":526,"line":599},[524,974,975],{"class":538},"const",[524,977,978],{"class":570}," customShader ",[524,980,545],{"class":530},[524,982,983],{"class":530}," {\n",[524,985,986],{"class":526,"line":606},[524,987,988],{"class":570},"  vertexShader\n",[524,990,991],{"class":526,"line":616},[524,992,993],{"class":530},"}\n",[524,995,996,998,1000],{"class":526,"line":633},[524,997,592],{"class":530},[524,999,535],{"class":534},[524,1001,557],{"class":530},[524,1003,1004],{"class":526,"line":657},[524,1005,603],{"emptyLinePlaceholder":602},[524,1007,1008,1010,1012],{"class":526,"line":667},[524,1009,531],{"class":530},[524,1011,611],{"class":534},[524,1013,557],{"class":530},[524,1015,1016,1018,1020,1022,1024],{"class":526,"line":672},[524,1017,619],{"class":530},[524,1019,622],{"class":534},[524,1021,625],{"class":538},[524,1023,628],{"class":538},[524,1025,557],{"class":530},[524,1027,1028,1030,1032,1034,1036,1038,1040,1042],{"class":526,"line":682},[524,1029,636],{"class":530},[524,1031,639],{"class":534},[524,1033,642],{"class":538},[524,1035,545],{"class":530},[524,1037,548],{"class":530},[524,1039,649],{"class":551},[524,1041,548],{"class":530},[524,1043,654],{"class":530},[524,1045,1046],{"class":526,"line":691},[524,1047,1048],{"class":570},"    ...\n",[524,1050,1051,1053],{"class":526,"line":707},[524,1052,636],{"class":530},[524,1054,688],{"class":534},[524,1056,1057,1060,1062,1064,1066],{"class":526,"line":722},[524,1058,1059],{"class":538},"      :rotation",[524,1061,545],{"class":530},[524,1063,548],{"class":530},[524,1065,701],{"class":551},[524,1067,704],{"class":530},[524,1069,1070,1073,1075,1077,1079],{"class":526,"line":737},[524,1071,1072],{"class":538},"      :position-y",[524,1074,545],{"class":530},[524,1076,548],{"class":530},[524,1078,717],{"class":551},[524,1080,704],{"class":530},[524,1082,1083,1086,1088,1090,1092],{"class":526,"line":743},[524,1084,1085],{"class":538},"      color",[524,1087,545],{"class":530},[524,1089,548],{"class":530},[524,1091,732],{"class":551},[524,1093,704],{"class":530},[524,1095,1096,1099,1101,1103,1106],{"class":526,"line":766},[524,1097,1098],{"class":538},"      :shader",[524,1100,545],{"class":530},[524,1102,548],{"class":530},[524,1104,1105],{"class":551},"customShader",[524,1107,704],{"class":530},[524,1109,1110],{"class":526,"line":776},[524,1111,1112],{"class":530},"    >\n",[524,1114,1115,1117,1119,1121,1123,1125,1127,1129],{"class":526,"line":786},[524,1116,685],{"class":530},[524,1118,749],{"class":534},[524,1120,752],{"class":538},[524,1122,545],{"class":530},[524,1124,548],{"class":530},[524,1126,759],{"class":551},[524,1128,548],{"class":530},[524,1130,654],{"class":530},[524,1132,1133,1135,1137],{"class":526,"line":796},[524,1134,779],{"class":530},[524,1136,433],{"class":534},[524,1138,557],{"class":530},[524,1140,1142],{"class":526,"line":1141},21,[524,1143,1048],{"class":570},[524,1145,1147,1149,1151],{"class":526,"line":1146},22,[524,1148,789],{"class":530},[524,1150,622],{"class":534},[524,1152,557],{"class":530},[524,1154,1156,1158,1160],{"class":526,"line":1155},23,[524,1157,592],{"class":530},[524,1159,611],{"class":534},[524,1161,557],{"class":530},[490,1163,1164],{},"The Reflector shader use the following configuration by default:",[490,1166,1167],{},"You can extend, modify or just play with them",[1169,1170,1172],"h3",{"id":1171},"default-shader","Default shader",[515,1174,1178],{"className":1175,"code":1176,"language":1177,"meta":520,"style":520},"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",[494,1179,1180,1191,1210,1219,1228,1238,1243,1252,1260,1264,1273,1281,1286,1291,1305,1310,1315,1319,1324,1329,1333,1338,1343,1348,1353,1359,1364,1375,1387,1393,1399,1404,1409,1415,1420,1426,1432,1438,1443,1449,1455,1460,1465,1470,1476,1481,1487,1493,1498,1504,1510,1517,1522],{"__ignoreMap":520},[524,1181,1182,1184,1187,1189],{"class":526,"line":527},[524,1183,975],{"class":538},[524,1185,1186],{"class":570}," shader ",[524,1188,545],{"class":530},[524,1190,983],{"class":530},[524,1192,1193,1196,1199,1201,1204,1207],{"class":526,"line":560},[524,1194,1195],{"class":534},"  name",[524,1197,1198],{"class":530},":",[524,1200,580],{"class":530},[524,1202,1203],{"class":551},"ReflectorShader",[524,1205,1206],{"class":530},"'",[524,1208,1209],{"class":530},",\n",[524,1211,1212,1215,1217],{"class":526,"line":589},[524,1213,1214],{"class":534},"  uniforms",[524,1216,1198],{"class":530},[524,1218,983],{"class":530},[524,1220,1221,1224,1226],{"class":526,"line":599},[524,1222,1223],{"class":534},"    color",[524,1225,1198],{"class":530},[524,1227,983],{"class":530},[524,1229,1230,1233,1235],{"class":526,"line":606},[524,1231,1232],{"class":534},"      value",[524,1234,1198],{"class":530},[524,1236,1237],{"class":530}," null\n",[524,1239,1240],{"class":526,"line":616},[524,1241,1242],{"class":530},"    },\n",[524,1244,1245,1248,1250],{"class":526,"line":633},[524,1246,1247],{"class":534},"    tDiffuse",[524,1249,1198],{"class":530},[524,1251,983],{"class":530},[524,1253,1254,1256,1258],{"class":526,"line":657},[524,1255,1232],{"class":534},[524,1257,1198],{"class":530},[524,1259,1237],{"class":530},[524,1261,1262],{"class":526,"line":667},[524,1263,1242],{"class":530},[524,1265,1266,1269,1271],{"class":526,"line":672},[524,1267,1268],{"class":534},"    textureMatrix",[524,1270,1198],{"class":530},[524,1272,983],{"class":530},[524,1274,1275,1277,1279],{"class":526,"line":682},[524,1276,1232],{"class":534},[524,1278,1198],{"class":530},[524,1280,1237],{"class":530},[524,1282,1283],{"class":526,"line":691},[524,1284,1285],{"class":530},"    }\n",[524,1287,1288],{"class":526,"line":707},[524,1289,1290],{"class":530},"  },\n",[524,1292,1293,1296,1298,1302],{"class":526,"line":722},[524,1294,1295],{"class":534},"  vertexShader",[524,1297,1198],{"class":530},[524,1299,1301],{"class":1300},"sHwdD"," /* glsl */",[524,1303,1304],{"class":530},"`\n",[524,1306,1307],{"class":526,"line":737},[524,1308,1309],{"class":551},"  uniform mat4 textureMatrix;\n",[524,1311,1312],{"class":526,"line":743},[524,1313,1314],{"class":551},"  varying vec4 vUv;\n",[524,1316,1317],{"class":526,"line":766},[524,1318,603],{"emptyLinePlaceholder":602},[524,1320,1321],{"class":526,"line":776},[524,1322,1323],{"class":551},"  #include \u003Ccommon>\n",[524,1325,1326],{"class":526,"line":786},[524,1327,1328],{"class":551},"  #include \u003Clogdepthbuf_pars_vertex>\n",[524,1330,1331],{"class":526,"line":796},[524,1332,603],{"emptyLinePlaceholder":602},[524,1334,1335],{"class":526,"line":1141},[524,1336,1337],{"class":551},"  void main() {\n",[524,1339,1340],{"class":526,"line":1146},[524,1341,1342],{"class":551},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[524,1344,1345],{"class":526,"line":1155},[524,1346,1347],{"class":551},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[524,1349,1351],{"class":526,"line":1350},24,[524,1352,603],{"emptyLinePlaceholder":602},[524,1354,1356],{"class":526,"line":1355},25,[524,1357,1358],{"class":551},"    #include \u003Clogdepthbuf_vertex>\n",[524,1360,1362],{"class":526,"line":1361},26,[524,1363,603],{"emptyLinePlaceholder":602},[524,1365,1367,1370,1373],{"class":526,"line":1366},27,[524,1368,1369],{"class":551},"  }",[524,1371,1372],{"class":530},"`",[524,1374,1209],{"class":530},[524,1376,1378,1381,1383,1385],{"class":526,"line":1377},28,[524,1379,1380],{"class":534},"  fragmentShader",[524,1382,1198],{"class":530},[524,1384,1301],{"class":1300},[524,1386,1304],{"class":530},[524,1388,1390],{"class":526,"line":1389},29,[524,1391,1392],{"class":551},"  uniform vec3 color;\n",[524,1394,1396],{"class":526,"line":1395},30,[524,1397,1398],{"class":551},"  uniform sampler2D tDiffuse;\n",[524,1400,1402],{"class":526,"line":1401},31,[524,1403,1314],{"class":551},[524,1405,1407],{"class":526,"line":1406},32,[524,1408,603],{"emptyLinePlaceholder":602},[524,1410,1412],{"class":526,"line":1411},33,[524,1413,1414],{"class":551},"  #include \u003Clogdepthbuf_pars_fragment>\n",[524,1416,1418],{"class":526,"line":1417},34,[524,1419,603],{"emptyLinePlaceholder":602},[524,1421,1423],{"class":526,"line":1422},35,[524,1424,1425],{"class":551},"  float blendOverlay( float base, float blend ) {\n",[524,1427,1429],{"class":526,"line":1428},36,[524,1430,1431],{"class":551},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[524,1433,1435],{"class":526,"line":1434},37,[524,1436,1437],{"class":551},"  }\n",[524,1439,1441],{"class":526,"line":1440},38,[524,1442,603],{"emptyLinePlaceholder":602},[524,1444,1446],{"class":526,"line":1445},39,[524,1447,1448],{"class":551},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[524,1450,1452],{"class":526,"line":1451},40,[524,1453,1454],{"class":551},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[524,1456,1458],{"class":526,"line":1457},41,[524,1459,1437],{"class":551},[524,1461,1463],{"class":526,"line":1462},42,[524,1464,603],{"emptyLinePlaceholder":602},[524,1466,1468],{"class":526,"line":1467},43,[524,1469,1337],{"class":551},[524,1471,1473],{"class":526,"line":1472},44,[524,1474,1475],{"class":551},"    #include \u003Clogdepthbuf_fragment>\n",[524,1477,1479],{"class":526,"line":1478},45,[524,1480,603],{"emptyLinePlaceholder":602},[524,1482,1484],{"class":526,"line":1483},46,[524,1485,1486],{"class":551},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[524,1488,1490],{"class":526,"line":1489},47,[524,1491,1492],{"class":551},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[524,1494,1496],{"class":526,"line":1495},48,[524,1497,603],{"emptyLinePlaceholder":602},[524,1499,1501],{"class":526,"line":1500},49,[524,1502,1503],{"class":551},"    #include \u003Ctonemapping_fragment>\n",[524,1505,1507],{"class":526,"line":1506},50,[524,1508,1509],{"class":551},"    #include \u003Ccolorspace_fragment>\n",[524,1511,1513,1515],{"class":526,"line":1512},51,[524,1514,1369],{"class":551},[524,1516,1304],{"class":530},[524,1518,1520],{"class":526,"line":1519},52,[524,1521,603],{"emptyLinePlaceholder":602},[524,1523,1525],{"class":526,"line":1524},53,[524,1526,993],{"class":530},[1528,1529,1530],"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 .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}",{"title":520,"searchDepth":527,"depth":560,"links":1532},[1533,1534,1535],{"id":513,"depth":560,"text":15},{"id":805,"depth":560,"text":806},{"id":920,"depth":560,"text":921,"children":1536},[1537],{"id":1171,"depth":589,"text":1172},"Create real-time reflections of your scene.","md",null,{},{"title":433,"description":1538},"fTyCkcleBhTAlUD12viac9Ksqji4-Me4YbgFoLsJIZY",[1545,1547],{"title":429,"path":430,"stem":431,"description":1546,"children":-1},"Create organic blob-like shapes using metaballs.",{"title":437,"path":438,"stem":439,"description":1548,"children":-1},"Render high-quality SDF text from real font files using troika-three-text.",1782052434946]