Summer Internship Adventures: A bit about me and my project.

Hello Everyone 😁

My name is Sahil, and I am a summer intern on the Babylon.js team! In this post, I will be introducing myself, and then I will be giving a little sneak peek into what I have been doing during the internship.

Who am I?

I found my passion for programming at a very young age, and I just knew I had to pursue this as a career. I can still remember making a simple console calculator as my first project and how happy I was when it worked.

A few years later, I got super interested in cybersecurity due to many CTF websites introduced to me at a young age. It was like a bunch of puzzles that unraveled every challenge I completed. I struggled a lot, but every challenge made me better!

HackThisSite, which was one of the websites I used back in the day!

A few years after that, I was super interested in game development and used the unity editor to make some games with a few friends back in high school. Of course, none of us had experience making 3D models, so the games had less-than-ideal model quality. Thankfully the unity asset store existed! Unfortunately for us, we lost the code due to not using GitHub. I sure learned to use Git for everything after that.

A screenshot from one of the games I made, which Deadops Arcade inspired

Then came time to choose a University! I chose the University of Ottawa because it was in a new city, it allowed me to meet a wide variety of people, it wasn’t going to bust the bank, and it had a great co-op program. It honestly feels like just yesterday that I was intimidated by the large classrooms, writing code on glass windows with markers, and trying to help out my friends during late-night study sessions. The experiences of my first year were quite interesting.

Me back in my first year, taking a random pic!

But, it turns out I am already entering my final term in my degree in Software Engineering this Fall.

My program structure is a bit strange compared to many other programs, and we have to do four years plus one trimester before we finish. The aforementioned is because we have five co-ops built into the program from the start, five opportunities I had to gain experience in the industry!

Course sequence showing 5 coop sequences embedded into the program and a total length of 4 years and a trimester.
Course sequence showing 5 coop sequences embedded into the program and a total length of 4 years and a trimester.
My program’s course sequence.

It has been a busy few years, and I have learned a lot! My first internship was with the government. Then I joined Microsoft through the Garage internship program for my second internship, where I built a VS code extension to help bootstrap the web development process.

Me (on the left) with one of my friends from the garage internship (on the right)

A few internships at Microsoft later, and I am now interning on the Babylon.js team!

What do I do in my past time?

When I was growing up, I played many Pokemon games, many Jak & Daxter games, many Final Fantasy games, most Kingdom Hearts games, most Ratchet and Clank games, and many Legend of Zelda games. So, of course, all of these series are very close to my heart. Seriously, I could talk about these series and many others for a long time.

Recently I have been playing Scarlet Nexus and Genshin Impact a lot! Maybe a bit too much?

What else is there to know about me?

I have also only visited two countries other than the one I live in (Canada) and the one I was born in (India). That being the United States (New York City, Seattle, Orlando), and Cuba. Each city and place had their own unique experiences, and I want to visit many more countries in the future!

What have I been doing in my internship?

The current way to look at performance statistics

This method makes it challenging to see notable trends or to see how the statistics are related. After I complete my feature, some of the performance statistics you can see in the inspector will also be available in a graphical format. The graph will stream the data in real-time, and the data streams will be togglable. The color of the lines will also be customizable by the user.

A visual to give a rough idea of what I am trying to build. UI will be different.

Have you had any challenges so far?

There are related challenges such as zooming into the data, panning the data, showing the values of the points when hovering over the data, and making the chart performant enough to handle real-time data.

How are you progressing?

The equation for min-max normalization taken from the Azure ML docs

If we multiply these normalized values by the available drawing space in the x-axis and separately by the drawing area in the y-axis, we get our pixel coordinates. Using some methods in the canvas API combined with translating the data points into pixels allowed me to have lines drawn on the screen in real time.

Graphing real-time fps data. I am labeling using the well-known nice-labels algorithm.

The next goal was to handle zooming into the data. I found out that zooming is just expanding or reducing the number of items on the screen, which helped solve the zooming problem. We found that having the data span the entire canvas makes data look more chaotic when zooming in. So, we decided to make the data cover 80% of the canvas when the canvas is streaming data in real-time. I found that panning is just changing the offset of the viewport, so I am currently solving that problem.

Real-time fps (red) and GPU frame time (blue) data graphed.

The panning does not reduce the size of the play head at the moment. However, it will become dynamic later on.

Concluding thoughts

Until next time!

Sahil Tara — Babylon.js team

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/