two canvas elements , 3d and 2d

[none-9999]

I have 2 elements canvas one for babylonjs (3d) and another for the GUI, although the events do not reach the 3d canvas

escena.onPointerDown = function (evt) {
        console.log("click over scene, not succes");
        var pickResult = escena.pick(escena.pointerX, escena.pointerY);
        //console.log(pickResult);
        if(pickResult.hit){
            console.log("click en "+pickResult.pickedMesh.name);
            mensaje = pickResult.pickedMesh.name;
        }
        
    }
        window.addEventListener("click",function(evt){

        var pickResult = escena.pick(escena.pointerX, escena.pointerY);
        console.log("click over window");
        if(pickResult.hit){
            console.log("click en "+pickResult.pickedMesh.name);
            mensaje = pickResult.pickedMesh.name;
        }
        
    });

mi html :

 

<canvas id="canvas1">hola</canvas>
        <canvas id="canvasGui" class="c2">hola2</canvas>

css

 

#canvas1{
        width   : 100%;
        height  : 100%;
        touch-action: none;
        z-index: 9;
    }
   
    
    .c2{
/*canvas 2, for GUI*/
        position: absolute;
        top: 0px;
        left: 0px;
        width   : 100%;
        height  : 100%;
        touch-action: none;
        z-index: 99999999;
        display:block;
    }

 

[brianzinn]

Does this work instead of using onPointerDown, so subscribing to it?

escena.onPointerObservable.add(function (evt) {
      if (evt.pickInfo.hit && evt.pickInfo.pickedMesh !== undefined) {
        let mesh = evt.pickInfo.pickedMesh
       
        console.log('click on:', mesh.name)
      }
    }, BABYLON.PointerEventTypes.POINTERDOWN)

Looks like you got your code from here (https://doc.babylonjs.com/tutorials/picking_collisions), but I've had good luck in 3D using onPointerObservable.add(...).  Make sure escena is for the 3D canvas in code sample.

[none-9999]

hi, thanks.

i have other problem.

 

function Init(){
    if (/Mobi/.test(navigator.userAgent)) {isMobile = true;}else {isMobile = false;}
    
    if(isMobile){
        if (screenfull.enabled) {
            //screenfull.request();
        }
    }
    console.log(canvas.width);
    console.log(canvas.height);
    
    motor = new BABYLON.Engine(canvas, true);
    escena = new BABYLON.Scene(motor);

    motor.setEnableOfflineSuport=false;

    terreno = BABYLON.MeshBuilder.CreateGround("gd", {width: 40, height:40,subdivsions: 40}, escena);

    crearMateriales();

    //caja1 = new BABYLON.Mesh.CreateBox("Bo1x",4.0,escena);
    escena.clearColo = new BABYLON.Color3.White();
    //camaravr = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 0.30, 0), escena);
    camaravr = new BABYLON.VRDeviceOrientationFreeCamera("DevOr_camera", new BABYLON.Vector3(0, 0.5, 0), escena);

    // This targets the camera to scene origin
    camaravr.setTarget(new BABYLON.Vector3(0, .30, 300));

    // This attaches the camera to the canvas
    camaravr.attachControl(canvas, true);

    camara = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0.30, 0), escena);
    //camara = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3.Zero(), escena);
    //camara.setPosition(new BABYLON.Vector3(0,0.3,0));
    //camara.setTarget(BABYLON.Vector3.Zero());
    if(isMobile){
        escena.activeCamera = camaravr;
    }else{
        escena.activeCamera = camara;
    }
    
    camara.attachControl(canvas,true);
    
    camara.keysUp.push(87);
    camara.keysDown.push(83);
    camara.keysLeft.push(65);
    camara.keysRight.push(68);
    
    //ray = new BABYLON.Ray(camara.globalPosition, camara.getTarget().subtract(camara.globalPosition).normalize(),50);
    
   
    //caja2 = new BABYLON.Mesh.CreateBox("Box2",4.0,escena);
    mat1= new BABYLON.StandardMaterial("mat1",escena);
    mat2= new BABYLON.StandardMaterial("mat1",escena);
    //mat1.diffuseColor = new BABYLON.Color3(.1,.8,.3);
    //mat1.emmissiveColor = new BABYLON.Color3(1,1,.3);
    //mat1.specularColor = new BABYLON.Color3(0,1,1);
    mat1.diffuseTexture = new BABYLON.Texture("tierra.png", escena);
    mat2.diffuseTexture = new BABYLON.Texture("tex_arbol5.png", escena);
    //mat1.bumpTexture = new BABYLON.Texture("tierra_normal.jpg", escena);
    //mat1.wireframe = true;
    terreno.material = mat1;
    //caja1.material = mat1;
    //caja1.material.alpha = 0.2;
    //caja1.position = new BABYLON.Vector3(0,0,0);
    
    luz_punto=new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 3, 0), escena);
    luz_punto.diffuse = new BABYLON.Color3(1, 1, 1);
    luz_punto.specular = new BABYLON.Color3(0, 0, 0);
    luz_punto.intensity = 100.0;
    
    escena.actionManager = new BABYLON.ActionManager(escena);
    escena.actionManager.registerAction(new BABYLON.ExecuteCodeAction({trigger:BABYLON.ActionManager.OnKeyUpTrigger, parameter : "t"}, function(){luz_punto.setEnabled(!luz_punto.isEnabled());}));
    //fin de register action
    //luz_spot = new BABYLON.SpotLight("luz2", new BABYLON.Vector3(2,10,2),new BABYLON.Vector3(0,-1,0), BABYLON.Tools.ToRadians(45), 0.1, escena);
    luz_spot = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), escena);
    luz_spot.diffuse = new BABYLON.Color3(1,.5,1);
    luz_spot.specular = new BABYLON.Color3(1, 1, 1);
    luz_spot.intensity =1000;
    //luz_punto.parent = camara;
    
	
	//plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 0.5}, escena);
    if(window.innerWidth > window.innerHeight){
        //esta horizontal
        canvas2 = new BABYLON.ScreenSpaceCanvas2D(escena, {
            id: "ScreenCanvas",
            designSize: new BABYLON.Size(960, 540),
            designUseHorizAxis: true,
            backgroundBorder: "#00F000FF"
        });
        ancho=960;
        alto=540;
    }else{
        canvas2 = new BABYLON.ScreenSpaceCanvas2D(escena, {
            id: "ScreenCanvas",
            designSize: new BABYLON.Size(540, 960),
            designUseHorizAxis: true,
            backgroundBorder: "#00F000FF"
        });

        ancho=540;
        alto=960;
    }
	


	mensaje = new BABYLON.Text2D("Busca un mostro ", {
                id: "text",
                marginAlignment: "h: center, v:center",
                fontName: "12px Arial",
            })
	rect = new BABYLON.Rectangle2D(
        {   parent: canvas2, id: "button2", x: 210, y: 100, width: 100, height: 40, 
            fill: "#4040C0FF", roundRadius: 10, isVisible: true, 
            children: [mensaje]
        });
  
    rect.actionManager = new BABYLON.ActionManager(escena);
    rect.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function (evt) {
        alert('player clicked');
    }));


    escena.onPointerObservable.add(function (evt) {
      if (evt.pickInfo.hit && evt.pickInfo.pickedMesh !== undefined) {
        let mesh = evt.pickInfo.pickedMesh
       
        console.log('click on:', mesh.name)
      }
    }, BABYLON.PointerEventTypes.POINTERDOWN);

The click event does not fire on the rectangle, but on the (as shown in the graph)

Is that there is no clarity about how a 2d canvas is resized with respect to the user's screen, I think the problem originates there.

 

 

[brianzinn]

The only times that I've had the clicking "off" was that my computer was misconfigured.  So, the clicking was accurate on my monitor, but not on my laptop screen.  I had my resolution too high (NVidia 840M) and the clicks where off by the same factor, so I dropped the resolution down to 1920x1080 and the clicks were working.  So, it may be something besides a code issue.

Try doing something like this to see if you have what I had.

targetMesh.actionManager = new ActionManager(scene)
targetMesh.actionManager.registerAction(new SetValueAction(ActionManager.OnPointerOutTrigger, targetMesh, 'visibility', 0.3))
targetMesh.actionManager.registerAction(new SetValueAction(ActionManager.OnPointerOverTrigger, targetMesh, 'visibility', 1.0))

If the mouse pointer is accurate on that object, the target mesh will hide when your mouse leaves it (and show when you are over it).  Otherwise try navigating to other parts of the canvas to "hide" the targetMesh and seeing if you are "off" somehow.  If you can put that code on all the trees in your scene, for example.  I realise that is not very scientific, but it was how I discovered the issue in my situation.

Pointer down events being incorrect are hard to track down.  I was always off by the same factor, so ie: hovering 5cm up and 3cm left of my target was working.  Then I lowered my screen resolution to resolve, but it is not a proper solution obviously. Hope that helps.  Hopefully others can share their clicking events not firing where they are expected to be stories.

 

You mention the Canvas2D being resized, but if your screen was resized then you can hook onto that event as well and maybe need to look at the effect that has.  I'm not using Canvas2D.
window.addEventListener('resize', this.onResizeWindow).

[none-9999]

hi, its show this error :

Uncaught ReferenceError: SetValueAction is not defined

 

changed to 

mensaje = new BABYLON.Text2D("Busca un mostro ", {
                id: "text",
                marginAlignment: "h: center, v:center",
                fontName: "12px Arial",
            })
	rect = new BABYLON.Rectangle2D(
        {   parent: canvas2, id: "button2", x: 210, y: 100, width: 100, height: 40, 
            fill: "#4040C0FF", roundRadius: 10, isVisible: true, 
            children: [mensaje]
        });
  rect.actionManager = new BABYLON.ActionManager(escena);
        rect.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, this, 'visibility', 0.3));
        rect.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, this, 'visibility', 1.0));

    
    rect.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function (evt) {
        alert('player clicked');
    }));

and on over event :

 

Uncaught TypeError: t.isValid is not a function
    at t._executeCurrent (babylon.js:21)
    at t.processTrigger (babylon.js:21)
    at r.n._triggerActionManager (babylon.js:26250)
    at r.n._bubbleNotifyPrimPointerObserver (babylon.js:26250)
    at babylon.js:26250
    at r.n._updateOverStatus (babylon.js:26250)
    at r.n._handlePointerEventForInteraction (babylon.js:26250)
    at e.callback (babylon.js:26250)
    at e.notifyObservers (babylon.js:2)
    at HTMLCanvasElement._onPointerMove (babylon.js:11)

not over element, above

[none-9999]

amolst : 

 

code :

 

 if(window.innerWidth > window.innerHeight){
        //esta horizontal
        canvas2 = new BABYLON.ScreenSpaceCanvas2D(escena, {
            id: "ScreenCanvas",
            designSize: new BABYLON.Size(960, 540),
            designUseHorizAxis: true,
            backgroundBorder: "#00F000FF"
        });
        ancho=960;
        alto=540;
    }else{
        //esta vertical

        canvas2 = new BABYLON.ScreenSpaceCanvas2D(escena, {
            id: "ScreenCanvas",
            designSize: new BABYLON.Size(540, 540),
            designUseHorizAxis: false,
            backgroundBorder: "#00F000FF"
        });

        ancho=540;
        alto=960;
    }
	
mensaje =new BABYLON.Text2D("Busca un mostro ", {
                id: "text",
                marginAlignment: "h: center, v:center",
                fontName: "12px Arial",
            });

rect = new BABYLON.Rectangle2D({
        id: "mainRect",
        parent: canvas2,
        width: 100,
        height: 100,
        fill: "#FF0000FF",
        origin: new BABYLON.Vector2(0, 0), //doesn't change anything
        marginAlignment: "v: center, h: center",
        children:[mensaje]
    });
    

    rect.actionManager = new BABYLON.ActionManager(escena);
          
    rect.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function (evt) {
        alert('player clicked');
    }));

result : 

 

 

[brianzinn]

The reason that I suggested to try with hovering is that you can see if the BabylonJS is interpreting is as a Pointer Over event and it is off by a certain amount always (offset).  I only figured it out by using BABYLON.SetValueAction instead of BABYLON.ExecuteCodeAction, because that was clearly showing that is was an issue with my graphics card.  It was driving me insane, because it was not a code problem, but a configuration problem.

Have you tried with another computer or with lower resolution?

[none-9999]

hace 16 minutos, brianzinn dijo:

La razón por la que he sugerido para tratar con Al pasar es que se puede ver si el BabylonJS está interpretando es como un evento de puntero por encima y es apagado por una cierta cantidad siempre (offset). Sólo averiguado mediante el uso de  BABYLON.SetValueAction en lugar de BABYLON.ExecuteCodeAction, debido a que mostraba claramente que es era un problema con mi tarjeta gráfica. Me estaba volviendo loco, porque no era un problema de código, sino un problema de configuración.

¿Has probado con otro ordenador o con la resolución más baja?

BABYLON.SetValueAction : trigger error

some (or all) in this lines given the conflict

designSize: new BABYLON.Size(540, 960),
            designUseHorizAxis: true,
            enableInteraction: true,
            renderScaleFactor: 8,

 

[brianzinn]

Peudes probar esta PG? http://www.babylonjs-playground.com/#FUBQR2

 

[none-9999]

15 hours ago, brianzinn said:

Peudes probar esta PG? http://www.babylonjs-playground.com/#FUBQR2

 

same, the problem is joint 3d and 2d canvas, i will use dom elements to GUI, thanks

[brianzinn]

I don't know your whole scenario, but if you put 2D and 3D on the same canvas they should be able to be used together.  I started out with DOM elements and it's a lot of work moving everything into the canvas.  I've been reading that DOM doesn't work as well on mobile, if that is one of your target platforms.  If you can make a PG on the playground then people will be able to help you.  Good luck.

[none-9999]

38 minutes ago, brianzinn said:

I don't know your whole scenario, but if you put 2D and 3D on the same canvas they should be able to be used together.  I started out with DOM elements and it's a lot of work moving everything into the canvas.  I've been reading that DOM doesn't work as well on mobile, if that is one of your target platforms.  If you can make a PG on the playground then people will be able to help you.  Good luck.

many thanks, private project, now i have a problem with sight to ray casting, when VR is activate

 

 

[brianzinn]

I would start a new topic with a matching subject - doesn't look like anybody is paying attention to this one!  I'm just getting into VR cameras now.  I'm curious how you are testing on your 3d through localhost.  I use the remote debugging with port forwarding built into chrome for Android.

[none-9999]

8 minutes ago, brianzinn said:

I would start a new topic with a matching subject - doesn't look like anybody is paying attention to this one!  I'm just getting into VR cameras now.  I'm curious how you are testing on your 3d through localhost.  I use the remote debugging with port forwarding built into chrome for Android.

 

aquí,

I can not configure remote debug in chrome

 

 

i tested it in samsung galaxy s7, same problem

[brianzinn]

did you give this a try: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server