[{"data":1,"prerenderedAt":1775},["ShallowReactive",2],{"navigation":3,"/api/objects/fbo":478,"/api/objects/fbo-surround":1770},[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":413,"body":480,"description":1764,"extension":1765,"links":1766,"meta":1767,"navigation":660,"path":414,"seo":1768,"stem":415,"__hash__":1769},"docs/2.api/9.objects/fbo.md",{"type":481,"value":482,"toc":1756},"minimark",[483,489,493,501,505,1252,1256,1391,1395,1397,1403,1412,1416,1664,1668,1752],[484,485,486],"scene-wrapper",{},[487,488],"objects-fbo",{},[490,491,492],"p",{},"An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.",[490,494,495,496,500],{},"Cientos provides an ",[497,498,499],"code",{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[502,503,15],"h2",{"id":504},"usage",[506,507,518],"pre",{"className":508,"code":509,"highlights":510,"language":516,"meta":517,"style":517},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs/cientos'\nimport type { TresObject } from '@tresjs/core'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst fboRef = shallowRef\u003CInstanceType\u003Ctypeof Fbo> | null>(null)\nconst torusRef = shallowRef\u003CTresObject | null>(null)\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n  if (!torusRef.value) { return }\n  torusRef.value.rotation.x = elapsed * 0.745\n  torusRef.value.rotation.y = elapsed * 0.361\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n    \u003CFbo\n      ref=\"fboRef\"\n      :depth=\"false\"\n      :settings=\"{ samples: 1 }\"\n    />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n      \u003CTresMeshBasicMaterial\n        :color=\"0xFFFFFF\"\n        :map=\"fboRef?.instance?.texture ?? null\"\n      />\n    \u003C/TresMesh>\n\n    \u003CTresMesh\n      ref=\"torusRef\"\n      :position=\"[3, 0, 0]\"\n    >\n      \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[511,512,513,514,515],2,23,24,25,26,"vue","",[497,519,520,555,591,615,635,655,662,707,736,741,776,809,841,868,874,884,889,899,934,958,968,973,995,1003,1019,1034,1049,1055,1065,1087,1092,1100,1115,1130,1136,1146,1151,1159,1172,1187,1193,1214,1224,1233,1243],{"__ignoreMap":517},[521,522,525,529,533,537,540,543,546,550,552],"span",{"class":523,"line":524},"line",1,[521,526,528],{"class":527},"sMK4o","\u003C",[521,530,532],{"class":531},"swJcz","script",[521,534,536],{"class":535},"spNyl"," setup",[521,538,539],{"class":535}," lang",[521,541,542],{"class":527},"=",[521,544,545],{"class":527},"\"",[521,547,549],{"class":548},"sfazB","ts",[521,551,545],{"class":527},[521,553,554],{"class":527},">\n",[521,556,559,563,566,570,573,576,579,582,585,588],{"class":557,"line":511},[523,558],"highlight",[521,560,562],{"class":561},"s7zQu","import",[521,564,565],{"class":527}," {",[521,567,569],{"class":568},"sTEyZ"," Fbo",[521,571,572],{"class":527},",",[521,574,575],{"class":568}," OrbitControls",[521,577,578],{"class":527}," }",[521,580,581],{"class":561}," from",[521,583,584],{"class":527}," '",[521,586,587],{"class":548},"@tresjs/cientos",[521,589,590],{"class":527},"'\n",[521,592,594,596,599,601,604,606,608,610,613],{"class":523,"line":593},3,[521,595,562],{"class":561},[521,597,598],{"class":561}," type",[521,600,565],{"class":527},[521,602,603],{"class":568}," TresObject",[521,605,578],{"class":527},[521,607,581],{"class":561},[521,609,584],{"class":527},[521,611,612],{"class":548},"@tresjs/core",[521,614,590],{"class":527},[521,616,618,620,622,625,627,629,631,633],{"class":523,"line":617},4,[521,619,562],{"class":561},[521,621,565],{"class":527},[521,623,624],{"class":568}," TresCanvas",[521,626,578],{"class":527},[521,628,581],{"class":561},[521,630,584],{"class":527},[521,632,612],{"class":548},[521,634,590],{"class":527},[521,636,638,640,642,645,647,649,651,653],{"class":523,"line":637},5,[521,639,562],{"class":561},[521,641,565],{"class":527},[521,643,644],{"class":568}," shallowRef",[521,646,578],{"class":527},[521,648,581],{"class":561},[521,650,584],{"class":527},[521,652,516],{"class":548},[521,654,590],{"class":527},[521,656,658],{"class":523,"line":657},6,[521,659,661],{"emptyLinePlaceholder":660},true,"\n",[521,663,665,668,671,673,676,678,682,685,687,690,693,696,698,701,704],{"class":523,"line":664},7,[521,666,667],{"class":535},"const",[521,669,670],{"class":568}," fboRef ",[521,672,542],{"class":527},[521,674,644],{"class":675},"s2Zo4",[521,677,528],{"class":527},[521,679,681],{"class":680},"sBMFI","InstanceType",[521,683,684],{"class":527},"\u003Ctypeof",[521,686,569],{"class":568},[521,688,689],{"class":527},">",[521,691,692],{"class":527}," |",[521,694,695],{"class":680}," null",[521,697,689],{"class":527},[521,699,700],{"class":568},"(",[521,702,703],{"class":527},"null",[521,705,706],{"class":568},")\n",[521,708,710,712,715,717,719,721,724,726,728,730,732,734],{"class":523,"line":709},8,[521,711,667],{"class":535},[521,713,714],{"class":568}," torusRef ",[521,716,542],{"class":527},[521,718,644],{"class":675},[521,720,528],{"class":527},[521,722,723],{"class":680},"TresObject",[521,725,692],{"class":527},[521,727,695],{"class":680},[521,729,689],{"class":527},[521,731,700],{"class":568},[521,733,703],{"class":527},[521,735,706],{"class":568},[521,737,739],{"class":523,"line":738},9,[521,740,661],{"emptyLinePlaceholder":660},[521,742,744,747,750,753,757,760,762,764,767,770,773],{"class":523,"line":743},10,[521,745,746],{"class":535},"function",[521,748,749],{"class":675}," onLoop",[521,751,752],{"class":527},"({",[521,754,756],{"class":755},"sHdIc"," elapsed",[521,758,759],{"class":527}," }:",[521,761,565],{"class":527},[521,763,756],{"class":531},[521,765,766],{"class":527},":",[521,768,769],{"class":680}," number",[521,771,772],{"class":527}," })",[521,774,775],{"class":527}," {\n",[521,777,779,782,785,788,791,794,797,800,803,806],{"class":523,"line":778},11,[521,780,781],{"class":561},"  if",[521,783,784],{"class":531}," (",[521,786,787],{"class":527},"!",[521,789,790],{"class":568},"torusRef",[521,792,793],{"class":527},".",[521,795,796],{"class":568},"value",[521,798,799],{"class":531},") ",[521,801,802],{"class":527},"{",[521,804,805],{"class":561}," return",[521,807,808],{"class":527}," }\n",[521,810,812,815,817,819,821,824,826,829,832,834,837],{"class":523,"line":811},12,[521,813,814],{"class":568},"  torusRef",[521,816,793],{"class":527},[521,818,796],{"class":568},[521,820,793],{"class":527},[521,822,823],{"class":568},"rotation",[521,825,793],{"class":527},[521,827,828],{"class":568},"x",[521,830,831],{"class":527}," =",[521,833,756],{"class":568},[521,835,836],{"class":527}," *",[521,838,840],{"class":839},"sbssI"," 0.745\n",[521,842,844,846,848,850,852,854,856,859,861,863,865],{"class":523,"line":843},13,[521,845,814],{"class":568},[521,847,793],{"class":527},[521,849,796],{"class":568},[521,851,793],{"class":527},[521,853,823],{"class":568},[521,855,793],{"class":527},[521,857,858],{"class":568},"y",[521,860,831],{"class":527},[521,862,756],{"class":568},[521,864,836],{"class":527},[521,866,867],{"class":839}," 0.361\n",[521,869,871],{"class":523,"line":870},14,[521,872,873],{"class":527},"}\n",[521,875,877,880,882],{"class":523,"line":876},15,[521,878,879],{"class":527},"\u003C/",[521,881,532],{"class":531},[521,883,554],{"class":527},[521,885,887],{"class":523,"line":886},16,[521,888,661],{"emptyLinePlaceholder":660},[521,890,892,894,897],{"class":523,"line":891},17,[521,893,528],{"class":527},[521,895,896],{"class":531},"template",[521,898,554],{"class":527},[521,900,902,905,908,911,913,915,918,920,923,925,927,930,932],{"class":523,"line":901},18,[521,903,904],{"class":527},"  \u003C",[521,906,907],{"class":531},"TresCanvas",[521,909,910],{"class":535}," :clear-color",[521,912,542],{"class":527},[521,914,545],{"class":527},[521,916,917],{"class":548},"0x222",[521,919,545],{"class":527},[521,921,922],{"class":535}," @loop",[521,924,542],{"class":527},[521,926,545],{"class":527},[521,928,929],{"class":548},"onLoop",[521,931,545],{"class":527},[521,933,554],{"class":527},[521,935,937,940,943,946,948,950,953,955],{"class":523,"line":936},19,[521,938,939],{"class":527},"    \u003C",[521,941,942],{"class":531},"TresPerspectiveCamera",[521,944,945],{"class":535}," :position",[521,947,542],{"class":527},[521,949,545],{"class":527},[521,951,952],{"class":548},"[0, 0.5, 5]",[521,954,545],{"class":527},[521,956,957],{"class":527}," />\n",[521,959,961,963,966],{"class":523,"line":960},20,[521,962,939],{"class":527},[521,964,965],{"class":531},"OrbitControls",[521,967,957],{"class":527},[521,969,971],{"class":523,"line":970},21,[521,972,661],{"emptyLinePlaceholder":660},[521,974,976,978,981,984,986,988,991,993],{"class":523,"line":975},22,[521,977,939],{"class":527},[521,979,980],{"class":531},"TresGridHelper",[521,982,983],{"class":535}," :args",[521,985,542],{"class":527},[521,987,545],{"class":527},[521,989,990],{"class":548},"[10, 10]",[521,992,545],{"class":527},[521,994,957],{"class":527},[521,996,998,1000],{"class":997,"line":512},[523,558],[521,999,939],{"class":527},[521,1001,1002],{"class":531},"Fbo\n",[521,1004,1006,1009,1011,1013,1016],{"class":1005,"line":513},[523,558],[521,1007,1008],{"class":535},"      ref",[521,1010,542],{"class":527},[521,1012,545],{"class":527},[521,1014,1015],{"class":548},"fboRef",[521,1017,1018],{"class":527},"\"\n",[521,1020,1022,1025,1027,1029,1032],{"class":1021,"line":514},[523,558],[521,1023,1024],{"class":535},"      :depth",[521,1026,542],{"class":527},[521,1028,545],{"class":527},[521,1030,1031],{"class":548},"false",[521,1033,1018],{"class":527},[521,1035,1037,1040,1042,1044,1047],{"class":1036,"line":515},[523,558],[521,1038,1039],{"class":535},"      :settings",[521,1041,542],{"class":527},[521,1043,545],{"class":527},[521,1045,1046],{"class":548},"{ samples: 1 }",[521,1048,1018],{"class":527},[521,1050,1052],{"class":523,"line":1051},27,[521,1053,1054],{"class":527},"    />\n",[521,1056,1058,1060,1063],{"class":523,"line":1057},28,[521,1059,939],{"class":527},[521,1061,1062],{"class":531},"TresMesh",[521,1064,554],{"class":527},[521,1066,1068,1071,1074,1076,1078,1080,1083,1085],{"class":523,"line":1067},29,[521,1069,1070],{"class":527},"      \u003C",[521,1072,1073],{"class":531},"TresBoxGeometry",[521,1075,983],{"class":535},[521,1077,542],{"class":527},[521,1079,545],{"class":527},[521,1081,1082],{"class":548},"[1, 1, 1]",[521,1084,545],{"class":527},[521,1086,957],{"class":527},[521,1088,1090],{"class":523,"line":1089},30,[521,1091,661],{"emptyLinePlaceholder":660},[521,1093,1095,1097],{"class":523,"line":1094},31,[521,1096,1070],{"class":527},[521,1098,1099],{"class":531},"TresMeshBasicMaterial\n",[521,1101,1103,1106,1108,1110,1113],{"class":523,"line":1102},32,[521,1104,1105],{"class":535},"        :color",[521,1107,542],{"class":527},[521,1109,545],{"class":527},[521,1111,1112],{"class":548},"0xFFFFFF",[521,1114,1018],{"class":527},[521,1116,1118,1121,1123,1125,1128],{"class":523,"line":1117},33,[521,1119,1120],{"class":535},"        :map",[521,1122,542],{"class":527},[521,1124,545],{"class":527},[521,1126,1127],{"class":548},"fboRef?.instance?.texture ?? null",[521,1129,1018],{"class":527},[521,1131,1133],{"class":523,"line":1132},34,[521,1134,1135],{"class":527},"      />\n",[521,1137,1139,1142,1144],{"class":523,"line":1138},35,[521,1140,1141],{"class":527},"    \u003C/",[521,1143,1062],{"class":531},[521,1145,554],{"class":527},[521,1147,1149],{"class":523,"line":1148},36,[521,1150,661],{"emptyLinePlaceholder":660},[521,1152,1154,1156],{"class":523,"line":1153},37,[521,1155,939],{"class":527},[521,1157,1158],{"class":531},"TresMesh\n",[521,1160,1162,1164,1166,1168,1170],{"class":523,"line":1161},38,[521,1163,1008],{"class":535},[521,1165,542],{"class":527},[521,1167,545],{"class":527},[521,1169,790],{"class":548},[521,1171,1018],{"class":527},[521,1173,1175,1178,1180,1182,1185],{"class":523,"line":1174},39,[521,1176,1177],{"class":535},"      :position",[521,1179,542],{"class":527},[521,1181,545],{"class":527},[521,1183,1184],{"class":548},"[3, 0, 0]",[521,1186,1018],{"class":527},[521,1188,1190],{"class":523,"line":1189},40,[521,1191,1192],{"class":527},"    >\n",[521,1194,1196,1198,1201,1203,1205,1207,1210,1212],{"class":523,"line":1195},41,[521,1197,1070],{"class":527},[521,1199,1200],{"class":531},"TresTorusGeometry",[521,1202,983],{"class":535},[521,1204,542],{"class":527},[521,1206,545],{"class":527},[521,1208,1209],{"class":548},"[1, 0.5, 16, 100]",[521,1211,545],{"class":527},[521,1213,957],{"class":527},[521,1215,1217,1219,1222],{"class":523,"line":1216},42,[521,1218,1070],{"class":527},[521,1220,1221],{"class":531},"TresMeshNormalMaterial",[521,1223,957],{"class":527},[521,1225,1227,1229,1231],{"class":523,"line":1226},43,[521,1228,1141],{"class":527},[521,1230,1062],{"class":531},[521,1232,554],{"class":527},[521,1234,1236,1239,1241],{"class":523,"line":1235},44,[521,1237,1238],{"class":527},"  \u003C/",[521,1240,907],{"class":531},[521,1242,554],{"class":527},[521,1244,1246,1248,1250],{"class":523,"line":1245},45,[521,1247,879],{"class":527},[521,1249,896],{"class":531},[521,1251,554],{"class":527},[502,1253,1255],{"id":1254},"props","Props",[1257,1258,1259,1276],"table",{},[1260,1261,1262],"thead",{},[1263,1264,1265,1270,1273],"tr",{},[1266,1267,1269],"th",{"align":1268},"left","Prop",[1266,1271,1272],{"align":1268},"Description",[1266,1274,1275],{},"Default",[1277,1278,1279,1299,1316,1344,1372],"tbody",{},[1263,1280,1281,1290,1296],{},[1282,1283,1284],"td",{"align":1268},[1285,1286,1287],"strong",{},[497,1288,1289],{},"width",[1282,1291,1292,1295],{"align":1268},[497,1293,1294],{},"number"," - The width of the FBO.",[1282,1297,1298],{},"Width of the canvas",[1263,1300,1301,1308,1313],{},[1282,1302,1303],{"align":1268},[1285,1304,1305],{},[497,1306,1307],{},"height",[1282,1309,1310,1312],{"align":1268},[497,1311,1294],{}," - the height of the FBO",[1282,1314,1315],{},"Height of the canvas",[1263,1317,1318,1325,1340],{},[1282,1319,1320],{"align":1268},[1285,1321,1322],{},[497,1323,1324],{},"depth",[1282,1326,1327,1330,1331,793],{"align":1268},[497,1328,1329],{},"boolean"," - Whether or not the FBO should render the depth to a ",[1332,1333,1337],"a",{"href":1334,"rel":1335},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1336],"nofollow",[497,1338,1339],{},"depthTexture",[1282,1341,1342],{},[497,1343,1031],{},[1263,1345,1346,1353,1367],{},[1282,1347,1348],{"align":1268},[1285,1349,1350],{},[497,1351,1352],{},"settings",[1282,1354,1355,1358,1359],{"align":1268},[497,1356,1357],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1332,1360,1363,1366],{"href":1361,"rel":1362},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1336],[497,1364,1365],{},"WebGLRenderTarget"," class",[1282,1368,1369],{},[497,1370,1371],{},"{}",[1263,1373,1374,1381,1386],{},[1282,1375,1376],{"align":1268},[1285,1377,1378],{},[497,1379,1380],{},"autoRender",[1282,1382,1383,1385],{"align":1268},[497,1384,1329],{}," - Whether to automatically render the FBO on the default scene.",[1282,1387,1388],{},[497,1389,1390],{},"true",[502,1392,1394],{"id":1393},"usefbo","useFBO",[490,1396,492],{},[490,1398,1399,1400,1402],{},"Cientos provides a ",[497,1401,1394],{}," composable to make it easy to use FBOs in your application.",[1404,1405,1406],"prose-warning",{},[490,1407,1408,1409,1411],{},"The ",[497,1410,1394],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[1413,1414,15],"h3",{"id":1415},"usage-1",[506,1417,1420],{"className":508,"code":1418,"highlights":1419,"language":516,"meta":517,"style":517},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs/cientos'\n\nconst fboTarget = useFBO({\n  depth: true,\n  width: 512,\n  height: 512,\n  settings: {\n    samples: 1,\n  },\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n    \u003CTresMeshBasicMaterial\n      :color=\"0xFFFFFF\"\n      :map=\"fboTarget?.texture ?? null\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n\n",[511,617,637,657,664,709,738,743,778,960],[497,1421,1422,1442,1462,1466,1483,1498,1511,1523,1533,1546,1552,1560,1568,1572,1580,1588,1606,1610,1616,1629,1644,1648,1656],{"__ignoreMap":517},[521,1423,1424,1426,1428,1430,1432,1434,1436,1438,1440],{"class":523,"line":524},[521,1425,528],{"class":527},[521,1427,532],{"class":531},[521,1429,536],{"class":535},[521,1431,539],{"class":535},[521,1433,542],{"class":527},[521,1435,545],{"class":527},[521,1437,549],{"class":548},[521,1439,545],{"class":527},[521,1441,554],{"class":527},[521,1443,1445,1447,1449,1452,1454,1456,1458,1460],{"class":1444,"line":511},[523,558],[521,1446,562],{"class":561},[521,1448,565],{"class":527},[521,1450,1451],{"class":568}," useFBO",[521,1453,578],{"class":527},[521,1455,581],{"class":561},[521,1457,584],{"class":527},[521,1459,587],{"class":548},[521,1461,590],{"class":527},[521,1463,1464],{"class":523,"line":593},[521,1465,661],{"emptyLinePlaceholder":660},[521,1467,1469,1471,1474,1476,1478,1480],{"class":1468,"line":617},[523,558],[521,1470,667],{"class":535},[521,1472,1473],{"class":568}," fboTarget ",[521,1475,542],{"class":527},[521,1477,1451],{"class":675},[521,1479,700],{"class":568},[521,1481,1482],{"class":527},"{\n",[521,1484,1486,1489,1491,1495],{"class":1485,"line":637},[523,558],[521,1487,1488],{"class":531},"  depth",[521,1490,766],{"class":527},[521,1492,1494],{"class":1493},"sfNiH"," true",[521,1496,1497],{"class":527},",\n",[521,1499,1501,1504,1506,1509],{"class":1500,"line":657},[523,558],[521,1502,1503],{"class":531},"  width",[521,1505,766],{"class":527},[521,1507,1508],{"class":839}," 512",[521,1510,1497],{"class":527},[521,1512,1514,1517,1519,1521],{"class":1513,"line":664},[523,558],[521,1515,1516],{"class":531},"  height",[521,1518,766],{"class":527},[521,1520,1508],{"class":839},[521,1522,1497],{"class":527},[521,1524,1526,1529,1531],{"class":1525,"line":709},[523,558],[521,1527,1528],{"class":531},"  settings",[521,1530,766],{"class":527},[521,1532,775],{"class":527},[521,1534,1536,1539,1541,1544],{"class":1535,"line":738},[523,558],[521,1537,1538],{"class":531},"    samples",[521,1540,766],{"class":527},[521,1542,1543],{"class":839}," 1",[521,1545,1497],{"class":527},[521,1547,1549],{"class":1548,"line":743},[523,558],[521,1550,1551],{"class":527},"  },\n",[521,1553,1555,1558],{"class":1554,"line":778},[523,558],[521,1556,1557],{"class":527},"}",[521,1559,706],{"class":568},[521,1561,1562,1564,1566],{"class":523,"line":811},[521,1563,879],{"class":527},[521,1565,532],{"class":531},[521,1567,554],{"class":527},[521,1569,1570],{"class":523,"line":843},[521,1571,661],{"emptyLinePlaceholder":660},[521,1573,1574,1576,1578],{"class":523,"line":870},[521,1575,528],{"class":527},[521,1577,896],{"class":531},[521,1579,554],{"class":527},[521,1581,1582,1584,1586],{"class":523,"line":876},[521,1583,904],{"class":527},[521,1585,1062],{"class":531},[521,1587,554],{"class":527},[521,1589,1590,1592,1594,1596,1598,1600,1602,1604],{"class":523,"line":886},[521,1591,939],{"class":527},[521,1593,1073],{"class":531},[521,1595,983],{"class":535},[521,1597,542],{"class":527},[521,1599,545],{"class":527},[521,1601,1082],{"class":548},[521,1603,545],{"class":527},[521,1605,957],{"class":527},[521,1607,1608],{"class":523,"line":891},[521,1609,661],{"emptyLinePlaceholder":660},[521,1611,1612,1614],{"class":523,"line":901},[521,1613,939],{"class":527},[521,1615,1099],{"class":531},[521,1617,1618,1621,1623,1625,1627],{"class":523,"line":936},[521,1619,1620],{"class":535},"      :color",[521,1622,542],{"class":527},[521,1624,545],{"class":527},[521,1626,1112],{"class":548},[521,1628,1018],{"class":527},[521,1630,1632,1635,1637,1639,1642],{"class":1631,"line":960},[523,558],[521,1633,1634],{"class":535},"      :map",[521,1636,542],{"class":527},[521,1638,545],{"class":527},[521,1640,1641],{"class":548},"fboTarget?.texture ?? null",[521,1643,1018],{"class":527},[521,1645,1646],{"class":523,"line":970},[521,1647,1054],{"class":527},[521,1649,1650,1652,1654],{"class":523,"line":975},[521,1651,1238],{"class":527},[521,1653,1062],{"class":531},[521,1655,554],{"class":527},[521,1657,1658,1660,1662],{"class":523,"line":512},[521,1659,879],{"class":527},[521,1661,896],{"class":531},[521,1663,554],{"class":527},[1413,1665,1667],{"id":1666},"options","Options",[1257,1669,1670,1680],{},[1260,1671,1672],{},[1263,1673,1674,1676,1678],{},[1266,1675,1269],{"align":1268},[1266,1677,1272],{"align":1268},[1266,1679,1275],{},[1277,1681,1682,1696,1710,1731],{},[1263,1683,1684,1690,1694],{},[1282,1685,1686],{"align":1268},[1285,1687,1688],{},[497,1689,1289],{},[1282,1691,1692,1295],{"align":1268},[497,1693,1294],{},[1282,1695,1298],{},[1263,1697,1698,1704,1708],{},[1282,1699,1700],{"align":1268},[1285,1701,1702],{},[497,1703,1307],{},[1282,1705,1706,1312],{"align":1268},[497,1707,1294],{},[1282,1709,1315],{},[1263,1711,1712,1718,1727],{},[1282,1713,1714],{"align":1268},[1285,1715,1716],{},[497,1717,1324],{},[1282,1719,1720,1330,1722,793],{"align":1268},[497,1721,1329],{},[1332,1723,1725],{"href":1334,"rel":1724},[1336],[497,1726,1339],{},[1282,1728,1729],{},[497,1730,1031],{},[1263,1732,1733,1739,1748],{},[1282,1734,1735],{"align":1268},[1285,1736,1737],{},[497,1738,1352],{},[1282,1740,1741,1358,1743],{"align":1268},[497,1742,1357],{},[1332,1744,1746,1366],{"href":1361,"rel":1745},[1336],[497,1747,1365],{},[1282,1749,1750],{},[497,1751,1371],{},[1753,1754,1755],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":517,"searchDepth":524,"depth":511,"links":1757},[1758,1759,1760],{"id":504,"depth":511,"text":15},{"id":1254,"depth":511,"text":1255},{"id":1393,"depth":511,"text":1394,"children":1761},[1762,1763],{"id":1415,"depth":593,"text":15},{"id":1666,"depth":593,"text":1667},"Render to texture using Frame Buffer Objects.","md",null,{},{"title":413,"description":1764},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",[1771,1773],{"title":409,"path":410,"stem":411,"description":1772,"children":-1},"Render environment maps for reflective objects.",{"title":417,"path":418,"stem":419,"description":1774,"children":-1},"Create gradient textures for materials.",1782052434788]