[發明專利]圖形渲染方法、裝置及存儲介質

在審

• 申請號: 202210260733.3
• 申請日: 2022-03-16
• 公開（公告）號: CN114627225A
• 公開（公告）日: 2022-06-14
• 發明（設計）人: 周超;文杰
• 申請（專利權）人: 北京字跳網絡技術有限公司
• 主分類號: G06T15/00
• 分類號: G06T15/00;G06T19/20;G06F9/451
• 代理公司: 上海光柵知識產權代理有限公司 31340
• 代理人: 王沛懿;馬雯雯

本申請提供一種圖形渲染方法、裝置及存儲介質，該方法通過確定待渲染圖形，進而，基于待渲染圖形的進度值，確定對應的待處理蒙層的偏移值和頂點圓角大小，其中，上述待渲染圖形包括一個或多個頂點圓角，從而，基于上述待處理蒙層的偏移值和頂點圓角大小，在UI進行圖形渲染，實現了對包含頂點圓角的圖形渲染。而且，本申請實施例在進行圖形渲染時，考慮待處理蒙層與待渲染圖形相交的頂點圓角，從而可以實現待渲染圖形邊緣效果的渲染，如待渲染圖形邊框(或者邊緣)高光等效果的渲染，提升了UI的質感以及渲染效果的豐富性。

技術領域

本申請涉及信息展示技術，尤其涉及一種圖形渲染方法、裝置及存儲介質。

背景技術

隨著軟件技術的發展，越來越多的個性化界面提供給了用戶。通常，用戶在使用電子設備時，經常會遇到圖形渲染的情形，如以進度條渲染為例，用戶等待，例如等待程序運行完成、等待頁面加載成功，還例如，在一些直播平臺中會有抽獎功能，觀看直播的用戶等待開獎的結果。針對上述這些情形，用戶界面(User Interface，UI)會提供一個進度條，用于顯示這些事件的進行程度。

相關技術中，圖形渲染通常用于渲染特定形狀或樣式規律的圖形，如上述進度條，渲染方式主要針對特定形狀的前景條或樣式規律的前景條。

但是，需要渲染的圖形樣式多種多樣，現有圖形渲染方法無法覆蓋所有情況。如需要渲染的圖形包含頂點圓角，同時具有邊框(或者邊緣)高光等效果，無法用現有圖形渲染方法解決。

發明內容

本申請提供一種圖形渲染方法、裝置及存儲介質，以解決對包含頂點圓角的圖形渲染問題，同時實現圖形邊緣效果的渲染。

第一方面，本申請實施例提供一種圖形渲染方法，包括：

在UI顯示待渲染圖形，所述待渲染圖形包括一個或多個頂點圓角；

響應于所述待渲染圖形的進度值，確定與所述待渲染圖形對應的待處理蒙層的偏移值和頂點圓角大小，所述待處理蒙層覆蓋所述待渲染圖形的邊框；

基于所述待處理蒙層的偏移值和頂點圓角大小，在所述UI渲染所述待渲染圖形。

在一種可能的實現方式中，所述基于所述待處理蒙層的偏移值和頂點圓角大小，在所述UI渲染所述待渲染圖形，包括：

基于所述待處理蒙層的偏移值，在所述UI對所述待渲染圖形進行頂點著色，并基于頂點著色的待渲染圖形和所述待處理蒙層的頂點圓角大小，在所述UI對剩余的各個待渲染像素點，進行片段著色。

在一種可能的實現方式中，所述基于所述待處理蒙層的偏移值，在所述UI對所述待渲染圖形進行頂點著色，包括：

基于所述待處理蒙層節點在世界空間下的三維(3-dimension，3D)姿勢，將待渲染頂點所在的3D位置從本地空間轉換到蒙層空間；

根據轉換后的3D位置和所述待處理蒙層的偏移值，在所述UI對所述待渲染圖形進行頂點著色。

在一種可能的實現方式中，所述基于頂點著色的待渲染圖形和所述待處理蒙層的頂點圓角大小，在所述UI對剩余的各個待渲染像素點，進行片段著色，包括：

基于頂點著色的待渲染圖形，判斷所述剩余的各個待渲染像素點是否在所述待處理蒙層區域外；

若待渲染像素點i不在所述待處理蒙層區域外，則判斷所述待渲染像素點i是否在所述待處理蒙層的頂點圓角區域外，其中，所述待渲染像素點i為所述剩余的各個待渲染像素點中的任意一個待渲染像素點，i＝1,…,n，n為整數，n根據所述剩余的各個待渲染像素點的數目確定；

若所述待渲染像素點i不在所述待處理蒙層的頂點圓角區域外，則在所述UI輸出所述待渲染像素點i的原始顏色。