Ryzulla

Move content on canvas background following mouse over

Recommended Posts

 

On 3/13/2018 at 4:45 AM, Sahil said:

About the particles, I visited three js page and spent 5-6 hours going through every example. (maybe more :D ) So I was wondering if these libraries use some kind of particle engine or it is just magic of webGL or something else. Because I see great difference in three js examples and 2d canvas performance. But I wanted to go through it first before asking you too many crazy questions.

 

Three.js isn't fast due to some creative way of coding things. It's because of WebGL rendering. The speed comes from using the GPU instead of the CPU. For a good explanation of why the GPU is so fast, read this introduction to shaders. A GPU has 1000s of threads that can do trig and matrix operations at the speed of light!!! That's how fast electricity can go.

https://thebookofshaders.com/01/

 

WebGL uses the <canvas> element, but its API is completely different. It's based on OpenGL. Just look at how much code is required to draw a white square on the screen. :shock: :o

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context

 

When people say they know WebGL, there's a good chance that they might be stretching the truth. What they mean is that they know a WebGL library like three.js or PixiJS. It's hard to find somebody that can do WebGL programming without a library.

 

I'll show how to speed up a 2d canvas in another post.

  • Like 2

Share this post


Link to post
Share on other sites

Ya shader is something that I was planning to look into but wanted to start with 2d canvas before jumping to advanced stuff.

 

Quote

I'll show how to speed up a 2d canvas in another post.


I have been through following article about optimizing canvas but it feels like more can be done, so looking forward to your post.

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

 

Quote

 

Actually I am below average and I think every regular member is a lot smarter than me. Except one I guess, though I can't name anybody.

 

Oh BTW, I was just kidding. I wanted every regular member to think I am talking about them. :D

  • Like 1

Share this post


Link to post
Share on other sites

Yep, I figured you were looking at that page. Long story short, drawing a path is what makes SVG so slow. PixiJS and Three.js are fast because they generally don't use dynamically generated content like a path. 

 

Draw your path on a separate canvas element, and then draw that canvas on your main canvas using the .drawImage() method.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

  • Like 2

Share this post


Link to post
Share on other sites

You can draw a canvas on another canvas. You can even draw a canvas on itself. :shock:

 

 

  • Like 2
  • Haha 1

Share this post


Link to post
Share on other sites

And on the topic of paths. I always see people claim that canvas doesn't use vectors. This is simply false. All you have to do is scale up a path to see that canvas uses vectors.

 

 

 

 

  • Like 2

Share this post


Link to post
Share on other sites

And how does SVG receive mouse events on a path or stroke? Through some canvas methods. :o

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Check out this thread for some canvas tips.

 

  • Like 2

Share this post


Link to post
Share on other sites
Quote

And how does SVG receive mouse events on a path or stroke? Through some canvas methods. 

 

Oh I saw that demo on codepen, it is really impressive. I was wondering if it can be used to perform hit tests on objects with odd shapes but yet to go through the code.

  • Like 1

Share this post


Link to post
Share on other sites
11 hours ago, Sahil said:

 

Oh I saw that demo on codepen, it is really impressive. I was wondering if it can be used to perform hit tests on objects with odd shapes but yet to go through the code.

 

It could be used for shapes by converting the shape to a polygon, but if you're going that route you can just do polygon hit testing, which would be faster. I have some code if you want to see how that's done.

 

For games I use this PhysicsEditor to generate the hit polygons. You normally don't need pixel perfect hit detection. Just close enough.

https://www.codeandweb.com/physicseditor

 

  • Like 2

Share this post


Link to post
Share on other sites

When I was creating demo for this thread, I asked myself few times 'should I spend so much time creating this demo?'. Glad I did, it turned out to be worth a lot more than what I was expecting. Thanks Blake. :D

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Here's your demo using an offscreen canvas. It probably won't help with performance as the paths you are drawing are relatively simple. The slowest part of your demo is the trig. Math functions like cos, sin, and sqrt can be slow, and there's not a lot you can do about that.

 

 

 

Anti-aliasing can be difficult in both canvas and SVG as an odd width stroke will straddle a pixel.

 

LoaeKIe.jpg

 

 

Sometimes you can make it sharper by moving the stroke over half a pixel. Scale will of course need to be taken into consideration for when this will work.

 

d0c36oP.jpg

 

 

Related post...

 

 

 

  • Like 4

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

  • Recently Browsing   0 members

    No registered users viewing this page.