[{"data":1,"prerenderedAt":3457},["ShallowReactive",2],{"navigation":3,"/api/debug-performance":466,"/api/debug-performance-surround":487,"debug-performance-list":492},[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,80,110,152,186,280,306,340,390,432],{"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],{"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},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":53,"path":54,"stem":55},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":57,"path":58,"stem":59},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":61,"path":62,"stem":63},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":65,"path":66,"stem":67},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":69,"path":70,"stem":71},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":73,"path":74,"stem":75},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":77,"path":78,"stem":79},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":81,"path":82,"stem":83,"children":84},"Controls","/api/controls","2.api/2.controls/index",[85,86,90,94,98,102,106],{"title":81,"path":82,"stem":83},{"title":87,"path":88,"stem":89},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":91,"path":92,"stem":93},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":95,"path":96,"stem":97},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":99,"path":100,"stem":101},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":103,"path":104,"stem":105},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":107,"path":108,"stem":109},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":111,"path":112,"stem":113,"children":114},"Loaders","/api/loaders","2.api/3.loaders/index",[115,116,120,124,128,132,136,140,144,148],{"title":111,"path":112,"stem":113},{"title":117,"path":118,"stem":119},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":121,"path":122,"stem":123},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":125,"path":126,"stem":127},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":129,"path":130,"stem":131},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":133,"path":134,"stem":135},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":137,"path":138,"stem":139},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":141,"path":142,"stem":143},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":145,"path":146,"stem":147},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":149,"path":150,"stem":151},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":153,"path":154,"stem":155,"children":156},"Materials","/api/materials","2.api/4.materials/index",[157,158,162,166,170,174,178,182],{"title":153,"path":154,"stem":155},{"title":159,"path":160,"stem":161},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":163,"path":164,"stem":165},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":167,"path":168,"stem":169},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":171,"path":172,"stem":173},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":175,"path":176,"stem":177},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":179,"path":180,"stem":181},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":183,"path":184,"stem":185},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":187,"path":188,"stem":189,"children":190},"Shapes","/api/shapes","2.api/5.shapes/index",[191,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276],{"title":187,"path":188,"stem":189},{"title":193,"path":194,"stem":195},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":197,"path":198,"stem":199},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":201,"path":202,"stem":203},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":205,"path":206,"stem":207},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":209,"path":210,"stem":211},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":213,"path":214,"stem":215},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":217,"path":218,"stem":219},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":221,"path":222,"stem":223},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":225,"path":226,"stem":227},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":229,"path":230,"stem":231},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":233,"path":234,"stem":235},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":237,"path":238,"stem":239},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":241,"path":242,"stem":243},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":245,"path":246,"stem":247},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":249,"path":250,"stem":251},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":253,"path":254,"stem":255},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":257,"path":258,"stem":259},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":261,"path":262,"stem":263},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":265,"path":266,"stem":267},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":269,"path":270,"stem":271},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":273,"path":274,"stem":275},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":277,"path":278,"stem":279},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":281,"path":282,"stem":283,"children":284},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[285,286,290,294,298,302],{"title":281,"path":282,"stem":283},{"title":287,"path":288,"stem":289},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":291,"path":292,"stem":293},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":295,"path":296,"stem":297},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":299,"path":300,"stem":301},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":303,"path":304,"stem":305},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":307,"path":308,"stem":309,"children":310},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[311,312,316,320,324,328,332,336],{"title":307,"path":308,"stem":309},{"title":313,"path":314,"stem":315},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":317,"path":318,"stem":319},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":321,"path":322,"stem":323},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":325,"path":326,"stem":327},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":329,"path":330,"stem":331},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":333,"path":334,"stem":335},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":337,"path":338,"stem":339},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":341,"path":342,"stem":343,"children":344},"Staging","/api/staging","2.api/8.staging/index",[345,346,350,354,358,362,366,370,374,378,382,386],{"title":341,"path":342,"stem":343},{"title":347,"path":348,"stem":349},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":351,"path":352,"stem":353},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":355,"path":356,"stem":357},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":359,"path":360,"stem":361},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":363,"path":364,"stem":365},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":367,"path":368,"stem":369},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":371,"path":372,"stem":373},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":375,"path":376,"stem":377},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":379,"path":380,"stem":381},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":383,"path":384,"stem":385},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":387,"path":388,"stem":389},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":391,"path":392,"stem":393,"children":394},"Objects","/api/objects","2.api/9.objects/index",[395,396,400,404,408,412,416,420,424,428],{"title":391,"path":392,"stem":393},{"title":397,"path":398,"stem":399},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":401,"path":402,"stem":403},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":405,"path":406,"stem":407},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":409,"path":410,"stem":411},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":413,"path":414,"stem":415},"HTML","/api/objects/html","2.api/9.objects/html",{"title":417,"path":418,"stem":419},"Image","/api/objects/image","2.api/9.objects/image",{"title":421,"path":422,"stem":423},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":425,"path":426,"stem":427},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":429,"path":430,"stem":431},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":433,"path":434,"stem":435,"children":436},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[437,438,442,446,450,454,458,462],{"title":433,"path":434,"stem":435},{"title":439,"path":440,"stem":441},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":443,"path":444,"stem":445},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":447,"path":448,"stem":449},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":451,"path":452,"stem":453},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":455,"path":456,"stem":457},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":459,"path":460,"stem":461},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":463,"path":464,"stem":465},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":467,"title":281,"body":468,"description":480,"extension":481,"links":482,"meta":483,"navigation":484,"path":282,"seo":485,"stem":283,"__hash__":486},"docs/2.api/6.debug-performance/index.md",{"type":469,"value":470,"toc":475},"minimark",[471],[472,473],"api-list",{"list-name":474},"debug-performance-list",{"title":476,"searchDepth":477,"depth":478,"links":479},"",1,2,[],"All debug and performance tools","md",null,{},true,{"title":281,"description":480},"I8cl-hxPBGBph5-zPkqjaMKsVrmdO64JwDyo7WJg8Z8",[488,490],{"title":277,"path":278,"stem":279,"description":489,"children":-1},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{"title":287,"path":288,"stem":289,"description":491,"children":-1},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",[493,899,1451,1668,1974],{"id":494,"title":287,"body":495,"description":491,"extension":481,"links":482,"meta":896,"navigation":484,"path":288,"seo":897,"stem":289,"__hash__":898},"docs/2.api/6.debug-performance/helper.md",{"type":469,"value":496,"toc":892},[497,503,511,515,834,838,888],[498,499,500],"scene-wrapper",{},[501,502],"debug-performance-helper",{},[504,505,506,510],"p",{},[507,508,509],"code",{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[512,513,15],"h2",{"id":514},"usage",[516,517,524],"pre",{"className":518,"code":519,"highlights":520,"language":523,"meta":476,"style":476},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Helper } from '@tresjs/cientos'\nimport { BoxHelper } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CTresMesh ref=\"boxRef\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n      \u003CHelper :type=\"BoxHelper\" :args=\"[0xff0000]\" />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[521,522],3,13,"vue",[507,525,526,560,588,610,631,641,647,657,668,711,733,744,754,795,805,815,825],{"__ignoreMap":476},[527,528,530,534,538,542,545,548,551,555,557],"span",{"class":529,"line":477},"line",[527,531,533],{"class":532},"sMK4o","\u003C",[527,535,537],{"class":536},"swJcz","script",[527,539,541],{"class":540},"spNyl"," setup",[527,543,544],{"class":540}," lang",[527,546,547],{"class":532},"=",[527,549,550],{"class":532},"\"",[527,552,554],{"class":553},"sfazB","ts",[527,556,550],{"class":532},[527,558,559],{"class":532},">\n",[527,561,562,566,569,573,576,579,582,585],{"class":529,"line":478},[527,563,565],{"class":564},"s7zQu","import",[527,567,568],{"class":532}," {",[527,570,572],{"class":571},"sTEyZ"," TresCanvas",[527,574,575],{"class":532}," }",[527,577,578],{"class":564}," from",[527,580,581],{"class":532}," '",[527,583,584],{"class":553},"@tresjs/core",[527,586,587],{"class":532},"'\n",[527,589,592,594,596,599,601,603,605,608],{"class":590,"line":521},[529,591],"highlight",[527,593,565],{"class":564},[527,595,568],{"class":532},[527,597,598],{"class":571}," Helper",[527,600,575],{"class":532},[527,602,578],{"class":564},[527,604,581],{"class":532},[527,606,607],{"class":553},"@tresjs/cientos",[527,609,587],{"class":532},[527,611,613,615,617,620,622,624,626,629],{"class":529,"line":612},4,[527,614,565],{"class":564},[527,616,568],{"class":532},[527,618,619],{"class":571}," BoxHelper",[527,621,575],{"class":532},[527,623,578],{"class":564},[527,625,581],{"class":532},[527,627,628],{"class":553},"three",[527,630,587],{"class":532},[527,632,634,637,639],{"class":529,"line":633},5,[527,635,636],{"class":532},"\u003C/",[527,638,537],{"class":536},[527,640,559],{"class":532},[527,642,644],{"class":529,"line":643},6,[527,645,646],{"emptyLinePlaceholder":484},"\n",[527,648,650,652,655],{"class":529,"line":649},7,[527,651,533],{"class":532},[527,653,654],{"class":536},"template",[527,656,559],{"class":532},[527,658,660,663,666],{"class":529,"line":659},8,[527,661,662],{"class":532},"  \u003C",[527,664,665],{"class":536},"TresCanvas",[527,667,559],{"class":532},[527,669,671,674,677,680,683,685,687,690,694,697,699,701,703,706,708],{"class":529,"line":670},9,[527,672,673],{"class":532},"    \u003C",[527,675,676],{"class":536},"TresPerspectiveCamera",[527,678,679],{"class":532}," :",[527,681,682],{"class":540},"position",[527,684,547],{"class":532},[527,686,550],{"class":532},[527,688,689],{"class":532},"[",[527,691,693],{"class":692},"sbssI","3",[527,695,696],{"class":532},", ",[527,698,693],{"class":692},[527,700,696],{"class":532},[527,702,693],{"class":692},[527,704,705],{"class":532},"]",[527,707,550],{"class":532},[527,709,710],{"class":532}," />\n",[527,712,714,716,719,722,724,726,729,731],{"class":529,"line":713},10,[527,715,673],{"class":532},[527,717,718],{"class":536},"TresMesh",[527,720,721],{"class":540}," ref",[527,723,547],{"class":532},[527,725,550],{"class":532},[527,727,728],{"class":553},"boxRef",[527,730,550],{"class":532},[527,732,559],{"class":532},[527,734,736,739,742],{"class":529,"line":735},11,[527,737,738],{"class":532},"      \u003C",[527,740,741],{"class":536},"TresBoxGeometry",[527,743,710],{"class":532},[527,745,747,749,752],{"class":529,"line":746},12,[527,748,738],{"class":532},[527,750,751],{"class":536},"TresMeshNormalMaterial",[527,753,710],{"class":532},[527,755,757,759,761,763,766,768,770,773,775,777,780,782,784,786,789,791,793],{"class":756,"line":522},[529,591],[527,758,738],{"class":532},[527,760,287],{"class":536},[527,762,679],{"class":532},[527,764,765],{"class":540},"type",[527,767,547],{"class":532},[527,769,550],{"class":532},[527,771,772],{"class":571},"BoxHelper",[527,774,550],{"class":532},[527,776,679],{"class":532},[527,778,779],{"class":540},"args",[527,781,547],{"class":532},[527,783,550],{"class":532},[527,785,689],{"class":532},[527,787,788],{"class":692},"0xff0000",[527,790,705],{"class":532},[527,792,550],{"class":532},[527,794,710],{"class":532},[527,796,798,801,803],{"class":529,"line":797},14,[527,799,800],{"class":532},"    \u003C/",[527,802,718],{"class":536},[527,804,559],{"class":532},[527,806,808,810,813],{"class":529,"line":807},15,[527,809,673],{"class":532},[527,811,812],{"class":536},"TresAmbientLight",[527,814,710],{"class":532},[527,816,818,821,823],{"class":529,"line":817},16,[527,819,820],{"class":532},"  \u003C/",[527,822,665],{"class":536},[527,824,559],{"class":532},[527,826,828,830,832],{"class":529,"line":827},17,[527,829,636],{"class":532},[527,831,654],{"class":536},[527,833,559],{"class":532},[512,835,837],{"id":836},"props","Props",[839,840,841,858],"table",{},[842,843,844],"thead",{},[845,846,847,852,855],"tr",{},[848,849,851],"th",{"align":850},"left","Prop",[848,853,854],{"align":850},"Description",[848,856,857],{},"Default",[859,860,861,874],"tbody",{},[845,862,863,869,872],{},[864,865,866],"td",{"align":850},[867,868,765],"strong",{},[864,870,871],{"align":850},"Helper constructor - required",[864,873],{},[845,875,876,880,883],{},[864,877,878],{"align":850},[867,879,779],{},[864,881,882],{"align":850},"Helper constructor args",[864,884,885],{},[507,886,887],{},"[]",[889,890,891],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":476,"searchDepth":477,"depth":478,"links":893},[894,895],{"id":514,"depth":478,"text":15},{"id":836,"depth":478,"text":837},{},{"title":287,"description":491},"eCegCHTXKuWv3dso3PuJHIMliJK_ACUVoEreb2IQT48",{"id":900,"title":291,"body":901,"description":1447,"extension":481,"links":482,"meta":1448,"navigation":484,"path":292,"seo":1449,"stem":293,"__hash__":1450},"docs/2.api/6.debug-performance/lod.md",{"type":469,"value":902,"toc":1443},[903,908,911,924,926,1389,1391,1440],[498,904,905],{},[906,907],"debug-performance-lod",{},[504,909,910],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[504,912,913,916,917,923],{},[507,914,915],{},"\u003CLOD />"," is a wrapper for THREE's ",[918,919,291],"a",{"href":920,"rel":921},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[922],"nofollow"," class.",[512,925,15],{"id":514},[516,927,929],{"className":518,"code":928,"language":523,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { LOD } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CLOD :levels=\"[0, 5, 10]\">\n      \u003C!-- High detail mesh - shown when close -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n        \u003CTresMeshStandardMaterial color=\"red\" />\n      \u003C/TresMesh>\n      \u003C!-- Medium detail mesh - shown at mid distance -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 16, 16]\" />\n        \u003CTresMeshStandardMaterial color=\"orange\" />\n      \u003C/TresMesh>\n      \u003C!-- Low detail mesh - shown when far -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 8, 8]\" />\n        \u003CTresMeshStandardMaterial color=\"yellow\" />\n      \u003C/TresMesh>\n    \u003C/LOD>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[507,930,931,951,969,988,996,1000,1008,1016,1051,1085,1091,1099,1135,1156,1165,1170,1178,1211,1231,1240,1246,1255,1289,1309,1318,1327,1336,1371,1380],{"__ignoreMap":476},[527,932,933,935,937,939,941,943,945,947,949],{"class":529,"line":477},[527,934,533],{"class":532},[527,936,537],{"class":536},[527,938,541],{"class":540},[527,940,544],{"class":540},[527,942,547],{"class":532},[527,944,550],{"class":532},[527,946,554],{"class":553},[527,948,550],{"class":532},[527,950,559],{"class":532},[527,952,953,955,957,959,961,963,965,967],{"class":529,"line":478},[527,954,565],{"class":564},[527,956,568],{"class":532},[527,958,572],{"class":571},[527,960,575],{"class":532},[527,962,578],{"class":564},[527,964,581],{"class":532},[527,966,584],{"class":553},[527,968,587],{"class":532},[527,970,971,973,975,978,980,982,984,986],{"class":529,"line":521},[527,972,565],{"class":564},[527,974,568],{"class":532},[527,976,977],{"class":571}," LOD",[527,979,575],{"class":532},[527,981,578],{"class":564},[527,983,581],{"class":532},[527,985,607],{"class":553},[527,987,587],{"class":532},[527,989,990,992,994],{"class":529,"line":612},[527,991,636],{"class":532},[527,993,537],{"class":536},[527,995,559],{"class":532},[527,997,998],{"class":529,"line":633},[527,999,646],{"emptyLinePlaceholder":484},[527,1001,1002,1004,1006],{"class":529,"line":643},[527,1003,533],{"class":532},[527,1005,654],{"class":536},[527,1007,559],{"class":532},[527,1009,1010,1012,1014],{"class":529,"line":649},[527,1011,662],{"class":532},[527,1013,665],{"class":536},[527,1015,559],{"class":532},[527,1017,1018,1020,1022,1024,1026,1028,1030,1032,1035,1037,1040,1042,1045,1047,1049],{"class":529,"line":659},[527,1019,673],{"class":532},[527,1021,676],{"class":536},[527,1023,679],{"class":532},[527,1025,682],{"class":540},[527,1027,547],{"class":532},[527,1029,550],{"class":532},[527,1031,689],{"class":532},[527,1033,1034],{"class":692},"0",[527,1036,696],{"class":532},[527,1038,1039],{"class":692},"2",[527,1041,696],{"class":532},[527,1043,1044],{"class":692},"5",[527,1046,705],{"class":532},[527,1048,550],{"class":532},[527,1050,710],{"class":532},[527,1052,1053,1055,1057,1059,1062,1064,1066,1068,1070,1072,1074,1076,1079,1081,1083],{"class":529,"line":670},[527,1054,673],{"class":532},[527,1056,291],{"class":536},[527,1058,679],{"class":532},[527,1060,1061],{"class":540},"levels",[527,1063,547],{"class":532},[527,1065,550],{"class":532},[527,1067,689],{"class":532},[527,1069,1034],{"class":692},[527,1071,696],{"class":532},[527,1073,1044],{"class":692},[527,1075,696],{"class":532},[527,1077,1078],{"class":692},"10",[527,1080,705],{"class":532},[527,1082,550],{"class":532},[527,1084,559],{"class":532},[527,1086,1087],{"class":529,"line":713},[527,1088,1090],{"class":1089},"sHwdD","      \u003C!-- High detail mesh - shown when close -->\n",[527,1092,1093,1095,1097],{"class":529,"line":735},[527,1094,738],{"class":532},[527,1096,718],{"class":536},[527,1098,559],{"class":532},[527,1100,1101,1104,1107,1109,1111,1113,1115,1117,1120,1122,1125,1127,1129,1131,1133],{"class":529,"line":746},[527,1102,1103],{"class":532},"        \u003C",[527,1105,1106],{"class":536},"TresSphereGeometry",[527,1108,679],{"class":532},[527,1110,779],{"class":540},[527,1112,547],{"class":532},[527,1114,550],{"class":532},[527,1116,689],{"class":532},[527,1118,1119],{"class":692},"1",[527,1121,696],{"class":532},[527,1123,1124],{"class":692},"32",[527,1126,696],{"class":532},[527,1128,1124],{"class":692},[527,1130,705],{"class":532},[527,1132,550],{"class":532},[527,1134,710],{"class":532},[527,1136,1137,1139,1142,1145,1147,1149,1152,1154],{"class":529,"line":522},[527,1138,1103],{"class":532},[527,1140,1141],{"class":536},"TresMeshStandardMaterial",[527,1143,1144],{"class":540}," color",[527,1146,547],{"class":532},[527,1148,550],{"class":532},[527,1150,1151],{"class":553},"red",[527,1153,550],{"class":532},[527,1155,710],{"class":532},[527,1157,1158,1161,1163],{"class":529,"line":797},[527,1159,1160],{"class":532},"      \u003C/",[527,1162,718],{"class":536},[527,1164,559],{"class":532},[527,1166,1167],{"class":529,"line":807},[527,1168,1169],{"class":1089},"      \u003C!-- Medium detail mesh - shown at mid distance -->\n",[527,1171,1172,1174,1176],{"class":529,"line":817},[527,1173,738],{"class":532},[527,1175,718],{"class":536},[527,1177,559],{"class":532},[527,1179,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1201,1203,1205,1207,1209],{"class":529,"line":827},[527,1181,1103],{"class":532},[527,1183,1106],{"class":536},[527,1185,679],{"class":532},[527,1187,779],{"class":540},[527,1189,547],{"class":532},[527,1191,550],{"class":532},[527,1193,689],{"class":532},[527,1195,1119],{"class":692},[527,1197,696],{"class":532},[527,1199,1200],{"class":692},"16",[527,1202,696],{"class":532},[527,1204,1200],{"class":692},[527,1206,705],{"class":532},[527,1208,550],{"class":532},[527,1210,710],{"class":532},[527,1212,1214,1216,1218,1220,1222,1224,1227,1229],{"class":529,"line":1213},18,[527,1215,1103],{"class":532},[527,1217,1141],{"class":536},[527,1219,1144],{"class":540},[527,1221,547],{"class":532},[527,1223,550],{"class":532},[527,1225,1226],{"class":553},"orange",[527,1228,550],{"class":532},[527,1230,710],{"class":532},[527,1232,1234,1236,1238],{"class":529,"line":1233},19,[527,1235,1160],{"class":532},[527,1237,718],{"class":536},[527,1239,559],{"class":532},[527,1241,1243],{"class":529,"line":1242},20,[527,1244,1245],{"class":1089},"      \u003C!-- Low detail mesh - shown when far -->\n",[527,1247,1249,1251,1253],{"class":529,"line":1248},21,[527,1250,738],{"class":532},[527,1252,718],{"class":536},[527,1254,559],{"class":532},[527,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276,1279,1281,1283,1285,1287],{"class":529,"line":1257},22,[527,1259,1103],{"class":532},[527,1261,1106],{"class":536},[527,1263,679],{"class":532},[527,1265,779],{"class":540},[527,1267,547],{"class":532},[527,1269,550],{"class":532},[527,1271,689],{"class":532},[527,1273,1119],{"class":692},[527,1275,696],{"class":532},[527,1277,1278],{"class":692},"8",[527,1280,696],{"class":532},[527,1282,1278],{"class":692},[527,1284,705],{"class":532},[527,1286,550],{"class":532},[527,1288,710],{"class":532},[527,1290,1292,1294,1296,1298,1300,1302,1305,1307],{"class":529,"line":1291},23,[527,1293,1103],{"class":532},[527,1295,1141],{"class":536},[527,1297,1144],{"class":540},[527,1299,547],{"class":532},[527,1301,550],{"class":532},[527,1303,1304],{"class":553},"yellow",[527,1306,550],{"class":532},[527,1308,710],{"class":532},[527,1310,1312,1314,1316],{"class":529,"line":1311},24,[527,1313,1160],{"class":532},[527,1315,718],{"class":536},[527,1317,559],{"class":532},[527,1319,1321,1323,1325],{"class":529,"line":1320},25,[527,1322,800],{"class":532},[527,1324,291],{"class":536},[527,1326,559],{"class":532},[527,1328,1330,1332,1334],{"class":529,"line":1329},26,[527,1331,673],{"class":532},[527,1333,812],{"class":536},[527,1335,710],{"class":532},[527,1337,1339,1341,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1365,1367,1369],{"class":529,"line":1338},27,[527,1340,673],{"class":532},[527,1342,1343],{"class":536},"TresDirectionalLight",[527,1345,679],{"class":532},[527,1347,682],{"class":540},[527,1349,547],{"class":532},[527,1351,550],{"class":532},[527,1353,689],{"class":532},[527,1355,1034],{"class":692},[527,1357,696],{"class":532},[527,1359,1039],{"class":692},[527,1361,696],{"class":532},[527,1363,1364],{"class":692},"4",[527,1366,705],{"class":532},[527,1368,550],{"class":532},[527,1370,710],{"class":532},[527,1372,1374,1376,1378],{"class":529,"line":1373},28,[527,1375,820],{"class":532},[527,1377,665],{"class":536},[527,1379,559],{"class":532},[527,1381,1383,1385,1387],{"class":529,"line":1382},29,[527,1384,636],{"class":532},[527,1386,654],{"class":536},[527,1388,559],{"class":532},[512,1390,837],{"id":836},[839,1392,1393,1403],{},[842,1394,1395],{},[845,1396,1397,1399,1401],{},[848,1398,851],{"align":850},[848,1400,854],{"align":850},[848,1402,857],{},[859,1404,1405,1425],{},[845,1406,1407,1411,1423],{},[864,1408,1409],{"align":850},[867,1410,1061],{},[864,1412,1413,1416,1417,1419,1420,1422],{"align":850},[507,1414,1415],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[507,1418,1061],{}," value for each ",[507,1421,291],{}," child.",[864,1424],{},[845,1426,1427,1432,1435],{},[864,1428,1429],{"align":850},[867,1430,1431],{},"hysteresis",[864,1433,1434],{"align":850},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[864,1436,1437],{},[507,1438,1439],{},"0.0",[889,1441,1442],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":476,"searchDepth":477,"depth":478,"links":1444},[1445,1446],{"id":514,"depth":478,"text":15},{"id":836,"depth":478,"text":837},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":291,"description":1447},"ue6lcrsKRgNjxBsudKxGB368Ot9yPUV2C-0TWgeZzbE",{"id":1452,"title":295,"body":1453,"description":1664,"extension":481,"links":482,"meta":1665,"navigation":484,"path":296,"seo":1666,"stem":297,"__hash__":1667},"docs/2.api/6.debug-performance/stats.md",{"type":469,"value":1454,"toc":1660},[1455,1469,1478,1482,1599,1601,1637,1657],[504,1456,1457,1462,1463,1468],{},[918,1458,1461],{"href":1459,"rel":1460},"https://github.com/mrdoob/stats.js/",[922],"stats.js"," is a JavaScript performance monitor, made by ",[918,1464,1467],{"href":1465,"rel":1466},"https://github.com/mrdoob",[922],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[504,1470,1471,1474,1475,1477],{},[867,1472,1473],{},"Cientos"," provides a component called ",[507,1476,295],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[512,1479,1481],{"id":1480},"basic-usage","Basic usage",[516,1483,1486],{"className":518,"code":1484,"highlights":1485,"language":523,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stats } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CStats />\n  \u003C/TresCanvas>\n\u003C/template>\n",[521,659],[507,1487,1488,1508,1526,1546,1554,1558,1566,1574,1583,1591],{"__ignoreMap":476},[527,1489,1490,1492,1494,1496,1498,1500,1502,1504,1506],{"class":529,"line":477},[527,1491,533],{"class":532},[527,1493,537],{"class":536},[527,1495,541],{"class":540},[527,1497,544],{"class":540},[527,1499,547],{"class":532},[527,1501,550],{"class":532},[527,1503,554],{"class":553},[527,1505,550],{"class":532},[527,1507,559],{"class":532},[527,1509,1510,1512,1514,1516,1518,1520,1522,1524],{"class":529,"line":478},[527,1511,565],{"class":564},[527,1513,568],{"class":532},[527,1515,572],{"class":571},[527,1517,575],{"class":532},[527,1519,578],{"class":564},[527,1521,581],{"class":532},[527,1523,584],{"class":553},[527,1525,587],{"class":532},[527,1527,1529,1531,1533,1536,1538,1540,1542,1544],{"class":1528,"line":521},[529,591],[527,1530,565],{"class":564},[527,1532,568],{"class":532},[527,1534,1535],{"class":571}," Stats",[527,1537,575],{"class":532},[527,1539,578],{"class":564},[527,1541,581],{"class":532},[527,1543,607],{"class":553},[527,1545,587],{"class":532},[527,1547,1548,1550,1552],{"class":529,"line":612},[527,1549,636],{"class":532},[527,1551,537],{"class":536},[527,1553,559],{"class":532},[527,1555,1556],{"class":529,"line":633},[527,1557,646],{"emptyLinePlaceholder":484},[527,1559,1560,1562,1564],{"class":529,"line":643},[527,1561,533],{"class":532},[527,1563,654],{"class":536},[527,1565,559],{"class":532},[527,1567,1568,1570,1572],{"class":529,"line":649},[527,1569,662],{"class":532},[527,1571,665],{"class":536},[527,1573,559],{"class":532},[527,1575,1577,1579,1581],{"class":1576,"line":659},[529,591],[527,1578,673],{"class":532},[527,1580,295],{"class":536},[527,1582,710],{"class":532},[527,1584,1585,1587,1589],{"class":529,"line":670},[527,1586,820],{"class":532},[527,1588,665],{"class":536},[527,1590,559],{"class":532},[527,1592,1593,1595,1597],{"class":529,"line":713},[527,1594,636],{"class":532},[527,1596,654],{"class":536},[527,1598,559],{"class":532},[512,1600,837],{"id":836},[839,1602,1603,1616],{},[842,1604,1605],{},[845,1606,1607,1609,1612,1614],{},[848,1608,851],{"align":850},[848,1610,1611],{},"Type",[848,1613,857],{},[848,1615,854],{},[859,1617,1618],{},[845,1619,1620,1625,1630,1634],{},[864,1621,1622],{"align":850},[867,1623,1624],{},"showPanel",[864,1626,1627],{},[507,1628,1629],{},"number",[864,1631,1632],{},[507,1633,1034],{},[864,1635,1636],{},"FPS monitor.",[1638,1639,1640,1644,1647,1650],"ul",{},[1641,1642,1643],"li",{},"0: FPS Frames rendered in the last second. The higher the number the better.",[1641,1645,1646],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[1641,1648,1649],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[1641,1651,1652,1653,1656],{},"3+: CUSTOM User-defined panel support. For more info please check ",[918,1654,1461],{"href":1459,"rel":1655},[922],".",[889,1658,1659],{},"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);}",{"title":476,"searchDepth":477,"depth":478,"links":1661},[1662,1663],{"id":1480,"depth":478,"text":1481},{"id":836,"depth":478,"text":837},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":295,"description":1664},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":1669,"title":299,"body":1670,"description":1970,"extension":481,"links":482,"meta":1971,"navigation":484,"path":300,"seo":1972,"stem":301,"__hash__":1973},"docs/2.api/6.debug-performance/stats-gl.md",{"type":469,"value":1671,"toc":1966},[1672,1690,1693,1695,1812,1816,1964],[504,1673,1674,1679,1680,1685,1686,1689],{},[918,1675,1678],{"href":1676,"rel":1677},"https://github.com/RenaudRohlinger/stats-gl",[922],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[918,1681,1684],{"href":1682,"rel":1683},"https://github.com/RenaudRohlinger",[922],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[918,1687,1461],{"href":1459,"rel":1688},[922],", capable of displaying CPU and GPU metrics.",[504,1691,1692],{},"In TresJS, you can effortlessly create a performance monitoring panel in the top left corner of your canvas by using the StatsGl component.\nSimply drop the StatsGl component into your TresCanvas for easy performance monitoring.",[512,1694,1481],{"id":1480},[516,1696,1699],{"className":518,"code":1697,"highlights":1698,"language":523,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { StatsGl } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CStatsGl />\n  \u003C/TresCanvas>\n\u003C/template>\n",[521,659],[507,1700,1701,1721,1739,1759,1767,1771,1779,1787,1796,1804],{"__ignoreMap":476},[527,1702,1703,1705,1707,1709,1711,1713,1715,1717,1719],{"class":529,"line":477},[527,1704,533],{"class":532},[527,1706,537],{"class":536},[527,1708,541],{"class":540},[527,1710,544],{"class":540},[527,1712,547],{"class":532},[527,1714,550],{"class":532},[527,1716,554],{"class":553},[527,1718,550],{"class":532},[527,1720,559],{"class":532},[527,1722,1723,1725,1727,1729,1731,1733,1735,1737],{"class":529,"line":478},[527,1724,565],{"class":564},[527,1726,568],{"class":532},[527,1728,572],{"class":571},[527,1730,575],{"class":532},[527,1732,578],{"class":564},[527,1734,581],{"class":532},[527,1736,584],{"class":553},[527,1738,587],{"class":532},[527,1740,1742,1744,1746,1749,1751,1753,1755,1757],{"class":1741,"line":521},[529,591],[527,1743,565],{"class":564},[527,1745,568],{"class":532},[527,1747,1748],{"class":571}," StatsGl",[527,1750,575],{"class":532},[527,1752,578],{"class":564},[527,1754,581],{"class":532},[527,1756,607],{"class":553},[527,1758,587],{"class":532},[527,1760,1761,1763,1765],{"class":529,"line":612},[527,1762,636],{"class":532},[527,1764,537],{"class":536},[527,1766,559],{"class":532},[527,1768,1769],{"class":529,"line":633},[527,1770,646],{"emptyLinePlaceholder":484},[527,1772,1773,1775,1777],{"class":529,"line":643},[527,1774,533],{"class":532},[527,1776,654],{"class":536},[527,1778,559],{"class":532},[527,1780,1781,1783,1785],{"class":529,"line":649},[527,1782,662],{"class":532},[527,1784,665],{"class":536},[527,1786,559],{"class":532},[527,1788,1790,1792,1794],{"class":1789,"line":659},[529,591],[527,1791,673],{"class":532},[527,1793,299],{"class":536},[527,1795,710],{"class":532},[527,1797,1798,1800,1802],{"class":529,"line":670},[527,1799,820],{"class":532},[527,1801,665],{"class":536},[527,1803,559],{"class":532},[527,1805,1806,1808,1810],{"class":529,"line":713},[527,1807,636],{"class":532},[527,1809,654],{"class":536},[527,1811,559],{"class":532},[512,1813,1815],{"id":1814},"options","Options",[839,1817,1818,1831],{},[842,1819,1820],{},[845,1821,1822,1825,1827,1829],{},[848,1823,1824],{"align":850},"Name",[848,1826,1611],{},[848,1828,857],{},[848,1830,854],{},[859,1832,1833,1852,1871,1889,1907,1927,1946],{},[845,1834,1835,1840,1844,1849],{},[864,1836,1837],{"align":850},[867,1838,1839],{},"logsPerSecond",[864,1841,1842],{},[507,1843,1629],{},[864,1845,1846],{},[507,1847,1848],{},"20",[864,1850,1851],{},"How often to log performance data, in logs per second.",[845,1853,1854,1859,1863,1868],{},[864,1855,1856],{"align":850},[867,1857,1858],{},"samplesLog",[864,1860,1861],{},[507,1862,1629],{},[864,1864,1865],{},[507,1866,1867],{},"100",[864,1869,1870],{},"Number of recent log samples to keep for computing averages.",[845,1872,1873,1878,1882,1886],{},[864,1874,1875],{"align":850},[867,1876,1877],{},"samplesGraph",[864,1879,1880],{},[507,1881,1629],{},[864,1883,1884],{},[507,1885,1078],{},[864,1887,1888],{},"Number of recent graph samples to keep for computing averages.",[845,1890,1891,1896,1900,1904],{},[864,1892,1893],{"align":850},[867,1894,1895],{},"precision",[864,1897,1898],{},[507,1899,1629],{},[864,1901,1902],{},[507,1903,1039],{},[864,1905,1906],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[845,1908,1909,1914,1919,1924],{},[864,1910,1911],{"align":850},[867,1912,1913],{},"horizontal",[864,1915,1916],{},[507,1917,1918],{},"boolean",[864,1920,1921],{},[507,1922,1923],{},"true",[864,1925,1926],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[845,1928,1929,1934,1938,1943],{},[864,1930,1931],{"align":850},[867,1932,1933],{},"minimal",[864,1935,1936],{},[507,1937,1918],{},[864,1939,1940],{},[507,1941,1942],{},"false",[864,1944,1945],{},"A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.",[845,1947,1948,1953,1957,1961],{},[864,1949,1950],{"align":850},[867,1951,1952],{},"mode",[864,1954,1955],{},[507,1956,1629],{},[864,1958,1959],{},[507,1960,1034],{},[864,1962,1963],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[889,1965,1659],{},{"title":476,"searchDepth":477,"depth":478,"links":1967},[1968,1969],{"id":1480,"depth":478,"text":1481},{"id":1814,"depth":478,"text":1815},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":299,"description":1970},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":1975,"title":303,"body":1976,"description":3453,"extension":481,"links":482,"meta":3454,"navigation":484,"path":304,"seo":3455,"stem":305,"__hash__":3456},"docs/2.api/6.debug-performance/use-bvh.md",{"type":469,"value":1977,"toc":3429},[1978,1984,1991,2005,2009,2012,2017,2028,2030,2034,2227,2231,2234,2388,2392,2395,2701,2703,2718,2722,2775,2779,2785,2934,2938,2958,2962,2966,2969,3063,3067,3070,3113,3116,3120,3173,3177,3204,3208,3214,3372,3376,3380,3402,3406,3426],[1979,1980,1981],"scene-controls-wrapper",{},[1982,1983],"debug-performance-use-bounding-volume-hierarchy",{},[504,1985,1986,1987,1990],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[867,1988,1989],{},"orders of magnitude",", especially for complex models with many triangles.",[504,1992,1993,1994,1999,2000,1656],{},"Built on top of ",[918,1995,1998],{"href":1996,"rel":1997},"https://github.com/gkjohnson/three-mesh-bvh",[922],"three-mesh-bvh"," by ",[918,2001,2004],{"href":2002,"rel":2003},"https://github.com/gkjohnson",[922],"Garrett Johnson",[512,2006,2008],{"id":2007},"what-is-bvh","What is BVH?",[504,2010,2011],{},"BVH (Bounding Volume Hierarchy) is a spatial data structure that organizes geometry into a tree of bounding boxes. Instead of testing every triangle during raycasting, the algorithm tests bounding boxes first and only checks triangles in boxes that intersect the ray. This reduces raycasting complexity from O(n) to O(log n).",[504,2013,2014],{},[867,2015,2016],{},"Use cases:",[1638,2018,2019,2022,2025],{},[1641,2020,2021],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[1641,2023,2024],{},"Complex models with thousands of triangles",[1641,2026,2027],{},"Scenes with multiple raycasting operations per frame",[512,2029,15],{"id":514},[2031,2032,2033],"h3",{"id":1480},"Basic Usage",[516,2035,2038],{"className":518,"code":2036,"highlights":2037,"language":523,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/complex-model.glb')\nuseBVH(() => model.value?.scene)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n\u003C/template>\n",[478,633,643,649,659,713],[507,2039,2040,2060,2086,2090,2129,2156,2165,2170,2179,2218],{"__ignoreMap":476},[527,2041,2042,2044,2046,2048,2050,2052,2054,2056,2058],{"class":529,"line":477},[527,2043,533],{"class":532},[527,2045,537],{"class":536},[527,2047,541],{"class":540},[527,2049,544],{"class":540},[527,2051,547],{"class":532},[527,2053,550],{"class":532},[527,2055,554],{"class":553},[527,2057,550],{"class":532},[527,2059,559],{"class":532},[527,2061,2063,2065,2067,2070,2073,2076,2078,2080,2082,2084],{"class":2062,"line":478},[529,591],[527,2064,565],{"class":564},[527,2066,568],{"class":532},[527,2068,2069],{"class":571}," useGLTF",[527,2071,2072],{"class":532},",",[527,2074,2075],{"class":571}," useBVH",[527,2077,575],{"class":532},[527,2079,578],{"class":564},[527,2081,581],{"class":532},[527,2083,607],{"class":553},[527,2085,587],{"class":532},[527,2087,2088],{"class":529,"line":521},[527,2089,646],{"emptyLinePlaceholder":484},[527,2091,2092,2095,2097,2100,2103,2106,2109,2112,2115,2118,2121,2124,2126],{"class":529,"line":612},[527,2093,2094],{"class":540},"const",[527,2096,568],{"class":532},[527,2098,2099],{"class":536}," state",[527,2101,2102],{"class":532},":",[527,2104,2105],{"class":571}," model ",[527,2107,2108],{"class":532},"}",[527,2110,2111],{"class":532}," =",[527,2113,2069],{"class":2114},"s2Zo4",[527,2116,2117],{"class":571},"(",[527,2119,2120],{"class":532},"'",[527,2122,2123],{"class":553},"/models/complex-model.glb",[527,2125,2120],{"class":532},[527,2127,2128],{"class":571},")\n",[527,2130,2132,2134,2136,2139,2142,2145,2147,2150,2153],{"class":2131,"line":633},[529,591],[527,2133,303],{"class":2114},[527,2135,2117],{"class":571},[527,2137,2138],{"class":532},"()",[527,2140,2141],{"class":540}," =>",[527,2143,2144],{"class":571}," model",[527,2146,1656],{"class":532},[527,2148,2149],{"class":571},"value",[527,2151,2152],{"class":532},"?.",[527,2154,2155],{"class":571},"scene)\n",[527,2157,2159,2161,2163],{"class":2158,"line":643},[529,591],[527,2160,636],{"class":532},[527,2162,537],{"class":536},[527,2164,559],{"class":532},[527,2166,2168],{"class":2167,"line":649},[529,591],[527,2169,646],{"emptyLinePlaceholder":484},[527,2171,2173,2175,2177],{"class":2172,"line":659},[529,591],[527,2174,533],{"class":532},[527,2176,654],{"class":536},[527,2178,559],{"class":532},[527,2180,2181,2183,2186,2189,2191,2193,2196,2198,2200,2203,2205,2207,2209,2211,2214,2216],{"class":529,"line":670},[527,2182,662],{"class":532},[527,2184,2185],{"class":536},"primitive",[527,2187,2188],{"class":564}," v-if",[527,2190,547],{"class":532},[527,2192,550],{"class":532},[527,2194,2195],{"class":571},"model",[527,2197,550],{"class":532},[527,2199,679],{"class":532},[527,2201,2202],{"class":540},"object",[527,2204,547],{"class":532},[527,2206,550],{"class":532},[527,2208,2195],{"class":571},[527,2210,1656],{"class":532},[527,2212,2213],{"class":571},"scene",[527,2215,550],{"class":532},[527,2217,710],{"class":532},[527,2219,2221,2223,2225],{"class":2220,"line":713},[529,591],[527,2222,636],{"class":532},[527,2224,654],{"class":536},[527,2226,559],{"class":532},[2031,2228,2230],{"id":2229},"with-debug-visualization","With Debug Visualization",[504,2232,2233],{},"Enable debug mode to visualize the BVH bounding boxes:",[516,2235,2238],{"className":518,"code":2236,"highlights":2237,"language":523,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n  () => model.value?.scene,\n  {\n    debug: true, // Show BVH bounding boxes\n  }\n)\n\u003C/script>\n",[612,633,643,649],[507,2239,2240,2260,2282,2286,2316,2321,2329,2350,2355,2371,2376,2380],{"__ignoreMap":476},[527,2241,2242,2244,2246,2248,2250,2252,2254,2256,2258],{"class":529,"line":477},[527,2243,533],{"class":532},[527,2245,537],{"class":536},[527,2247,541],{"class":540},[527,2249,544],{"class":540},[527,2251,547],{"class":532},[527,2253,550],{"class":532},[527,2255,554],{"class":553},[527,2257,550],{"class":532},[527,2259,559],{"class":532},[527,2261,2262,2264,2266,2268,2270,2272,2274,2276,2278,2280],{"class":529,"line":478},[527,2263,565],{"class":564},[527,2265,568],{"class":532},[527,2267,2069],{"class":571},[527,2269,2072],{"class":532},[527,2271,2075],{"class":571},[527,2273,575],{"class":532},[527,2275,578],{"class":564},[527,2277,581],{"class":532},[527,2279,607],{"class":553},[527,2281,587],{"class":532},[527,2283,2284],{"class":529,"line":521},[527,2285,646],{"emptyLinePlaceholder":484},[527,2287,2289,2291,2293,2295,2297,2299,2301,2303,2305,2307,2309,2312,2314],{"class":2288,"line":612},[529,591],[527,2290,2094],{"class":540},[527,2292,568],{"class":532},[527,2294,2099],{"class":536},[527,2296,2102],{"class":532},[527,2298,2105],{"class":571},[527,2300,2108],{"class":532},[527,2302,2111],{"class":532},[527,2304,2069],{"class":2114},[527,2306,2117],{"class":571},[527,2308,2120],{"class":532},[527,2310,2311],{"class":553},"/models/model.glb",[527,2313,2120],{"class":532},[527,2315,2128],{"class":571},[527,2317,2319],{"class":2318,"line":633},[529,591],[527,2320,646],{"emptyLinePlaceholder":484},[527,2322,2324,2326],{"class":2323,"line":643},[529,591],[527,2325,303],{"class":2114},[527,2327,2328],{"class":571},"(\n",[527,2330,2332,2335,2337,2339,2341,2343,2345,2347],{"class":2331,"line":649},[529,591],[527,2333,2334],{"class":532},"  ()",[527,2336,2141],{"class":540},[527,2338,2144],{"class":571},[527,2340,1656],{"class":532},[527,2342,2149],{"class":571},[527,2344,2152],{"class":532},[527,2346,2213],{"class":571},[527,2348,2349],{"class":532},",\n",[527,2351,2352],{"class":529,"line":659},[527,2353,2354],{"class":532},"  {\n",[527,2356,2357,2360,2362,2366,2368],{"class":529,"line":670},[527,2358,2359],{"class":536},"    debug",[527,2361,2102],{"class":532},[527,2363,2365],{"class":2364},"sfNiH"," true",[527,2367,2072],{"class":532},[527,2369,2370],{"class":1089}," // Show BVH bounding boxes\n",[527,2372,2373],{"class":529,"line":713},[527,2374,2375],{"class":532},"  }\n",[527,2377,2378],{"class":529,"line":735},[527,2379,2128],{"class":571},[527,2381,2382,2384,2386],{"class":529,"line":746},[527,2383,636],{"class":532},[527,2385,537],{"class":536},[527,2387,559],{"class":532},[2031,2389,2391],{"id":2390},"reactive-enabled-state","Reactive Enabled State",[504,2393,2394],{},"Control BVH optimization dynamically:",[516,2396,2399],{"className":518,"code":2397,"highlights":2398,"language":523,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst bvhEnabled = ref(true)\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n  () => model.value?.scene,\n  {\n    enabled: bvhEnabled,\n  }\n)\n\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"bvhEnabled = !bvhEnabled\">\n      Toggle BVH\n    \u003C/button>\n    \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n  \u003C/div>\n\u003C/template>\n",[612,643,649,659,670],[507,2400,2401,2421,2444,2466,2471,2488,2493,2522,2527,2534,2552,2556,2568,2572,2576,2580,2588,2592,2600,2609,2638,2643,2651,2685,2693],{"__ignoreMap":476},[527,2402,2403,2405,2407,2409,2411,2413,2415,2417,2419],{"class":529,"line":477},[527,2404,533],{"class":532},[527,2406,537],{"class":536},[527,2408,541],{"class":540},[527,2410,544],{"class":540},[527,2412,547],{"class":532},[527,2414,550],{"class":532},[527,2416,554],{"class":553},[527,2418,550],{"class":532},[527,2420,559],{"class":532},[527,2422,2423,2425,2427,2429,2431,2434,2436,2438,2440,2442],{"class":529,"line":478},[527,2424,565],{"class":564},[527,2426,568],{"class":532},[527,2428,721],{"class":571},[527,2430,2072],{"class":532},[527,2432,2433],{"class":571}," computed",[527,2435,575],{"class":532},[527,2437,578],{"class":564},[527,2439,581],{"class":532},[527,2441,523],{"class":553},[527,2443,587],{"class":532},[527,2445,2446,2448,2450,2452,2454,2456,2458,2460,2462,2464],{"class":529,"line":521},[527,2447,565],{"class":564},[527,2449,568],{"class":532},[527,2451,2069],{"class":571},[527,2453,2072],{"class":532},[527,2455,2075],{"class":571},[527,2457,575],{"class":532},[527,2459,578],{"class":564},[527,2461,581],{"class":532},[527,2463,607],{"class":553},[527,2465,587],{"class":532},[527,2467,2469],{"class":2468,"line":612},[529,591],[527,2470,646],{"emptyLinePlaceholder":484},[527,2472,2473,2475,2478,2480,2482,2484,2486],{"class":529,"line":633},[527,2474,2094],{"class":540},[527,2476,2477],{"class":571}," bvhEnabled ",[527,2479,547],{"class":532},[527,2481,721],{"class":2114},[527,2483,2117],{"class":571},[527,2485,1923],{"class":2364},[527,2487,2128],{"class":571},[527,2489,2491],{"class":2490,"line":643},[529,591],[527,2492,646],{"emptyLinePlaceholder":484},[527,2494,2496,2498,2500,2502,2504,2506,2508,2510,2512,2514,2516,2518,2520],{"class":2495,"line":649},[529,591],[527,2497,2094],{"class":540},[527,2499,568],{"class":532},[527,2501,2099],{"class":536},[527,2503,2102],{"class":532},[527,2505,2105],{"class":571},[527,2507,2108],{"class":532},[527,2509,2111],{"class":532},[527,2511,2069],{"class":2114},[527,2513,2117],{"class":571},[527,2515,2120],{"class":532},[527,2517,2311],{"class":553},[527,2519,2120],{"class":532},[527,2521,2128],{"class":571},[527,2523,2525],{"class":2524,"line":659},[529,591],[527,2526,646],{"emptyLinePlaceholder":484},[527,2528,2530,2532],{"class":2529,"line":670},[529,591],[527,2531,303],{"class":2114},[527,2533,2328],{"class":571},[527,2535,2536,2538,2540,2542,2544,2546,2548,2550],{"class":529,"line":713},[527,2537,2334],{"class":532},[527,2539,2141],{"class":540},[527,2541,2144],{"class":571},[527,2543,1656],{"class":532},[527,2545,2149],{"class":571},[527,2547,2152],{"class":532},[527,2549,2213],{"class":571},[527,2551,2349],{"class":532},[527,2553,2554],{"class":529,"line":735},[527,2555,2354],{"class":532},[527,2557,2558,2561,2563,2566],{"class":529,"line":746},[527,2559,2560],{"class":536},"    enabled",[527,2562,2102],{"class":532},[527,2564,2565],{"class":571}," bvhEnabled",[527,2567,2349],{"class":532},[527,2569,2570],{"class":529,"line":522},[527,2571,2375],{"class":532},[527,2573,2574],{"class":529,"line":797},[527,2575,2128],{"class":571},[527,2577,2578],{"class":529,"line":807},[527,2579,646],{"emptyLinePlaceholder":484},[527,2581,2582,2584,2586],{"class":529,"line":817},[527,2583,636],{"class":532},[527,2585,537],{"class":536},[527,2587,559],{"class":532},[527,2589,2590],{"class":529,"line":827},[527,2591,646],{"emptyLinePlaceholder":484},[527,2593,2594,2596,2598],{"class":529,"line":1213},[527,2595,533],{"class":532},[527,2597,654],{"class":536},[527,2599,559],{"class":532},[527,2601,2602,2604,2607],{"class":529,"line":1233},[527,2603,662],{"class":532},[527,2605,2606],{"class":536},"div",[527,2608,559],{"class":532},[527,2610,2611,2613,2616,2619,2622,2624,2626,2629,2632,2634,2636],{"class":529,"line":1242},[527,2612,673],{"class":532},[527,2614,2615],{"class":536},"button",[527,2617,2618],{"class":532}," @",[527,2620,2621],{"class":540},"click",[527,2623,547],{"class":532},[527,2625,550],{"class":532},[527,2627,2628],{"class":571},"bvhEnabled",[527,2630,2631],{"class":532}," = !",[527,2633,2628],{"class":571},[527,2635,550],{"class":532},[527,2637,559],{"class":532},[527,2639,2640],{"class":529,"line":1248},[527,2641,2642],{"class":571},"      Toggle BVH\n",[527,2644,2645,2647,2649],{"class":529,"line":1257},[527,2646,800],{"class":532},[527,2648,2615],{"class":536},[527,2650,559],{"class":532},[527,2652,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683],{"class":529,"line":1291},[527,2654,673],{"class":532},[527,2656,2185],{"class":536},[527,2658,2188],{"class":564},[527,2660,547],{"class":532},[527,2662,550],{"class":532},[527,2664,2195],{"class":571},[527,2666,550],{"class":532},[527,2668,679],{"class":532},[527,2670,2202],{"class":540},[527,2672,547],{"class":532},[527,2674,550],{"class":532},[527,2676,2195],{"class":571},[527,2678,1656],{"class":532},[527,2680,2213],{"class":571},[527,2682,550],{"class":532},[527,2684,710],{"class":532},[527,2686,2687,2689,2691],{"class":529,"line":1311},[527,2688,820],{"class":532},[527,2690,2606],{"class":536},[527,2692,559],{"class":532},[527,2694,2695,2697,2699],{"class":529,"line":1320},[527,2696,636],{"class":532},[527,2698,654],{"class":536},[527,2700,559],{"class":532},[512,2702,1815],{"id":1814},[504,2704,2705,2706,2709,2710,2713,2714,2717],{},"Options are divided into ",[867,2707,2708],{},"reactive"," (can change at runtime) and ",[867,2711,2712],{},"static"," (set once at creation - changing requires toggling ",[507,2715,2716],{},"enabled"," off/on to rebuild).",[2031,2719,2721],{"id":2720},"reactive-options","Reactive Options",[839,2723,2724,2737],{},[842,2725,2726],{},[845,2727,2728,2731,2733,2735],{},[848,2729,2730],{"align":850},"Option",[848,2732,1611],{"align":850},[848,2734,857],{"align":850},[848,2736,854],{"align":850},[859,2738,2739,2757],{},[845,2740,2741,2745,2750,2754],{},[864,2742,2743],{"align":850},[867,2744,2716],{},[864,2746,2747],{"align":850},[507,2748,2749],{},"MaybeRefOrGetter\u003Cboolean>",[864,2751,2752],{"align":850},[507,2753,1923],{},[864,2755,2756],{"align":850},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[845,2758,2759,2764,2768,2772],{},[864,2760,2761],{"align":850},[867,2762,2763],{},"debug",[864,2765,2766],{"align":850},[507,2767,2749],{},[864,2769,2770],{"align":850},[507,2771,1942],{},[864,2773,2774],{"align":850},"Show debug visualization of BVH bounding boxes.",[2031,2776,2778],{"id":2777},"static-options-bvh-construction","Static Options (BVH Construction)",[504,2780,2781,2782,2784],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[507,2783,2716],{}," off/on to rebuild with new values.",[839,2786,2787,2799],{},[842,2788,2789],{},[845,2790,2791,2793,2795,2797],{},[848,2792,2730],{"align":850},[848,2794,1611],{"align":850},[848,2796,857],{"align":850},[848,2798,854],{"align":850},[859,2800,2801,2823,2843,2862,2880,2898,2916],{},[845,2802,2803,2808,2812,2816],{},[864,2804,2805],{"align":850},[867,2806,2807],{},"firstHitOnly",[864,2809,2810],{"align":850},[507,2811,1918],{},[864,2813,2814],{"align":850},[507,2815,1942],{},[864,2817,2818,2819,2822],{"align":850},"Use ",[507,2820,2821],{},"raycastFirst"," for better performance when only the first hit is needed.",[845,2824,2825,2830,2835,2840],{},[864,2826,2827],{"align":850},[867,2828,2829],{},"splitStrategy",[864,2831,2832],{"align":850},[507,2833,2834],{},"'CENTER' | 'AVERAGE' | 'SAH'",[864,2836,2837],{"align":850},[507,2838,2839],{},"'SAH'",[864,2841,2842],{"align":850},"BVH build strategy. See section below.",[845,2844,2845,2850,2854,2859],{},[864,2846,2847],{"align":850},[867,2848,2849],{},"maxDepth",[864,2851,2852],{"align":850},[507,2853,1629],{},[864,2855,2856],{"align":850},[507,2857,2858],{},"40",[864,2860,2861],{"align":850},"Maximum tree depth for the BVH structure.",[845,2863,2864,2869,2873,2877],{},[864,2865,2866],{"align":850},[867,2867,2868],{},"maxLeafSize",[864,2870,2871],{"align":850},[507,2872,1629],{},[864,2874,2875],{"align":850},[507,2876,1078],{},[864,2878,2879],{"align":850},"Target number of triangles per leaf node.",[845,2881,2882,2887,2891,2895],{},[864,2883,2884],{"align":850},[867,2885,2886],{},"verbose",[864,2888,2889],{"align":850},[507,2890,1918],{},[864,2892,2893],{"align":850},[507,2894,1942],{},[864,2896,2897],{"align":850},"Print construction warnings and progress to console.",[845,2899,2900,2905,2909,2913],{},[864,2901,2902],{"align":850},[867,2903,2904],{},"setBoundingBox",[864,2906,2907],{"align":850},[507,2908,1918],{},[864,2910,2911],{"align":850},[507,2912,1923],{},[864,2914,2915],{"align":850},"Automatically set geometry bounding box after BVH construction.",[845,2917,2918,2923,2927,2931],{},[864,2919,2920],{"align":850},[867,2921,2922],{},"indirect",[864,2924,2925],{"align":850},[507,2926,1918],{},[864,2928,2929],{"align":850},[507,2930,1942],{},[864,2932,2933],{"align":850},"If false, creates and rearranges index buffer for better performance.",[2031,2935,2937],{"id":2936},"split-strategies","Split Strategies",[1638,2939,2940,2946,2952],{},[1641,2941,2942,2945],{},[867,2943,2944],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[1641,2947,2948,2951],{},[867,2949,2950],{},"AVERAGE"," - Balanced build time and runtime performance.",[1641,2953,2954,2957],{},[867,2955,2956],{},"CENTER"," - Fastest to build, slower at runtime.",[512,2959,2961],{"id":2960},"advanced-usage","Advanced Usage",[2031,2963,2965],{"id":2964},"fine-tuning-performance","Fine-tuning Performance",[504,2967,2968],{},"Adjust BVH construction parameters for your use case:",[516,2970,2973],{"className":2971,"code":2972,"language":554,"meta":476,"style":476},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","useBVH(\n  target,\n  {\n    splitStrategy: 'SAH', // Best runtime performance\n    maxDepth: 30, // Shallower tree (faster build)\n    maxLeafSize: 5, // Smaller leaves (better culling)\n    verbose: true, // Debug construction\n  }\n)\n",[507,2974,2975,2981,2988,2992,3011,3026,3041,3055,3059],{"__ignoreMap":476},[527,2976,2977,2979],{"class":529,"line":477},[527,2978,303],{"class":2114},[527,2980,2328],{"class":571},[527,2982,2983,2986],{"class":529,"line":478},[527,2984,2985],{"class":571},"  target",[527,2987,2349],{"class":532},[527,2989,2990],{"class":529,"line":521},[527,2991,2354],{"class":532},[527,2993,2994,2997,2999,3001,3004,3006,3008],{"class":529,"line":612},[527,2995,2996],{"class":536},"    splitStrategy",[527,2998,2102],{"class":532},[527,3000,581],{"class":532},[527,3002,3003],{"class":553},"SAH",[527,3005,2120],{"class":532},[527,3007,2072],{"class":532},[527,3009,3010],{"class":1089}," // Best runtime performance\n",[527,3012,3013,3016,3018,3021,3023],{"class":529,"line":633},[527,3014,3015],{"class":536},"    maxDepth",[527,3017,2102],{"class":532},[527,3019,3020],{"class":692}," 30",[527,3022,2072],{"class":532},[527,3024,3025],{"class":1089}," // Shallower tree (faster build)\n",[527,3027,3028,3031,3033,3036,3038],{"class":529,"line":643},[527,3029,3030],{"class":536},"    maxLeafSize",[527,3032,2102],{"class":532},[527,3034,3035],{"class":692}," 5",[527,3037,2072],{"class":532},[527,3039,3040],{"class":1089}," // Smaller leaves (better culling)\n",[527,3042,3043,3046,3048,3050,3052],{"class":529,"line":649},[527,3044,3045],{"class":536},"    verbose",[527,3047,2102],{"class":532},[527,3049,2365],{"class":2364},[527,3051,2072],{"class":532},[527,3053,3054],{"class":1089}," // Debug construction\n",[527,3056,3057],{"class":529,"line":659},[527,3058,2375],{"class":532},[527,3060,3061],{"class":529,"line":670},[527,3062,2128],{"class":571},[2031,3064,3066],{"id":3065},"first-hit-only-mode","First Hit Only Mode",[504,3068,3069],{},"When you only need the closest intersection (e.g., mouse picking):",[516,3071,3073],{"className":2971,"code":3072,"language":554,"meta":476,"style":476},"useBVH(\n  target,\n  {\n    firstHitOnly: true, // Uses raycastFirst internally\n  }\n)\n",[507,3074,3075,3081,3087,3091,3105,3109],{"__ignoreMap":476},[527,3076,3077,3079],{"class":529,"line":477},[527,3078,303],{"class":2114},[527,3080,2328],{"class":571},[527,3082,3083,3085],{"class":529,"line":478},[527,3084,2985],{"class":571},[527,3086,2349],{"class":532},[527,3088,3089],{"class":529,"line":521},[527,3090,2354],{"class":532},[527,3092,3093,3096,3098,3100,3102],{"class":529,"line":612},[527,3094,3095],{"class":536},"    firstHitOnly",[527,3097,2102],{"class":532},[527,3099,2365],{"class":2364},[527,3101,2072],{"class":532},[527,3103,3104],{"class":1089}," // Uses raycastFirst internally\n",[527,3106,3107],{"class":529,"line":633},[527,3108,2375],{"class":532},[527,3110,3111],{"class":529,"line":643},[527,3112,2128],{"class":571},[504,3114,3115],{},"This is significantly faster than computing all intersections when you only need one.",[512,3117,3119],{"id":3118},"important-notes","Important Notes",[1638,3121,3122,3128,3148,3154,3167],{},[1641,3123,3124,3127],{},[867,3125,3126],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[1641,3129,3130,3133,3134,3136,3137,3139,3140,696,3142,3144,3145,3147],{},[867,3131,3132],{},"Reactive options",": Only ",[507,3135,2716],{}," and ",[507,3138,2763],{}," are reactive. Construction options (",[507,3141,2829],{},[507,3143,2849],{},", etc.) are static - to apply new values, toggle ",[507,3146,2716],{}," off/on.",[1641,3149,3150,3153],{},[867,3151,3152],{},"Memory efficient",": BVH structures are properly disposed when removed.",[1641,3155,3156,3159,3160,3136,3163,3166],{},[867,3157,3158],{},"Automatic mesh detection",": Works with ",[507,3161,3162],{},"Mesh",[507,3164,3165],{},"SkinnedMesh"," instances.",[1641,3168,3169,3172],{},[867,3170,3171],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[512,3174,3176],{"id":3175},"performance-tips","Performance Tips",[3178,3179,3180,3186,3192,3198],"ol",{},[1641,3181,3182,3185],{},[867,3183,3184],{},"Use firstHitOnly"," when you only need the closest intersection",[1641,3187,3188,3191],{},[867,3189,3190],{},"SAH strategy"," gives best runtime performance for production",[1641,3193,3194,3197],{},[867,3195,3196],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[1641,3199,3200,3203],{},[867,3201,3202],{},"Enable debug mode"," during development to verify BVH coverage",[512,3205,3207],{"id":3206},"integration-with-usegltf","Integration with useGLTF",[504,3209,3210,3211,3213],{},"Perfect pairing with ",[507,3212,117],{}," for optimized model loading:",[516,3215,3217],{"className":518,"code":3216,"language":523,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { useBVH, useGLTF } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/high-poly-model.glb', {\n  draco: true\n})\n\nuseBVH(\n  () => model.value?.scene,\n  { splitStrategy: 'SAH' }\n)\n\u003C/script>\n",[507,3218,3219,3239,3261,3265,3297,3307,3313,3317,3323,3341,3360,3364],{"__ignoreMap":476},[527,3220,3221,3223,3225,3227,3229,3231,3233,3235,3237],{"class":529,"line":477},[527,3222,533],{"class":532},[527,3224,537],{"class":536},[527,3226,541],{"class":540},[527,3228,544],{"class":540},[527,3230,547],{"class":532},[527,3232,550],{"class":532},[527,3234,554],{"class":553},[527,3236,550],{"class":532},[527,3238,559],{"class":532},[527,3240,3241,3243,3245,3247,3249,3251,3253,3255,3257,3259],{"class":529,"line":478},[527,3242,565],{"class":564},[527,3244,568],{"class":532},[527,3246,2075],{"class":571},[527,3248,2072],{"class":532},[527,3250,2069],{"class":571},[527,3252,575],{"class":532},[527,3254,578],{"class":564},[527,3256,581],{"class":532},[527,3258,607],{"class":553},[527,3260,587],{"class":532},[527,3262,3263],{"class":529,"line":521},[527,3264,646],{"emptyLinePlaceholder":484},[527,3266,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285,3287,3290,3292,3294],{"class":529,"line":612},[527,3268,2094],{"class":540},[527,3270,568],{"class":532},[527,3272,2099],{"class":536},[527,3274,2102],{"class":532},[527,3276,2105],{"class":571},[527,3278,2108],{"class":532},[527,3280,2111],{"class":532},[527,3282,2069],{"class":2114},[527,3284,2117],{"class":571},[527,3286,2120],{"class":532},[527,3288,3289],{"class":553},"/models/high-poly-model.glb",[527,3291,2120],{"class":532},[527,3293,2072],{"class":532},[527,3295,3296],{"class":532}," {\n",[527,3298,3299,3302,3304],{"class":529,"line":633},[527,3300,3301],{"class":536},"  draco",[527,3303,2102],{"class":532},[527,3305,3306],{"class":2364}," true\n",[527,3308,3309,3311],{"class":529,"line":643},[527,3310,2108],{"class":532},[527,3312,2128],{"class":571},[527,3314,3315],{"class":529,"line":649},[527,3316,646],{"emptyLinePlaceholder":484},[527,3318,3319,3321],{"class":529,"line":659},[527,3320,303],{"class":2114},[527,3322,2328],{"class":571},[527,3324,3325,3327,3329,3331,3333,3335,3337,3339],{"class":529,"line":670},[527,3326,2334],{"class":532},[527,3328,2141],{"class":540},[527,3330,2144],{"class":571},[527,3332,1656],{"class":532},[527,3334,2149],{"class":571},[527,3336,2152],{"class":532},[527,3338,2213],{"class":571},[527,3340,2349],{"class":532},[527,3342,3343,3346,3349,3351,3353,3355,3357],{"class":529,"line":713},[527,3344,3345],{"class":532},"  {",[527,3347,3348],{"class":536}," splitStrategy",[527,3350,2102],{"class":532},[527,3352,581],{"class":532},[527,3354,3003],{"class":553},[527,3356,2120],{"class":532},[527,3358,3359],{"class":532}," }\n",[527,3361,3362],{"class":529,"line":735},[527,3363,2128],{"class":571},[527,3365,3366,3368,3370],{"class":529,"line":746},[527,3367,636],{"class":532},[527,3369,537],{"class":536},[527,3371,559],{"class":532},[512,3373,3375],{"id":3374},"troubleshooting","Troubleshooting",[2031,3377,3379],{"id":3378},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[1638,3381,3382,3385,3392],{},[1641,3383,3384],{},"Ensure meshes have valid geometry with position attributes",[1641,3386,3387,3388,3391],{},"Check console with ",[507,3389,3390],{},"verbose: true"," to see which meshes are skipped",[1641,3393,3394,3395,3398,3399,3401],{},"Verify the object is an ",[507,3396,3397],{},"Object3D"," (use ",[507,3400,2185],{}," in templates)",[2031,3403,3405],{"id":3404},"performance-not-improving","Performance not improving",[1638,3407,3408,3414,3420,3423],{},[1641,3409,3410,3411,3413],{},"Enable ",[507,3412,2807],{}," if you only need one intersection",[1641,3415,3416,3417,3419],{},"Try different split strategies (",[507,3418,3003],{}," is usually best)",[1641,3421,3422],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[1641,3424,3425],{},"Consider LOD for very distant objects",[889,3427,3428],{},"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 .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}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":476,"searchDepth":477,"depth":478,"links":3430},[3431,3432,3437,3442,3446,3447,3448,3449],{"id":2007,"depth":478,"text":2008},{"id":514,"depth":478,"text":15,"children":3433},[3434,3435,3436],{"id":1480,"depth":521,"text":2033},{"id":2229,"depth":521,"text":2230},{"id":2390,"depth":521,"text":2391},{"id":1814,"depth":478,"text":1815,"children":3438},[3439,3440,3441],{"id":2720,"depth":521,"text":2721},{"id":2777,"depth":521,"text":2778},{"id":2936,"depth":521,"text":2937},{"id":2960,"depth":478,"text":2961,"children":3443},[3444,3445],{"id":2964,"depth":521,"text":2965},{"id":3065,"depth":521,"text":3066},{"id":3118,"depth":478,"text":3119},{"id":3175,"depth":478,"text":3176},{"id":3206,"depth":478,"text":3207},{"id":3374,"depth":478,"text":3375,"children":3450},[3451,3452],{"id":3378,"depth":521,"text":3379},{"id":3404,"depth":521,"text":3405},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":303,"description":3453},"j_yBTwISSBvt9p_jtL1KmVLzoSoFUX_NTuLQBbuRDIs",1774953659112]