A Contributor’s Story with Zhixiang Teoh
The Contributor’s Story series is designed to give our key contributors and community members a face and voice, an overview of the projects they’re working on, and the successes and challenges contributors face in development.
In this blog post we will be talking to Zhixiang Teoh, a WebXR employee who works with 3D media layers in a virtual environment as part of the Major League Hacking (MLH) Fellowship.
“For the fellowship, I’m programming something fun, new, and different that I know is for the open source community.”
Tell us a little about yourself and your current experience in the MLH scholarship.
Where did you first find out about open source? How did you come to use / contribute something?
Safe via GitHub. I would occasionally stumble upon ideas for personal projects (in the shower or when I’m not taped to my phone and have free time to really wander my mind) and then I googled the idea, and mostly not. “It’s already done”. And on GitHub. I’ve starred the repository, bifurcating it at times, playing around with it while moving schoolwork, and jumping from one repository to another to discover other open source projects.
I hadn’t really contributed to large open source projects prior to the fellowship (and not exactly a large repository even during the fellowship), but I did leave some comments on PRs and issues in small repositories. While I didn’t have the traditional experience of contributing directly to a large code base, the Fellowship taught me a lot about working with colleagues and mentors, which has helped me grow as a developer and a hacker.
Describe the project you are currently working on.
The project I am currently working on with my Podmate Soham is creating WebXR samples that interface with the new WebXR media layer specification to create and interact with independent video layers in a virtual environment. These planes are essentially stand-alone videos with varying degrees of 3D properties – like “equiangular,” a 360-spherical immersive video, “quad,” which resembles a flat television screen, and “cylinder,” which basically resembles a curved television screen. The traditional way to get the same effect when there are different layers of media puts a strain on the renderer and CPU. WebXR media layers provide a way to reduce reliance on the CPU and leverage the GPU to create fluid, equiangular background media layers and any number of quad and cylinder layers on top.
Creating these video layers is straightforward, but a lot of the work has been using three.js’ 3D rendering library to interface with controller and hand interactions with these layers so that a user has access to all of the regular playback controls of a video and more – scrubbing, moving those videos anywhere in 3D space, and resizing them.
How did you initially go about approaching the problem?
We were originally hired to work on existing code that had previously been contributed by someone. However, we quickly decided to create completely new examples ourselves to use the three.js 3D rendering library in order to find a cleaner and better solution, which will hopefully be added to the three.js library as an example at some point can be.
What obstacles or problems have you faced in your post so far?
WebXR is a particularly niche area, also within 3D web development. In particular, the WebXR layer specification is fairly new. Questions about WebXR layers and WebXR in general cannot be answered as easily as a simple search on StackOverflow. This has certainly pushed my teammates and me out of our comfort zones and taught us to trust each other and tackle problems together. In particular, direct interaction with WebXR levels is currently not possible. So we had to use workarounds using 3D objects to get the effect we wanted. This has certainly made me think more creatively and not as mechanically as in some other previous personal projects I’ve done.
What is the current state of development?
We achieved around 70% of the goals we set for ourselves, but we are proud of what we have achieved so far. One focus that my teammate and I placed while working on the project is the cleanliness and maintainability of the code. Refactoring was a large part of our time commitment to the project, but not for nothing. We very much intend that our post can be used by both future users interested in creating WebXR video samples as well as possibly other 3D rendering libraries.
What have you learned about the project, development or open source so far?
WebXR is a lot less scary than I originally thought, and working on this project has definitely given me the confidence to address new challenges in my future endeavors. Again, I didn’t have the opportunity to contribute to an open source repository where my PRs would be slammed and attacked by ten reviewers left, right, and center, but this project gave me the confidence to talk to other open- Approach source projects. Aside from the technical skills I acquired from my great teammate, I have learned to be more responsible for my job and to take responsibility and pride not just for the code I write but also for the code I review and merge. Finally, as a contributor, I should try to “own” all aspects of the code base and be proud of our collective work.
What advice would you give future contributors to the open source project?
For 3D web development and WebXR, the three.js library is your best friend. Three.js is a great library with a lot of support. In addition, no solution is classified as “bad” in this project! If it solves the problem well, it is always welcome to find a solution until better solutions are found. WebXR is extremely exciting! It can be daunting at first, with the boilerplate code and syntax and all, but remember: the three.js examples are your best friends.
We’d like to thank Zhixiang for her continued contributions to the Facebook open source ecosystem. You can follow Zhixiang’s work on GitHub.
To learn more about Facebook Open Source, follow us on Twitter, Facebook, and YouTube for relevant updates, and see how to get started on the WebXR website.