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
  • Social WebVR Experiment

    2016

    Multiplayer editing : A user (the pink sphere here...) selects a color, then a shape. Adds it to the world and ta-da! The other user sees it in realtime.

    Context

    In 2016 the Oculus Rift CV1 and the OG Vive were being released. Only the Vive had motion controllers, mobile VR with Cardboard was a common first experience with VR. The VR api on the web was the now defunct WebVR API. A-Frame a web framework made by Mozilla that allowed developers to use Three.js in a declarative way with DOM elements was the most common way of building WebVR apps. The marketing hype behind the Metaverse (™) had not yet happened but it was basically the way too ambitious idea behind this first WebVR project of mine.

    Concept

    The idea was to make a webapp where multiple users could spend time creating a 3D environment together and sharing media content like watching YouTube videos.

    The user can drop a media "screen" on which they can search for a YouTube video. Behold the ✨ dazzling ✨ custom made keyboard !

    The environment creation is done using primitive shapes likeboxes, sphere, cylinder and editing tools like extrusion and cropping (hole cutting)

    Challenges

    In 2016, the WebVR ecosystem was rough. Bugs in librairies were frequent, browser compatibility was bad, there was no solution for text input in VR, most VR devices had no motion controllers and mobile VR had to rely on gaze interactions (clicking just by looking at an object for a few seconds).

    Outcome

    This project marked my introductory deep dive into 3D/VR programming. It familiarized me with the reality of working with bleeding-edge frameworks and web APIs. After months of continuous refinement and accumulating experience, I realized I needed to change my approach. The project was too ambitious given my skill level, and mobile VR wasn't sufficient, mainly due to the lack of controllers. I repurposed some of the logic from the YouTube player and instead created a YouTube/Facebook WebVR browser.

    Technical stack

    • Front: React, Redux
    • 3D/VR: A-Frame, Three.js
    • Browser APIs: WebVR, MediaSource, WebSocket
    • Back: Node.js, RethinkDB, Redis