libjass
libjass copied to clipboard
Arnavion
Investigate canvas/WebGL renderers
- Kinect.js - Canvas renderer. Contains text metrics support already. Tutorials | Source
- pixi.js - Combination canvas and WebGL renderer. Tutorials | HN | TypeScript definitions | Docs
@Dador
By the way, does CSS renderer (with disabled SVG) have problems with other styles/effects? I mean is text outline is the only problem?
And the reason why I interested in CSS renderer. I found out that libjass with disabled SVG is much faster and not lagging on some karaoke (although maybe that's because some effects are disabled, lol). I made (very) small research and seems canvas has plenty of features that required for various effects (including outline). There tools like this, but I don't think that it even necessary. I think canvas would be faster than inserting svg filters for each dialogue.
Yes, I seen #13 but it's without any info. So I want to ask your opinion. You probably know something that I don't know about canvas.
Let me put it this way. All the problems that libjass has - wrong sizes, wrong colors, tags that are difficult or impossible to support - are mostly from libjass's design of using browser DOM, instead of something that gives direct control over the output pixels like canvas.
The advantage of using browser DOM is that libjass does not have to deal with low-level stuff like drawing, positioning text, animating, etc.
The disadvantage is that the browser DOM does not give the full ability to render all of ASS exactly. For example, \org is hard to support because it is in absolute coordinates, but libjass doesn't know what the sub div's coordinates would be. Similarly while the DOM has the advantange of allowing \fad and \move to be represented with a single declarative animation, this breaks down with \t because the animation-timing-function cannot be used to mimic the accel parameter accurately.
Specifically for SVG filters, this is not supported in many browsers (IE, mobile browsers). Even on desktop browsers it is not frequently used. The CSS spec is adding some advanced filters to the filter property but it's not customizable enough to generate the somewhat complicated filter chain that libjass uses for outlines.
A canvas renderer would have complete control over all the pixels it outputs, so it would not have such problems, at the expense of being more complex since it would need to do all the low-level stuff that the DOM already helps with.
When I started out with libjass I had no intention of writing this low-level code. Even now, while I'm open to have a libjass.renderers.WebCanvasRenderer I'd first look into cross-compiling harfbuzz+fontconfig+libass to JS and wrapping that, instead of writing a new implementation.
So a canvas renderer would certainly be more accurate than DOM renderer. Would it be faster? I don't know, because I haven't tried it. asm.js / wasm may make it feasible for cross-compiled libass renderer to be fast enough or even faster than SVG / text-shadow-overload renderer.
When I started out with libjass I had no intention of writing this low-level code. Even now, while I'm open to have a libjass.renderers.WebCanvasRenderer I'd first look into cross-compiling harfbuzz+fontconfig+libass to JS and wrapping that, instead of writing a new implementation.
Hello from 2017 :) (my previous message was in 2015) Inspired by that idea I have complied libass to JS using web workers and asm.js, https://github.com/Dador/JavascriptSubtitlesOctopus
its pretty good, was testing it on some devices and it likes to use a lot of memory when rendering on a few of them. and some of the fonts end up having an incorrect offset from the video.