Issue with custom shaders on text

64 views
Skip to first unread message

Pavel Dey

unread,
Apr 6, 2021, 12:16:31 PM4/6/21
to skia-discuss
I want to create animation effect on text while the text is being shown on a video surface. For example- I want to display a text "Skia" on a video surface. First "S" should gradually appear, then "K" and then "I" and "A". Please note, by appear I do not mean translational/rotational motion of text characters. Rather characters should become completely transparent to completely opaque one after another in the foreground, while the video is being played in the background. I believe this will need a custom shader, where we can modify the alpha values of text pixels to be drawn as a function of its position and change it over time. If we feed this shader to SkPaint object and use that paint object in canvas->drawString() function it should work. But I am stuck with a basic problem. While creating the shader, which 2D image should I sample? I cannot sample the entire canvas content since that will apply the shader on the background video as well. How can I ensure that the shader is applied only on the text pixels?

Pardon my inadequate knowledge of shaders. If you think this is not a correct way to approach this problem, feel free to suggest me other ways too.

Thanks & regards,
Pavel

Brian Osman

unread,
Apr 6, 2021, 12:43:32 PM4/6/21
to skia-d...@googlegroups.com
For this to work like you're asking, you probably want to apply the shader when you're actually drawing the text (which is what it sounds like you're doing). So, two things:
  1. You probably don't need a custom shader. You can instead just animate the alpha value on the SkPaint.
  2. If you do want a custom shader applied to the text, you don't really need to sample anything. In the Skia drawing pipeline, the geometry (rectangle, rounded-rectangle, path, text, etc...) determines the coverage - which pixels will actually be affected by the drawing operation. The SkShader (on the paint) determines how those pixels are filled. So if your custom shader animates color, or produces a linear gradient, or noise, or ... anything - it will effectively be "clipped" to the geometry that you're drawing. In this case, the outline of the text itself.

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/371da7e8-fbf0-4cae-ad4a-40fc7c6951a6n%40googlegroups.com.

Brian Osman

unread,
Apr 6, 2021, 12:53:21 PM4/6/21
to skia-d...@googlegroups.com
Follow-up: Here's an example of applying a custom shader to text, so you can see how it looks. https://fiddle.skia.org/c/ef4f7a4246be6bb7f8ab0396ad5f003f

Pavel Dey

unread,
Apr 6, 2021, 1:24:22 PM4/6/21
to skia-d...@googlegroups.com
Thanks for this clarification. I will try this. Thank you so much for the help.

You received this message because you are subscribed to a topic in the Google Groups "skia-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/skia-discuss/sUXpqPwdisY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAMcBjo776JHqkpNc7b9xOJFA2JJOb2TJsOs-h4OjYqLpbaN_tQ%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages