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