WebXRHand recreates mesh and shader on construction

[rgerd]

Repro

• Test a scene on HoloLens using BabylonNative, and inside the call to createDefaultXRExperienceAsync, call:

xr.baseExperience.featuresManager.enableFeature(
                        BABYLON.WebXRFeatureName.HAND_TRACKING,
                        "latest",
                        { xrInput: xr.input });

• Move your hands in and out of view, paying attention to the console, which will signal that shaders are being recompiled, and notice that performance dips considerably.

This is due to the following call in the WebXRHand constructor:

Babylon.js/src/XR/features/WebXRHandTracking.ts

Line 297 in 3a9e132

this._generateDefaultHandMesh();

Which causes a mesh import:

Babylon.js/src/XR/features/WebXRHandTracking.ts

Line 432 in 3a9e132

const loaded = await SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/HandMeshes/", filename, this._scene);

And a material compilation:

Babylon.js/src/XR/features/WebXRHandTracking.ts

Line 444 in 3a9e132

handShader.build(false);

We should be pre-loading the meshes and materials and enabling/disabling them as hands go in and out of view, instead of recreating them every time.