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