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