Trouble drawing emojis

[jasoneveleth]

I'm trying to render emojis using winit. I've gotten normal text to render just fine following along from here. I'm using an emoji font (I know it has emojis since the charmap.map(c) is returning a nonzero gid, and is returning a zero gid for normal ascii). The following code I think provides enough context to understand what I'm doing:

scene
    .draw_glyphs(&self.font)
    .font_size(font_size)
    .transform(Affine::translate((110.0, 700.0)))
    .glyph_transform(None)
    .draw(
        peniko::Fill::NonZero,
        text.chars().map(|c| {
            let x = pen_x;
            let gid = charmap.map(c).unwrap_or_default();
            pen_x += metrics.advance_width(gid).unwrap_or_default();
            vello::glyph::Glyph {
                id: gid.to_u16() as u32,
                x,
                y: pen_y,
            }
        }),
    );

The text has the emojis we're rendering from. In my case I'm using "abc🪓123" which turns into GID_0, GID_0, GID_0, GID_3750, GID_3192, GID_3198, GID_3196, respectively. The charmap holds the charmap from a font_ref from the font. I'm using the NotoColorEmoji-Regular.ttf font. I'm on macOS 14.2.1 on M1 Pro. When it renders I see the box for missing glyphs for abc but just black for the rest.

I'm starting to think that I'm doing emojis the wrong way because the object returned by draw_glyphs has a brush object that defaults to pure black, but I don't want my emojis to be all black. I've looked around and I can't find anything about how to render an emojis. I'm happy to provide a gist for people in the future trying to do a similar thing.

In short, is this something that is possible? And what files/docs should I go find to get the information I need to understand how to render emojis?

Thank you for such a wonderful library.

EDIT: explaining the parts of the code snippet

[jasoneveleth]

Okay, I think it has something to do with the color. When I use "NotoColorEmoji-Regular.ttf", which is a font that only has the black outline of each emoji, it renders correctly (the ax emoji and numbers show up). This makes me think that Vello is fine, I just need to figure out how to use the color that the fonts are giving me.

I expect that if I dive into the text shaping crates I will figure this out.

[xorgy]

@jasoneveleth There is a little bit more to color emoji support. Supporting the two current main ways that fonts represent color emoji (‘COLRv1’ and embedded PNGs) is something that we intend to do.
Noto Color Emoji has fallback glyphs for the emoji that can be rendered like conventional fonts for the moment.

[jasoneveleth]

Thank you. That's exactly what I needed to know.

[xorgy]

And specifically COLRv1 (the version of color emoji used in current versions of Noto Color Emoji) is likely to be first.

[DJMcNab]

We decided in the 2024-04-04 office hours to re-open this issue, and use it track getting COLRv1 emoji (etc.) working in Vello

See also #gpu > Emoji Rendering

[jasoneveleth]

I'd like to get Apple's emojis to render on mac. Do they use COLRv1? I would guess from the existence of this python library that they're using pngs.

If they're using pngs, is the best strategy to render them as an Image and then draw_image onto the scene?

[DJMcNab]

So, #615 supports COLR Emoji, which is not the format used by the Apple emoji. There is still more work required here

However, if you can afford to include Noto Colour Emoji in your app as a temporary measure, this should work using latest main.

[xorgy]

And the one exception with Noto Color Emoji is that the flag emoji are in a separate CBDT-based color bitmap font.