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