-
Notifications
You must be signed in to change notification settings - Fork 535
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
performance of hanzi-writer #47
Comments
Another possible difference is using SVG clip-path instead of SVG mask to control the way the stroke looks while animating. I think clip-path should have better performance, but the reason I didn't switch to it fully is because using clip-path doesn't allow adding stroke width, and currently there's small gaps between overlapping strokes in the data from make me a hanzi (skishore/makemeahanzi#28). I want to try working on adding caps to the strokes from make me a hanzi when I have some time. If that issue can be resolved we can switch to using clip-paths for everything. Could you try setting |
Just seen in the code that |
oooh interesting I hadn't considered using canvas. That could be worth investigating - it would certainly have better performance than SVG, but probably requires a fair bit of extra work to translate the SVG path strings from Make me a Hanzi into canvas pixels. |
setting |
A valuable comparison on SVG vs Canvas: https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/ |
I wouldn't be surprised if we could have most of both world by off-loading a lot to CSS animation that will be able to use hardware acceleration and keep SVG and crisp rendering. That would at least worth a try in my opinion. |
I wonder if it's just that SVG performance isn't great on mobile. How do some of the SVG images from Make me a Hanzi look on mobile? They're using CSS to generate the animations: https://github.com/skishore/makemeahanzi/tree/master/svgs |
Another possibility is that maybe having to calculate opacity for the highlight layer and the other hidden layers is straining on mobile. Maybe if we set |
The SVGs from makemeahanzi are not animated at all. I guess these CSS animation are not supported. I'll tinker a little more, but this is very possible that only a few CSS operations are supported... as I found out that CSS scale is not supported on my end. Android 4.4 is now fairly old, but I guess it is still an important target. For the record, I tested in my app (a java based very simple app that only opens a webview on a provided index.html containing all the javascript) on my Galaxy Note 4 that I blocked on Android 4.4 . I basically added the svg as an |
Ah darn, it might be the case that SVG css animations aren't supported in older browsers. I think canvas should actually be pretty easy to implement though - it looks like there's a |
I made a proof-of-concept PR using canvas rendering here: #57. Does this perform better on your device? You'll need to build the dist files in that PR before testing. When I was testing in Chrome it appeared to have worse performance than using pure SVG, but it could be that Chrome has really optimized SVG rendering. It's also possible it needs more tweaking to optimize canvas rendering fully. |
Hello @chanind I used your POC on a heavy page, that I open Hanzi Writer as a popup. For my page, the Canvas version had a huge performance impact. I recorded 2 videos in the same page, to demonstrate it. SVG Version: Canvas Version: Thank you for your work. What do you think is missing on the Canvas version? |
The Canvas version should work, but when I tested it using Chrome developer tools it didn't seem to perform as well as the SVG version. It could be that Chrome is just really optimized for SVG rendering. Which browser is that in the video? It looks like a webview on Android? |
It's a PWA running on Google Chrome 70, Android 8.0, Moto Z2 Play |
It probably makes sense to polish the canvas PR and allow it to be enabled as a config option, something like |
Great! Thank you! I just found a bug on the Canvas version. When you change the ideogram, it doesn't clean the previous ideogram loaded: To change, i'm using the setCharacter method. That does't happen on the SVG version. |
I'm testing hanzi-writer on mobile platform, and with large displays I have real issue with general performance of animations (probably below 10fps) and it is really ugly (I'm on a google galaxy note 4 with a Android 4.4). Inkstone is based on the same data and same langage and technique here (javascript in webview and tween, the only difference is that they use Cordova, but to my limited knowledge, it shouldn't have any impact) and achieve much better on the same terminals.
I'm still quite new to all this, and I suspect that Inkstone is actually upscaling the resolution rather than drawing more pixel precise animation. I'll post updates if I have time about this topic here for any person finding Hanzi-Writer a little slow and possible technical solutions. Any thoughts on that subject are welcome.
One question I had related to that is : are the CSS animation faster than the javascript ones ? (I'd guess so), and if so, it seems that some actions can be transfered to CSS animation (using
transition
and keyframes ...).The text was updated successfully, but these errors were encountered: