aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.68k stars 3.97k forks source link

Object stutters/bounces on click. #4275

Open MichaelJCole opened 5 years ago

MichaelJCole commented 5 years ago

Description:

I am having a problem with the sun in this pocket universe:

https://michaeljcole.github.io/n-body-wasm-webvr/

Moving the cursor to point at the sun (turns green) should cause 10 "debris" to be spawned and start their spinny lives.

The sun is created here

That code says stars get some extra events.
The declared events (turning green) don't prompt the bounce. The debris-listener doesn't change the location of the star.

When the debris listener fires on Chrome the sun bounces down then back. It's an anti-immersion artifact :-)

On Firefox for Android, when this happens there is a single frame with just the green sun. All the other bodies in the parent collection are not rendered. Only the green sun, dropped halfway down to the plane but not resized. The elements outside that collection (sign, plane, camera) appear undisturbed.

This was a fun demo to put together. Creating scenes in Aframe is much more fun than passing arrays in WebAssembly :-)

Any ideas how to prevent this stutter?

MichaelJCole commented 5 years ago

Hey, I found a bug in my code that might explain this. Will re-open if it's still an issue.

MichaelJCole commented 5 years ago

Ok, I thought I found the bug for this in my code, but didn't.

Here's how I'm reproducing this:

1) gli clone, npm install, npm run dev, open in chrome 2) set a breakpoint at nBodyVisualizer.js:65, htmlElement.innerHTML += <a-sphere blah 3) reload and the breakpoint is triggered 4) set another breakpoint on line 54 removeChild() This is the only place I'm removing objects from the scene. If the debris is flying away, we can stop tracking it. 5) Now, the scene should still be waiting to start at line 65.
From here, I'm stepping through the code and watching the scene. 6) Continue 4 times to get the bodies in motion. 7) use the mouse to drag the blue circle to the yellow sun 8) sun turns green and a moment or two later, the breakpoint is triggered. 9) start STEPPING OUT of the functions

Eventually, you get to a scene with just the green sun, and the breakpoint for removeChild() is never triggered.

That's why I think it's a bug in Aframe, but I'm happy to be wrong if you can prove it :-)