search

metafizzy / zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
https://zzz.dog
10.38k stars 394 forks source link

Jaggies showing on large canvas animation #54

Closed charlesr1971 closed 5 years ago

charlesr1971 commented 5 years ago

It maybe that ZDog is meant to be used for smaller animations and on the mobile. And I have noticed that all your demos are rendered on 240 width/height canvas. But, when you look at an animation on a desktop in Chrome with a canvas of 600 height etc, it is very easy to spot jagged edges when a shape is animated in rotation.

http://hub.establishmindfulness.com/zdog

turbo commented 5 years ago

I've looked at this on a 4k monitor (same canvas height) and do not see any "jagged edges". Can you screengrab what you are seeing and mark the issue?

charlesr1971 commented 5 years ago

@turbo The problem is, that a screenshot cannot capture the issue. I can only see it, when I am watching the blue ellipse rotate in the Y axis, at a any canvas size of over about 400 units, using:

Google Chrome 74 Firefox 67

On Windows 10, HP Laptop 15", i7-8550U CPU, 16GB RAM

The jaggies are very noticeable. It maybe a frame rate issue but I have a very good graphics card [NVIDIA GeForce 930MX ] on my laptop.

As I said, on my mobile devices, I cannot see any jaggies. It is totally smooth on my iPhone 8+ [iOS12.2].

charlesr1971 commented 5 years ago

It only happens during an animation sequence.

desandro commented 5 years ago

Thanks for reporting this issue. What do you mean by jaggies ?

The one visual bug I have been seeing is on Firefox with broken animation frames, where the model will disappear for a frame then reappear.

Please add a 👍 reaction to this issue if you're seeing jaggies, so I know how prevalent the problem is.

charlesr1971 commented 5 years ago

@desandro No. The model does not disappear, in this case. I can see very jagged edges on the model whilst it is rotating.

charlesr1971 commented 5 years ago

https://en.wikipedia.org/wiki/Jaggies

But these are giant jaggies!

charlesr1971 commented 5 years ago

I am wondering, whether adding the blue ellipse to a group, despite the fact that I won't be able to group it with any other shape, might alleviate this? I managed to solve a z-fighting issue on 4 small white spheres, by adding them to a group. I will let you know what happens!

charlesr1971 commented 5 years ago

@desandro OK. I have some interesting results. When I remove:

var tween = Zdog.easeInOut(progress % 1 ,3 ); illo.rotate.y = tween (Zdog.TAU2);

On the blue ellipse and use:

illo.rotate.y += 0.03;

The jaggies disappear. It seems like the speed of rotation is important. Its a shame because the 'easeInOut' effect is really nice and it only works well, when it rotates quickly.

charlesr1971 commented 5 years ago

@desandro David. I would just like to thank you for helping me to understand the difference between rotating a Group VS rotating an Anchor. I wanted to thank you on that thread but it is closed. Anyway, your last comment really nailed it for me!

desandro commented 5 years ago

I'm closing this issue as no one else has chimed in. Please open a separate issue if you run into a similar problem.