# Display Pdf in XR mode

**URL:** <https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284>\
**Category:** Questions\
**Created:** [May 31, 2021, 8:20am UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284 "2021-05-31T08:20:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![pco38](https://avatars.discourse-cdn.com/v4/letter/p/bc79bd/32.png) [@pco38](https://forum.babylonjs.com/u/pco38)\
**Post date:** [May 31, 2021, 8:20am UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/1 "2021-05-31T08:20:27Z")

</div>

Hi,

Is it possible to display a pdf file in an object texture in XR mode ?

Regards

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [May 31, 2021, 10:05am UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/2 "2021-05-31T10:05:36Z")

</div>

You may use [PDF.js](https://mozilla.github.io/pdf.js/) to convert PDF to canvas and use it as dynamic texture.

---

<div class="post-metadata">

**Author:** ![pco38](https://avatars.discourse-cdn.com/v4/letter/p/bc79bd/32.png) [@pco38](https://forum.babylonjs.com/u/pco38)\
**Post date:** [May 31, 2021, 4:20pm UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/3 "2021-05-31T16:20:26Z")

</div>

Thanks labri for you answer.

It works fine in normal mode but it doesn’t work during a XR session.

Do you now why ?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [May 31, 2021, 4:52pm UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/4 "2021-05-31T16:52:23Z")

</div>

So the question now is how to make dynamic texture work in XR, am I right?

---

<div class="post-metadata">

**Author:** ![pco38](https://avatars.discourse-cdn.com/v4/letter/p/bc79bd/32.png) [@pco38](https://forum.babylonjs.com/u/pco38)\
**Post date:** [May 31, 2021, 5:31pm UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/5 "2021-05-31T17:31:41Z")

</div>

Yes, if you think that the problem is the dynamic texture 😉  
The use of dynamic texture is different un XR mode ?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [May 31, 2021, 6:57pm UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/6 "2021-05-31T18:57:37Z")

</div>

I can only make assumptions based on infromation you provided 🙂  
If converting PDF to canvas works fine for you but it doesn’t work in XR I suppose there may be some problem with dynamic texture.  
In this case you may try to test in XR some [simple examples with dynamic textures](https://doc.babylonjs.com/divingDeeper/materials/using/dynamicTexture) first.

---

<div class="post-metadata">

**Author:** ![pco38](https://avatars.discourse-cdn.com/v4/letter/p/bc79bd/32.png) [@pco38](https://forum.babylonjs.com/u/pco38)\
**Post date:** [June 1, 2021, 9:25am UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/7 "2021-06-01T09:25:29Z")

</div>

Hi labris,

Below the code that I use.

If I execute this code before entering in VR mode, it works fine and the pdf is displayed when I enter in VR mode.  
But when I enter in VR mode and execute this code after it doesn’t work and my mesh disapear…  
I suppose that the problen is in the function “page.render”…

Any idea ?

* * *

```
openPdf : function(urlPdf)
{
	pdfjsLib.getDocument(urlPdf).then((pdf) => {

		pdf.getPage(indexPage).then((page) => {

		var pdfPlane = BABYLON.MeshBuilder.CreatePlane("ground", {width: 0.7, height: 1}, gScene);			

		var viewport = page.getViewport(this.pdfState.zoom);
			
		var pdfMat = new BABYLON.BackgroundMaterial("pdfMat", gScene);    				
		
		var pdfTexture = new BABYLON.DynamicTexture("dynamic texture", {width:viewport.width, height:viewport.height}, gScene);
		pdfMat.diffuseTexture = pdfTexture;

		var ctxPdf = pdfTexture.getContext();
		var canvasPdf = pdfTexture.canvas;

		pdfMat.opacityFresnel = false;
		
		pdfPlane.material = pdfMat;
		
		page.render({
			canvasContext: ctxPdf,
			viewport: viewport
		}).promise.then(function(){
			pdfMat.diffuseTexture.update();
		});
	});
}
```

---

<div class="post-metadata">

**Author:** ![pu\_xie](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pu_xie/32/33551_2.png) [@pu\_xie](https://forum.babylonjs.com/u/pu_xie)\
**Post date:** [November 22, 2023, 2:27am UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/8 "2023-11-22T02:27:31Z")

</div>

I’m having the same problem as you

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 22, 2023, 1:27pm UTC](https://forum.babylonjs.com/t/display-pdf-in-xr-mode/21284/9 "2023-11-22T13:27:16Z")

</div>

What issue are you facing? maybe create a new issue instead of reviving an old issue - it will help us help you much better.