The site heavily relies on a process that could be called “DOM to WebGL” (I also quite like the “DOM2GL” name) and I thought I might share some insights on how I did it.
When a few years ago I discovered the power of WebGL and shaders, I instantly thought that one day, I’d really like to build a website fully rendered by WebGL. Yes…
In this final part, we’ll see how to improve the overall performance of the slider by removing any layout repaint calls.
Here’s the final pen:
As a reminder, we used curtains.js to add everything related to WebGL.
Here’s what you’ll end up with:
As a reminder, we’ll be using curtains.js to add everything related to WebGL.
The slider will be written in three parts. In the first part, we’ll write a Slider class that will create a neat responsive drag slider. In the second part, we’ll extend it to add the WebGL effect. In the third and final part, we’ll learn how to improve the overall performance by removing all unnecessary reflow or layout calls.