Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Using Gsap3 with WebXR

Recommended Posts

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

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

  • 1 year later...

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

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

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

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

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. 

  • Like 2
Link to comment
Share on other sites

So sync gsap.ticker with aframe tick
            AFRAME.registerComponent('fps30component', {
              init: function () {
                this.tick = AFRAME.utils.throttleTick(this.tick30this);
              tick: function (timedelta) {
<a-scene fps30component>
  • Like 1
Link to comment
Share on other sites

  • 6 months later...

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();
 /*  update code */
 renderer.render(scene, camera);


Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.