DEV Community

Cover image for What Building💻 a WebGL App Taught Me About Debugging
Israel Rotimi
Israel Rotimi

Posted on

What Building💻 a WebGL App Taught Me About Debugging

Painful Insights from a more than a month-long journey

Hi there 👋,
I'm Israel Rotimi and I'm a JavaScript developer, I specialize in all things JavaScript from frontend to backend, feel free to reach out to me.

So, I was building a website for myself. It's a portfolio website that incorporates animations into the design. So I was actually following a tutorial on youtube on the same project, then I ran into an error I couldn't seem to solve when I added a 3d object to the scene.

The object was rendered using three.js and the stack was Next.js.
Everything worked fine until I added the object.
It would compile successfully in the terminal and will start rendering in the browser, then all of a sudden throw this screen.

Unhandled runtime error: Error creating webgl context

My heart stopped💔. I thought does my computer not support webgl!
I can't afford another right now, then I thought webgl was said to be supported a variety of systems why shouldn't mine support it. I was using chrome updated to the latest version, so I tried to see if there was anything in the code I could do to solve it.
I then searched through all the settings looking for webgl, all I saw was this setting: "Use graphics acceleration where possible" and it was turned on. So I abandoned the project for the next few weeks.

After being motivated again, I decided to take a look at the project. I asked claude ai for help and it suggested isolating the suspected cause. I did that and same error then I used firefox dev instead of chrome and it worked without the error. I later tried it on edge but it gave the same error as in chrome.

I continued development with firefox dev but was worried my project couldn't run on other browsers. I searched through the settings on edge and found the same setting I saw on chrome: "Use graphics acceleration where possible" and it was enabled. I disabled the setting to see what would happen.

To my greatest surprise, the app ran without the error. I did the same on chrome and same result.

Here's what I learned from this journey

  • Be systematic in your debugging approach: Isolate the problem, test different browsers (where that applies), test across multiple use cases

  • Don't just give up too easily; It's not the end of the world

  • When you feel stuck, take a break, then come back refreshed

  • Lastly, be curious, experiment. I wouldn't have known why my app wasn't working if I didn't change the setting

BTW, I'm still working on that project but you can check it out here: https://github.com/israelrotimi/my-3d-nextjs-portfolio If you do please leave a ⭐ and leave your thought's about that in this thread as well. Thanks

Please share your thoughts and takeaways. I'd like to know if anyone has been in a similar situation. Kindly share

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay