solved Selecting mesh without gamepads and controllers

[oschakravarthi]

Hi,

 

My application should be able to work just with a mobile in a simple cardboard which has no controllers, gamepads and buttons. The user should be able to select meshes. So, the only way to select a mesh is by not moving camera from it for some time (lets say 3 seconds). During this time, the gaze should show a progress bar or a rotating circle. 

How can I achieve this? Struggling for more than a week on this. In three.js it is just one line of code. Can you please help me on this?

Thanks in advance.

[kcoley]

@trevordev, can you take a look?

[trevordev]

See this playground https://www.babylonjs-playground.com/#Q1VRX3#12 . Getting the forward ray from the webVR helper is a little weird but after getting that you can check to see if an object his hit by the ray, if it is, start incrementing some value or starting a timer. When it reaches the timeout value run your click logic. Let me know if that doesn't work.

[brianzinn]

This is a lot more than 1 line of code, but works well with cardboard.
https://www.babylonjs-playground.com/#ZGNHW1

That PG is from the very earliest days even before the VR Experience Helper.  From the reply from trevordev, it does not look like the VR Experience Helper has built-in support for cardboard gaze.  Also, the cardboard does have a button, at least the one from google

[oschakravarthi]

Thanks a lot  @trevordev and @brianzinnExcellent solutions. Now I am understanding the internals of BabylonJS. Very interesting

[oschakravarthi]

Hi,

Now we implemented a mini version of VRExperienceHelper to achieve this. We have implemented our own gaze pointer. This pointer is not stopping on components like GUI buttons. It is going beyond.

Any clue?

[Guest]

Hello do you call simulatePointerDown and so on?

[oschakravarthi]

Hi @Deltakosh

Thanks for your response.

I am doing something like this.

 

At the creation of the scene, I am creating rat target mesh.

I am creating vrExperienceHelper just to get the VR button in the bottom of the webpage to switch to VR mode. As I don't have any controllers or gamepads, I cannot perform anything more with vr helper.

 var rayTargetMesh = createRayTargetMesh();'

var vrHelper = scene.createDefaultVRExperience();
            vrHelper.enableInteractions(); // No controllers. so it is useless.
            vrHelper.displayLaserPointer = true;
            vrHelper.displayGaze = true;

 

function createRayTargetMesh() {
    var target = BABYLON.Mesh.CreatePlane("targetViewVR");
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(target, 2048, 2048);
    var circle = new BABYLON.GUI.Ellipse();
    circle.width = "50px";
    circle.color = "white";
    circle.thickness = 15;
    circle.height = "50px";
    advancedTexture.addControl(circle);
    target.scaling = new BABYLON.Vector3(1, 1, 1);
    target.isPickable = false;
    return target;
}

//gui panel is of type BABYLON.GUI.CylinderPanel

//All the controls of this panel are of type BABYLON.GUI.HolographicButton

 

scene.registerBeforeRender(function () {

  var camera = vrHelper.currentVRCamera; //As we dont know which camera is active, I always set parent of my   rayTargetMesh to the current camera.
  rayTargetMesh.parent = camera;
  rayTargetMesh.position.z = 1.1;

 var ray = camera.getForwardRay();

if (guiPanel.children.length > 0) {
        guiPanel.children.forEach(function (c) {
            var pickingInfo = ray.intersectsMesh(c.mesh);
            if (pickingInfo.hit) {
                var pickedMesh = pickingInfo.pickedMesh;

                if (pickedMesh) {
                    ///Clicked on c
                    return;
                }
            }
        });
    }

});

[Guest]

I would need to see a live repro on the PG to help

[oschakravarthi]

Hi all,

With your great support, I have extended the functionality of VRExperienceHelper (taken from babylon.max.js). Added new feature "enableCardboardMode".

I am attaching both the files. Someone may find it useful.

 

Thank you all for your support.

VRExperienceHelper.js

XVRExperienceHelper.js