Issue encountered with updating canvas texture twice in A-Frame and pdf.js while operating in virtual reality mode

Question

Issue encountered with updating canvas texture twice in A-Frame and pdf.js while operating in virtual reality mode

Using the power of A-Frame and pdf.js, I embarked on a quest to build an incredible VR application for viewing PDF files. Everything seemed to be working seamlessly on my desktop - flipping through PDF pages, rendering them onto a canvas, it was a sight to behold.

However, the real challenge arose when I attempted to run the application in a VR-enabled browser, specifically on my trusty Quest 2. The first attempt went swimmingly, but when it came to rendering the second page of another document onto the canvas... well, let's just say things took a mysterious turn. The new image refused to show up until I decided to exit VR mode, at which point it magically appeared, much to my bewilderment.

I delved deep into the trenches, tirelessly setting the material map.needsUpdate again and again in an A-Frame component tick loop, only to be met with no avail. As I continued my experimentation, I made a curious observation - trying to render a new page of a PDF a second time and then attempting for a third time (taking the adventurous leap of advancing by two pages while in VR), only to find that upon exiting VR mode, the texture from the second attempt was the only one that stuck. It seemed like the data from the third render had vanished into thin air. I began to ponder if these anomalies were somehow interlinked to the core issue at hand.

For those brave souls who wish to venture forth, a snippet of code for a scaled-down demonstration is provided below. And should you dare to take on the challenge yourself, a live version awaits your exploration at . Feel free to scrutinize the example in desktop mode - advance to the next page by unfurling the browser JavaScript console and entering testBook.nextPage();, and witness the ever-changing images in all their glory. Should you dare to don your VR gear and take the plunge with a Quest headset, a simple press of the A button shall guide you to the next page.

And so, the burning question lingers in the air like a mist in the night - how does one triumphantly render multiple pages of a PDF document onto the same canvas, time and time again, whilst ensnared in the enigmatic realm of VR mode within the illustrious plane of A-Frame?

javascript three.js aframe pdf.js

Answer 1

Answer №1

Discovered a solution here:

Issue with requestAnimationFrame not triggering in WebXR

This is significant because pdf.js utilizes requestAnimationFrame as the default method for rendering images on the canvas.

However, there is an option to toggle this behavior - the pages render function contains an option intent, which is later used to decide whether to employ requestAnimationFrame.

The sources being referenced may be slightly different (possibly older?), but if you focus on creating the InternalRenderTask in the render function of the ProxyPDFPage - everything is outlined there:

const internalRenderTask = new InternalRenderTask({
  callback: complete,
  params: {
    canvasContext,
    viewport,
    transform,
    imageLayer,
    background
  },
  objs: this.objs,
  commonObjs: this.commonObjs,
  operatorList: intentState.operatorList,
  pageIndex: this._pageIndex,
  canvasFactory: canvasFactoryInstance,
  webGLContext,
  useRequestAnimationFrame: renderingIntent !== "print",
  pdfBug: this._pdfBug
});

You can adjust the intent to print within your renderContext object:

// 'interactive-pdf'.render()
const renderContext = {
          canvasContext: context,
          viewport: pageViewport,
          intent: "print"
};
const renderTask = page.render(renderContext);

And it appears to be functioning correctly:

https://i.sstatic.net/xI337.gif

There may be potential unforeseen consequences when setting the intent to print (as it impacts other settings), so disabling useRequestAnimationFrame in the source code also resolves the issue.

Explore the version with the 'print' intent, or the one with the adjusted pdfjs source code.

Answer 2

Discovered a solution here:

Issue with requestAnimationFrame not triggering in WebXR

This is significant because pdf.js utilizes requestAnimationFrame as the default method for rendering images on the canvas.

However, there is an option to toggle this behavior - the pages render function contains an option intent, which is later used to decide whether to employ requestAnimationFrame.

The sources being referenced may be slightly different (possibly older?), but if you focus on creating the InternalRenderTask in the render function of the ProxyPDFPage - everything is outlined there:

const internalRenderTask = new InternalRenderTask({
  callback: complete,
  params: {
    canvasContext,
    viewport,
    transform,
    imageLayer,
    background
  },
  objs: this.objs,
  commonObjs: this.commonObjs,
  operatorList: intentState.operatorList,
  pageIndex: this._pageIndex,
  canvasFactory: canvasFactoryInstance,
  webGLContext,
  useRequestAnimationFrame: renderingIntent !== "print",
  pdfBug: this._pdfBug
});

You can adjust the intent to print within your renderContext object:

// 'interactive-pdf'.render()
const renderContext = {
          canvasContext: context,
          viewport: pageViewport,
          intent: "print"
};
const renderTask = page.render(renderContext);

And it appears to be functioning correctly:

https://i.sstatic.net/xI337.gif

There may be potential unforeseen consequences when setting the intent to print (as it impacts other settings), so disabling useRequestAnimationFrame in the source code also resolves the issue.

Explore the version with the 'print' intent, or the one with the adjusted pdfjs source code.

Issue encountered with updating canvas texture twice in A-Frame and pdf.js while operating in virtual reality mode

Answer №1

Similar questions

Feed information into a Select element from the Material UI version 1 beta

Having trouble with rendering prop values in Vue.js?

What is a more efficient method for obtaining the current URL in isomorphic React applications that works on both the client and server side?

The HTMLElement type does not include the Ionic typescript property

Using JQuery to create an animated slideToggle effect for a multicolumn list

Leveraging PHP JSON responses for decision-making in jQuery/JavaScript

Refresh the Data Displayed Based on the Information Received from the API

Discovering the lengthiest strings in a multi-dimensional array using JavaScript

The React form is only transmitting a single property from the state instead of the complete state

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

The People and Groups selection dialog is displaying incorrectly in IE 10

Vue struggles to handle data coming from a composable function

Incorporate functionality into a button using jQuery

Issue with pushing inner list<object> in Knockout version 3.2.0

Creating audio streams using react-player

What are some effective solutions for resolving design problems in Isotope?

using database URL as an AJAX parameter

What could be causing the issue with my custom AlloyEditor UI extension?

Adding a plane to a Three.js scene

What is the reason behind the significant 80% reduction in PNG files by grunt-contrib-imagemin compared to the minimal reduction of less than 0.1%