The Possibilities of Web Technology Opened by WebGL

The Possibilities WebGL Opens for Web Technology

Recently, while developing video editing software, I added a chroma key feature. I implemented it using WebGL, and I was surprised at how high the quality turned out to be. Even with 2-3 effects applied at 60fps, it demonstrated smooth rendering performance. The structure essentially re-renders every 16ms, and the lack of stuttering shows just how fast it is.

WebGL is a challenging technology to handle, and you need to study a separate graphics language called shaders, which creates a high entry barrier. Therefore, libraries suitable for specific fields are often used. In the 3D field, three.js is representative, and in the graphics field, pixi.js is well-known. As a result, in most fields, there is little need to handle WebGL itself.

Nevertheless, in specialized areas where you need to apply effects like the chroma key effect I developed, you have to deal with WebGL itself. Since you may need to implement features not available in existing libraries, it’s better to use the fundamental technology whenever possible. The reasons are:

1. It’s convenient for handling media.

If complex calculations like effects, masking effects, or color grading are involved in images and videos, they cannot be processed with existing JS. (Technically possible, but extremely slow.) Therefore, when you want to perform media calculations, you must use WebGL. Especially recently, as many dazzling effects have been applied to the web, the importance of media is expected to increase to satisfy consumers with higher expectations.

For example, just looking at the introduction site of Toss, which was mentioned as a good interaction example a few years ago, compared to pages like lusion.co, the difference is stark. Overseas, several services have already emerged to build such landing pages, and the use of 3D design tools like Spline is gradually increasing.

All these effects are fundamentally based on WebGL. If you study shaders well, you can easily implement stunning effects.

2. The pinnacle of frontend web technology

Personally, I see graphics APIs like WebGL as the pinnacle of frontend technology. With good application, you can even develop deep learning frameworks. Tensorflow.js is a prime example. Especially with the introduction of WebGPU a few years ago, even small-sized LLMs can now run on the web. Since WebGPU applies a paradigm very similar to WebGL, learning it can expand the scope of frontend to include artificial intelligence.

In fact, most frontend logic can now be easily implemented with AI. Recently, I used o3-mini-high, and seeing it implement exactly as intended made me think that we’ve reached an era where designers can handle frontend work. The process of developing according to design is simply tedious, not particularly difficult. Of course, there are still many aspects to consider if you want to bring it into actual work, such as component separation, design, and optimization, but AI now writes code better than most juniors.

Therefore, to have market competitiveness, I recommend studying a slightly more complex level of frontend technology. Web technology, especially graphics technology, is still evolving, and web tools with native performance are continuously being released and recommended overseas. I even get asked why I didn’t develop the video editor I’m working on with Electron as a web application.

WebGL is an unexpectedly fascinating technology. I highly recommend learning it.