Marko82 Posted January 20, 2020 Share Posted January 20, 2020 Hi Everyone, I have been working on the project involving WebXR, using ThreeJs and Gsap 3. And I have notice that when you initialize webXR session (clicking on 'Enter VR' button) update of Gsap's timelines just stops. They mention in How to create VR content on ThreeJs' website that you need to call setAnimationLoop() from their renderer and to pass callback and that you can't use window.requestAnimationFrame() function (I need to investigate this topic more). The problem was solved calling gsap.ticker.tick() from the callback function. For testing, I have added listener to gsap.ticker and it was working fine when webXR session is not initialized. Is there a better method to update gsap timelines, and am I missing something? I used Oculus Quest for headset and Oculus Browser which is based on Chromium. Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 20, 2020 Share Posted January 20, 2020 Hey Marko and welcome to the GreenSock forums! Thanks a lot for being a Business Green member, we couldn't do what we do without people like you. Can you please create a minimal example that produces this error? We'd like to figure out exactly what's going on and if we can do anything to get around it. Link to comment Share on other sites More sharing options...
ManuGarcia Posted March 2, 2021 Share Posted March 2, 2021 I currently have the same problem, when I enter the VR immersion, the timelines stop and when I exit the VR immersion to the internal browser of the Quest these timelines continue playing, this does not happen if it is entered from the Firefox browser for quest. happens in quest one and two. look this videos:(Quest Broswer) https://youtu.be/Ajrj8TnF-mg (Filezilla Virtual Firefox) https://youtu.be/_asBfxb9xDk Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 2, 2021 Share Posted March 2, 2021 Hey @ManuGarcia and welcome to the GreenSock forums. I'm not sure how we can help given the lack of information. Can you debug to find what piece of code is causing it to error? What error message is it giving? Link to comment Share on other sites More sharing options...
ManuGarcia Posted March 2, 2021 Share Posted March 2, 2021 You can test the page at the following link: https://storage.googleapis.com/webaframe/index.html here I call the library these lines move the totems up I had not noticed the error until today, I had been working with a htc ViVe, until they noticed the error, today I got the Quest to debug, but I don't know very well how to do it, I'm working on it Link to comment Share on other sites More sharing options...
ManuGarcia Posted March 2, 2021 Share Posted March 2, 2021 I was able to debug it, it doesn't show errors, the timelines just don't run in vr mode. (Here they show how to debug quest browsers: https: //developer.oculus.com/documentation/oculus-browser/browser-remote-debugging/) Link to comment Share on other sites More sharing options...
GreenSock Posted March 3, 2021 Share Posted March 3, 2021 Have you verified that you're actually calling gsap.ticker.tick() 60-ish times per second in that mode? And does the value of Date.now() update properly too? It sounds like maybe a browser/environment issue is preventing one or both of those from happening. 2 Link to comment Share on other sites More sharing options...
ManuGarcia Posted March 3, 2021 Share Posted March 3, 2021 So sync gsap.ticker with aframe tick <script> AFRAME.registerComponent('fps30component', { init: function () { this.tick = AFRAME.utils.throttleTick(this.tick, 30, this); }, tick: function (time, delta) { gsap.ticker.tick(delta); } }); </script> <a-scene fps30component> 1 Link to comment Share on other sites More sharing options...
11898_1494126573 Posted September 29, 2021 Share Posted September 29, 2021 I had similar problem with ThreeJS and adding ```gsap.ticker.tick(delta)``` to the render function made gsap functional in Oculus browser and Samsung Internet Beta browser ``` function render(t, frame) { delta = clock.getDelta(); gsap.ticker.tick(delta); /* update code */ renderer.render(scene, camera); } ``` Link to comment Share on other sites More sharing options...
Cyango Posted January 19 Share Posted January 19 I bumped into this post because I wanted to make sure gsap works in immersive mode with WebXR. Because the browser cancels any rAF and uses it's own vr session raF. Is it compatible? Link to comment Share on other sites More sharing options...
GreenSock Posted January 19 Share Posted January 19 Can you please provide a minimal demo (like a CodePen or Stackblitz) that clearly illustrates the issue? GSAP falls back to using setTimeout() if requestAnimationFrame is not available. You could also set up your own loop and gsap.updateRoot() with the time accordingly. Link to comment Share on other sites More sharing options...
Cyango Posted January 19 Share Posted January 19 Hi, can it be codesandbox? Here i have put a demo: https://codesandbox.io/p/sandbox/natuerlich-spatial-ui-example-forked-hhg6h9 You might need to install the WebXR plugin for chrome if you don't have any VR headsets. Then just click VR button. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 19 Share Posted January 19 Hi, If you add this to your app file: useGSAP(() => { console.log("current GSAP frame", gsap.ticker.frame); setTimeout(() => console.log("current GSAP frame", gsap.ticker.frame), 100); }); You'll see that both logs are more than zero, that means that the GSAP Ticker is actually running, which means you could use GSAP in this particular project. If you have a specific GSAP related issue, remember to include your GSAP specific code. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Cyango Posted January 20 Share Posted January 20 Have you tried it in a VR headset or with WebXR chrom plugin (https://chromewebstore.google.com/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje) ? Because is there that it fails, because raf plays differently inside a XRsession, see here: https://developer.mozilla.org/en-US/docs/Web/API/XRSession/requestAnimationFrame Link to comment Share on other sites More sharing options...
GreenSock Posted January 21 Share Posted January 21 It would be super helpful if you could just create the most minimal, basic demo in Stackblitz that illustrates the issue. The link you provided has a lot of different files and it isn't at all clear (to me at least) what you're asking, which file you're talking about, how to reproduce the problem, etc. I noticed that you've got duration: 500 on an animation and I wonder if you thought that durations were in milliseconds (they're in seconds), so perhaps you meant duration: 0.5? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now