GUI issue with raycast

[hulahula]

Hello all

Sorry for my bad english in advance .

I have a littel issue with GUI and I want to understand why it  works like taht .

What is the issue ?

I made this  function  :

function vecToLocal (vector, mesh){
 var m = mesh.getWorldMatrix();
 var v = BABYLON.Vector3.TransformCoordinates(vector, m);
 return v;
}

class Raycast {
  constructor() {


}
  doorOpener(letHit, myGUI, scene){
    this.scene = scene;

      var origin = player.position;

      var forward = new BABYLON.Vector3(  0, 0, 1,);
          forward = vecToLocal(forward, player);

      var direction = forward.subtract(origin);
          direction = BABYLON.Vector3.Normalize(direction);

      var length = 1.5;

      var ray = new BABYLON.Ray(origin, direction, length);
      
      var hit = this.scene.pickWithRay(ray);

      if (hit.pickedMesh == letHit){
          
         if (control.keys.ePress == 1){
             scene.beginAnimation(letHit, 0, 40, false);
           }

          return myGUI.isVisible = 1


      }else {

        return  myGUI.label.isVisible = 0;

      }




  }

}

 

This function is responsible to opening doors. When player reach a door then GUI  shows up which key(E) on keyboard must be pressed for open the door but  the GUI only works  whith one door .  Here is how I call Raycast function : 

 

const view = require('./ray.js');
const panelG=  require('./gui.js');

class Leves {
 constructor(scene,camera,followCam,canvas) {
  this.scene = scene;
  
    GuiP = new panelG.GuiP (scene);
    doo = new view.Ray ();


        BABYLON.SceneLoader.ImportMesh("", "textury/mapy/", "lvl01.babylon", this.scene,function (newMeshes) {


              var level_001 = newMeshes[0];
                  level_001.checkCollisions = true; 

              var door = newMeshes[1];
                  door.checkCollisions = true; 

              var door2 = newMeshes[2]              
                  door2.checkCollisions = true; 


                var openDoor = new BABYLON.Animation("t", "position.z", 25, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                var keys = [];
                   keys.push({
                       frame: 0,
                       value: 0.45
                   });

                   keys.push({
                       frame:5,
                       value: -1.5
                   });

                   keys.push({
                       frame: 10,
                       value: -3
                   });
                  keys.push({
                       frame: 30,
                       value: -3
                   });

                   keys.push({
                       frame: 35,
                       value: -1.5
                   });

                   keys.push({
                       frame: 40,
                       value: 0.45
                   });

                   openDoor.setKeys(keys);

                   door.animations.push(openDoor); 
                   door2.animations.push(openDoor);

               
               scene.registerBeforeRender(function () {
                         
                   doo.doorOpener (door, GuiP.panel, scene ); /*only animation works*/
                   doo.doorOpener( door2, GuiP.panel, scene); /* GUI and animation works very good */
                       
                       })

            })
          }
        }

I am newbie in babylonjs and javascript too   and I want to understand every aspect of babylon js and javascript.

 

[hulahula]

sorry I forgot  for exampel.... here you can try   :

https://playground.babylonjs.com/#VZRN2V

You can see in exampel GUI works with  blue Bigbox, but  with  green Bigbox doesn't works . Why it is so ?

[Wingnut]

Hiya A!  Perfect playground example... thanks for making it. 

https://playground.babylonjs.com/#VZRN2V#2

(WASD to drive the red "tank")  :)

Although I adjusted various crap... the problem was really with... needing another label.  So, now there is added label2 and text2 GUI controls.

Really, I think the problem might have been in the render loop... with the show variable.  SO... I think your picking ray work is PERFECT (nicely done)... but the label was refusing to turn-on... for green box.

You can study it more, try some different things.  I hope I have been helpful. 

We can talk more, if you like.  Maybe others will have good ideas for using the same label... esp for lines 123-128... show.isVisible area.  *shrug*  Might be an issue in there... with using same label. 

Stay tuned, report discoveries, good luck.

[hulahula]

Hello @Wingnut

Thank you for your answer... I very appreciate.

I was afraid that I will must use more then one label ?.....

...because in future I would like to make  five more  doors  and  more diffrent "labels" (G, F, Q - keys on keyboard)  in first level.

I am not sure  if It will be good for game performance  create custom labels for each door  

What is your opinion guys ?

[Wingnut]

My pleasure, Alenvei.  new version:

https://playground.babylonjs.com/#VZRN2V#4

Now, one label/door-menu, any number of doors.

Changes: 

-  Lines 33 and 43 - both doors are pushed into an array... called doors.

-  Label2 and Text 2 removed.

-  Line 90 - function renamed to doorsCheck, because... it checks ALL doors with just ONE call.  Rename as wanted, of course. 

-  Line 113 - extra IF is added.

-  Lines 118-120  -  the ELSE section is moved to NEW first IF... and removed from 2nd IF.  (ELSE section moved down a few lines)

-  Line 130  -  a SINGLE call to doorsCheck() with no params/args.  It checks ALL doors in doors[ ] array.

What do you think?  Will this work OK?  I hope so. 

There might be better ways.  I am not a pro coder.  Perhaps others will have more comments.  Party on!

[Wingnut]

Hi again.  I made some mistakes in doorsCheck()... in #4 playground.  Inefficiency.  SO... here's #5.

https://playground.babylonjs.com/#VZRN2V#5

Tighter.  Better.  :)

[hulahula]

Hi @Wingnut  ..... this is awesome it works perfectly and  I learned new things ...thank you very much  Wingnut  for me you are pro coder .

Guys I made  for  you playground,  which is similar with my game . You can find there  two rooms with doors. Go close to  the door when label ( with the letter E) shows up then press the E-key on keyboard and see the magic  

W,A,S,D keys  to control the RedBox.

Have fun:  https://playground.babylonjs.com/#VZRN2V#7

I changed this lines :

-Lines 26 -97 : only walls

-Lines 163 -194 and 219 : implementation animation for doors ;

-Lines 230 : executing animation for doors

 

Have nice day

 

[hulahula]

Hello again @Wingnut 

I found one issue but not with label and raycast. I have issue with animation of doors ... You can see  exampel in my last post. When  I turn on my  "game" everything works fine but after five minutes when I open door the FPS go like crazy and evrey minute  it's worse only with door animation.

I think the  raycast making this trabels but I'm not sure.

[Wingnut]

Hi Alenvei

   Here's a new one... https://playground.babylonjs.com/#VZRN2V#8

See line 221?  I disabled it.  Remember that doorsCheck() is called every frame.  It is called within a .registerBeforeRender func, and they RUN about 60 times per second.

So, you should not push another animation into mesh.animations array... every frame. 

That will cause a memory leak... as mesh.animations array gets longer and longer and longer.

So...  I added another FOR-loop in lines 196-198.  This adds ONE animation to each door in the doors[] array.

This way, we avoid forever-growing .animations array on each door.  Maybe this will prevent your slow-down-over-time problem.

I also did one minor adjustment to lines 252 and 246.

Test it out, see if it works better.  I hope so.  Be well.

[hulahula]

Thank you for lesson @Wingnut   it works perfectly .