Inconsistent object blurriness and failure to recognize onPointerDown events

Questions
1

Brand new to babylon.js, so I’m likely missing something obvious here. I have a fairly simple (stylized hexagon) object that is extremely thin (1cm in Blender), loading through a Live Server extension in VS Code to a canvas and viewing on a Chrome browser with a Windows 10 machine. The hexagon is exported from Blender (which I’m also new to) using the Babylon.js exporter (so it is a .babylon file). No issues in that. There are two things I’m experiencing that I don’t quite understand why.

  1. Most of the time, this one little object shows up immediately in a sort of “edges blurred” state. It interacts in the sense that I can rotate my view and see it, I can apply color, material, etc. (I’ve been experimenting with that). It generally stays in this blurred state for a long time; usually only after I have left viewing the page for some period of time, then I sometimes come back to it and find a nicely rendered, crisp and clean view of my object. All of this #1 issue then relates to #2…

  2. In the blurred state, the object ignores the scene’s onPointerDown event I have checking for a mesh collision (and at the moment, just putting up an alert box of the mesh selected). When I do get the crisp rendering, the event works as expected.

So does anyone have an idea of what is happening and how to fix it?

2

Hello and welcome!

We need to see it but I feel like there is maybe a missing call to engine.resize() (that needs to be called every time the window is resized)

3

Thanks for the guess, but I have this in my code to handle that (with my engine scoped so it can be accessed):

window.addEventListener("resize", function () {
  engine.resize();
});
4

can you repro somewhere? like playground or jsfiddle?
also maybe a screenshot?

5

@Deltakosh Busy at the moment, but I’ll work something up and flag you when I post it. I’m a bit concerned that the issues may be in some way related to my environment, so not sure they will show up in a playground… but it is worth testing it there, I guess, to see if it has issues.

6

@Deltakosh So in working towards getting a playground set up, I discovered the solution (which was intimately tied to your guess of engine.resize()). So for documentation purposes here, what I was seeing 99% of the time was this degraded image (on the left) and no onPointerDown events function:

BlurryAndCrisp
BlurryAndCrisp1050×410 9.13 KB

Every once in a while I’d get a crisp image (on the right) and pointer events were working (it took me a number of hours to be able to capture that image).

But while working to put together a playground, I noticed some errors that I was not originally seeing on my end in my browser, and the culprit in the code was here:

async function runGame() {
  const mainScene = await createScene();

  engine.runRenderLoop(function () { //PROBLEM HERE AND ...
     mainScene.render();
  });
  //...NEEDED SOMETHING EXTRA HERE
}
runGame();

In short, my call to engine.runRenderLoop, since it was needing access to the mainScene, also should be asynchronously called, and then after that, I needed an extra call to engine.resize() to make sure the canvas was truly updated. Now maybe there is a better way to do that (if so, please do tell). But in short, the code that seems to now be consistently working is this:

async function runGame() {
  const mainScene = await createScene();

  await engine.runRenderLoop(function () { //await added here
    mainScene.render();
  });
  await engine.resize(); //resize call added here also with an await
}
runGame();

So thanks for the initial “guess,” as without that, I would not have probably noticed a behavior that lead me to the solution here. And again, if there is perhaps a more elegant way in babylon.js to have it do this (without the extraneous call to engine.resize() when the window was not really resized), please let me know.

7

You should be able to remove the last two await as runRenderLoop and resize don’t return a promise.

8

You should be able to remove the last two await as runRenderLoop and resize don’t return a promise.

Well… hmmm. Those were precisely (I thought) what was solving my issue. Note that using an await on a non-promise object causes it to be wrapped in a promise. I was using it for a secondary purpose to force those to wait for the mainScene to be fully prepared (as one await will wait until a prior on is complete before finishing). However, I took them back out on your advice and you were correct; it still works.

That fact that it worked had me confused for a split second, since I was sure those two awaits were what had solved my issue to begin with. Then I remembered that I had added an await to engine.runRenderLoop first, which “almost” solved my issue; I could consistently get good load if I manually resized after I had added that. Which lead me to put in the forced engine.resize() after it, which I assumed also had to be awaited so it did not execute too soon.

In short, I realize now that my bug resolution just needed the engine.resize() to be called period (after the runRenderLoop call)…

So thanks for that input.

1 Like