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 Space Editor

    2021

    Context

    Early 2021 I had put my 3d projects on hiatus for one year and a half because of my focus on freelancing. I had an especially intense mission where I had a lot of lattitude (and pressure...) to build a sizeable webapp at the maximum of my ability.

    It made me grow a lot as an engineer, so when I looked back at my work on the city editor I still wanted to make an editor, but also wanted to take a different spin on both the idea itself and the technical side.

    Having just left a large data centric project where I was the single dev responsible of the web part, I developed a strong opinion on what is needed to iterate fast and with confidence.

    I got obsessed with full type safety from the database to the front end, with avoiding CRUD boilerplate and with relational databases as the single source of truth, hence the adoption of Hasura, GraphQL and PostgreSQL.

    What is it ?

    In order to edit a space an user has to go through at most three steps.

    • First they have to upload a 3D model of a an environment or select an existing one.
    • Then they have to dropping and resizing an example avatar of a player in order to configure its size and the starting point of the space.
    • Finally they can add virtual screens with text, videos, & pictures.
    Top posts on r/virtualreality. The in app Reddit browser is made with PixiJS and support rich content

    Outcome

    I was unhappy with the text readability in VR. When a panel was more than a few meters away it was not crisp. Content readability in VR became a pet peeve of mine since I easily get obsessed by something not working as it should.

    To test my understanding of how to fix this issue that plagues a lot of WebXR applications, I decided to build an app that required readability to be perfect: a WebXR PDF reader.

    Technical stack

    • Front: React, XState
    • 3D: Babylon.js
    • 2D: PixiJS
    • Back: Node.js, PostgreSQL, Hasura, GraphQL
    • Cloud/Infra: Google Cloud Platfrom, Cloud SQL, Cloud Run, Google Cloud Storage, Cloud Build, Terraform