aframe
aframe copied to clipboard
aframevr
Canvas does not update when in VR mode in Oculus Browser...
Description: I have been playing recently with Pdf. I am trying to render pdf pages onto canvas. It seems everything is working in Chrome browser, but it does not work in Oculus Browser (as soon as I enter VR mode). I used the following code:
AFRAME.registerComponent("update-texture", { init: function() { this.el.addEventListener("loaded", e => { const mesh = this.el.getObject3D("mesh"); this.texture = mesh.material.map }) }, tick: function() { if (this.texture) { this.texture.needsUpdate = true; } } })
As soon as I go to VR mode it shows the page loaded before going to VR mode. But when I click on next button, the page goes blank (white and then black). Is it something wrong with the Oculus Browser or it is associated with how canvas update works on AFrame?
- A-Frame Version: 1.2.0
- Platform / Device: Oculus Browser
- Reproducible Code Snippet or URL: https://myvr4.glitch.me/
dmarcos, I think it is not my case. The thing is that it shows canvas when first I enter VR mode. The problem happens when I try to update it, i.e. go to next page. It turns white. The same happens with zoom event. Any other suggestions?
How do you go to next page in 2D mode? Does it update in that case?
Just clicking next button triggers change of the page. Here is the link to the source of test project: https://glitch.com/edit/#!/myvr4?path=index.html%3A182%3A8. And here: https://myvr4.glitch.me/
I think pdf.js might be using window.requestAnimationFrame to render the document. In VR mode the browser doesn't call that function. Try calling the render function manually of pdf.js in a component tick method. Perhaps page.render but not familiarized with the API, sorry
If you end up calling render from a tick method I recommend throttling. You probably don't need to update the canvas at 72Hz / 90Hz or more (depending on headset)
@akbartus did you have a chance to try the proposed solution? Thanks so much!
@akbartus did you have a chance to try the proposed solution? Thanks so much!
@dmarcos thank you. No, unfortunately it did not work. On my Samsung Odyssey Headset it worked, but not Oculus. But I found a work around. I converted pdf pages to images and then used them as sources for a-image. I also made sure that it loads all images beforehand and made them hidden. Then, whenever user clicks on page change, it shows that page as visible.
I believe it was Explorer. I had another test, where I used live-canvas feature for painting, however the results are the same. It does update when not in VR mode. But when I go to VR mode and try to draw something, it does not update the canvas. I believe I used the suggested code as shown here: https://github.com/aframevr/aframe/blob/master/examples/test/canvas-texture/components/canvas-updater.js
If you end up calling render from a
tickmethod I recommend throttling. You probably don't need to update the canvas at 72Hz / 90Hz or more (depending on headset)
Checked this one as well, the same result. No update of a texture.
I think there's nothing to do here on A-Frame side. pdf.js relies on requestAnimationFrame that doesn't fire in immersive mode. That explains why it doesn't update in VR mode but does in 2D mode. I'm not familiar with the pdf.js API but solution should be creating a component and in the tick method call the update / render method (or whatever is called) of pdf.js