PEDROJOSEGIL
commented
6 months ago Hi Castorix,
Perhaps this is the answer:
When rendering 3D Fluent Emoji using IDWriteTextLayout with pixel snapping, you can achieve crisp and clear results. Let’s break down the process:
Fluent Emoji: Fluent Emoji are a collection of familiar, friendly, and modern emoji from Microsoft. They add a touch of personality to your applications and user interfaces 1. You can find these emoji in the microsoft/fluentui-emoji repository on GitHub 1. Rendering Text with Pixel Snapping: IDWriteTextLayout provides a convenient way to render text, including emoji. When using ID2D1RenderTarget::DrawTextLayout, DirectWrite automatically performs pixel snapping, resulting in clear and sharp text. However, if you’re using ID2D1RenderTarget::DrawGlyphRun to render individual glyphs (like emoji), achieving pixel snapping can be more challenging. Challenges with DrawGlyphRun: DrawGlyphRun operates on individual glyphs, and it doesn’t have the same built-in pixel snapping behavior as DrawTextLayout. To address blurriness when rendering emoji with DrawGlyphRun, consider the following steps: Rounding Coordinates: Round the Y position of the glyphs to avoid blurring. You can use the following formula: int roundedY = (int)(baselineOrigin.Y + 0.5f);
Account for Transformations: Take into account any transformations applied to the render target using ID2D1RenderTarget::GetTransform. If there’s scaling or vertical shifts due to transformations, calculate the actual glyph position and then round it. Remember: DrawGlyphRun doesn’t operate on a layout like DrawTextLayout, so you don’t have the same control over pixel snapping. Coordinate rounding should consider both the baseline position and any applied transformations.
So, it seems that DrawTextLayout performs pixel snapping and that's why it renders 3D fluent emojis. However, DrawGlypgh doesn't and that's why it renders only 2D emojis.
Is this approach right? Thank you. Pedro Gil
Hi Castorix31,
I tested your code in Win11 and also this example (https://github.com/microsoft/Windows-universal-samples/blob/main/Samples/DWriteColorGlyph).
Your example uses this code to render the emojis pST->m_pD2DContext->DrawTextLayout(pt, pST->m_pTextLayout, pST->m_pMainBrush, D2D1_DRAW_TEXT_OPTIONS::D2D1_DRAW_TEXT_OPTIONS_NO_SNAP | D2D1_DRAW_TEXT_OPTIONS::D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT);
DWriteColorGlypgh example uses a CustomTextRenderer class and its method DrawGlyphRun to render the emojis.
I see a significant difference in the result in Win11:
1) DrawTextLayout renders the 3D fluent emojis 2) DWriteColorGlyph renders the emojis with more details, much faster than DrawTextLayout, but they are only plain, not the 3D fluent ones
Do you know what we should do to get the 3D fluent emojis when using a CustomTextRenderer class since it's much faster than DrawTextLayout?
Hope I was able to explain this question.
Thank you very much for your help. Pedro Gil