Sign in to follow this  

Time Visualizer render with canvas or WebGL (PIXI, threejs)?

Recommended Posts


I made a web-app for planning and visualizing time segments.

It looks like this in action:


I do all the calculations in pure Javascript, and had to write a lot of code to code all the shapes make hit detection work for all shapes. I am drawing all elements in HTML5 canvas.

I am looking into refactoring the codebase and adding more features. In that case I am wondering if a library rendering to WebGL would help me?

Things I want:

  • Easy way to prevent text overlapping
  • Easy way to add small animations and slick effects
  • Smooth animations with more complex and advanced shapes than in the video.

The bottleneck is when animating the shape, and then the JS have to calculate all elements every frame, but would WebGL help with that?

This is a non-trivial usecase, and I think it may be best to just use pure JS and canvas, but to be honest, I don't really know how WebGL works, and in what way it helps.

Any WebGL heads here?


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.