Bérenger Makita

Fullstack & 3D/XR Web Development

Projects

  • Social WebVR Experiment
  • YouTube/Facebook WebVR Browser
  • Social WebVR Prototype
  • Tiled WebVR World Editor
  • Spatial Reddit
  • WebXR City Builder
  • NPC Editor
  • Building Editor
  • WebXR Space Editor
  • WebXR PDF Reader
  • WebXR Google Drive Client
  • WebXR PDF Reader

    2021

    Context

    The readability issue I faced with my WebXR Space Editor and the fact that I had not shipped since a long time then, made me feel like I had to make a statement. I had to ship a WebXR app with the most readable text possible. PDF being very reliant on text being readable was the perfect challenge.

    Could I make PDFs look good in VR ?

    What is it ?

    A bare bones PDF Reader, where you can load a PDF and read it in or out of VR.

    Challenges

    I solved the readability issue by using what was a new browser API at the time : WebXR Layers. Currently (end of 2023), the API is still only implemented on the Meta Quest Browser.

    It is a necessary API for UI intensive WebXR apps. For this API to make sense a basic understanding of how the WebXR API and browser compositing works is useful.

    Using layers in an existing WebGL application where other things are rendered can have unintended effects, like having your layers always in front or behind of your WebGL content. All of those issues ends up being manageable with a few tricks.

    I used pdf.js, to render PDFs. Great rendering and overall well engineered really kudos to Mozilla for the library. But using it can be tedious with modern js tooling.

    Also I found a that it breaks with WebXR under certain conditions, even Mozilla Hubs faces the bug. I have a confession to make about this bug: I fixed it in my own pdf.js fork and I did not contribute back... yet.

    I will publish the fix one day but if you reader wants to do it because it is 2030 and I still have not bothered, you have my blessing !

    Outcome

    I shipped it and 7.000 pages were read by 31 people in VR all around the world ! I did not promote it much, its spread is mostly due to word of mouth in the WebXR community. PDF is fine but I intended to support much more format and features in order to build a full featured WebXR media consumption app. Still had to put the project on hiatus for a few month because of an other contract work.

    Technical stack

    • Front: React
    • 3D: React-Three-Fiber, Three.js
    • Infrastructure: Firebase Hosting