(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210260733.3 (22)申请日 2022.03.16 (71)申请人 北京字跳网络技 术有限公司 地址 100190 北京市海淀区紫金 数码园4号 楼2层0207 (72)发明人 周超　文杰　 (74)专利代理 机构 上海光栅知识产权代理有限 公司 31340 专利代理师 王沛懿　马雯雯 (51)Int.Cl. G06T 15/00(2011.01) G06T 19/20(2011.01) G06F 9/451(2018.01) (54)发明名称 图形渲染方法、 装置及存 储介质 (57)摘要 本申请提供一种图形渲 染方法、 装置及存储 介质， 该方法通过确定待渲染图形， 进而， 基于待 渲染图形的进度值， 确定对应的待处理蒙层的偏 移值和顶点圆角大小， 其中， 上述待渲染图形包 括一个或多个顶点圆角， 从而， 基于上述待处理 蒙层的偏移值和顶点圆角大小， 在UI进行图形渲 染， 实现了对包含顶点圆角的图形渲染。 而且， 本 申请实施例在进行图形渲染时， 考虑待处理蒙层 与待渲染图形相交的顶点圆角， 从而可以实现待 渲染图形边缘效果的渲染， 如待渲染图形边框 (或者边缘)高光等效果的渲染， 提升了U I的质感 以及渲染效果的丰富 性。 权利要求书3页 说明书13页 附图4页 CN 114627225 A 2022.06.14 CN 114627225 A 1.一种图形渲染方法， 其特 征在于， 包括： 在用户界面显示待渲染图形， 所述待渲染图形包括 一个或多个顶点圆角； 响应于所述待渲染图形的进度值， 确定与 所述待渲染图形对应的待处理蒙层的偏移值 和顶点圆角大小， 所述待处 理蒙层覆盖所述待渲染图形的边框； 基于所述待处理蒙层的偏移值和顶点圆角大小， 在所述用户界面渲染所述待渲染图 形。 2.根据权利要求1所述的方法， 其特征在于， 所述基于所述待处理蒙层的偏移值和顶点 圆角大小， 在所述用户界面 渲染所述待渲染图形， 包括： 基于所述待处理蒙层的偏移值， 在所述用户界面对所述待渲染图形进行顶点着色， 并 基于顶点着色的待渲 染图形和所述待处理蒙层的顶点圆角大小， 在所述用户界面对剩余的 各个待渲染像素点， 进行片段着色。 3.根据权利要求2所述的方法， 其特征在于， 所述基于所述待处理蒙层的偏移值， 在所 述用户界面对所述待渲染图形进行顶点着色， 包括： 基于所述待处理蒙层节点在世界空间下的三维姿势， 将待渲染顶点的三维位置从本地 空间转换到蒙层空间； 根据转换后的三维位置和所述待处理蒙层的偏移值， 在所述用户界面对所述待渲染图 形进行顶点着色。 4.根据权利要求3所述的方法， 其特征在于， 所述基于顶点着色的待渲染图形和所述待 处理蒙层的顶点圆角大小， 在所述用户界面对剩余的各个待渲染像素点， 进行片段着色， 包 括： 基于顶点着色的待渲染图形， 判断所述剩余的各个待渲染像素点是否在所述待处理蒙 层区域外； 若待渲染像素点i不在所述待处理蒙层区域外， 则判断所述待渲染像素点i是否在所述 待处理蒙层的顶点圆角区域外， 其中， 所述待渲 染像素点i为所述剩余的各个待渲 染像素点 中的任意一个待渲染像素点， i＝1, …,n， n为整数， n根据所述剩 余的各个待渲染像素点的 数目确定； 若所述待渲染像素点i不在所述待处理蒙层的顶点圆角区域外， 则在所述用户界面输 出所述待渲染像素点 i的原始颜色。 5.根据权利要求4所述的方法， 其特征在于， 在所述判断剩余的各个待渲染像素点是否 在所述待处 理蒙层区域外之后， 还 包括： 若所述待渲染像素点i在所述待处理蒙层区域外， 则在所述用户界面对所述待渲染像 素点i不着色或输出全透明颜色。 6.根据权利要求4或5所述的方法， 其特征在于， 所述判断剩余的各个待渲染像素点是 否在所述待处 理蒙层区域外， 包括： 根据所述待渲染顶点的二维投影和光 栅化， 获得所述待渲染像素点 i的二维坐标； 基于所述待渲染像素点i的二维坐标， 判断所述待渲染像素点i是否在所述待处理蒙层 区域外。 7.根据权利要求4所述的方法， 其特征在于， 在所述判断所述待渲染像素点i是否在所 述待处理蒙层的顶点圆角区域外之后， 还 包括：权　利　要　求　书 1/3 页 2 CN 114627225 A 2若所述待渲染像素点i在所述待处理蒙层的顶点圆角区域外， 则在所述用户界面对所 述待渲染像素点 i不着色或输出全透明颜色。 8.根据权利要求4或7所述的方法， 其特征在于， 所述待渲染图形包括 四个圆角， 所述待 处理蒙层为覆盖所述待渲染图形的边框的矩形蒙层； 所述判断所述待渲染像素点 i是否在所述待处 理蒙层的顶点圆角区域外， 包括： 根据所述待渲染顶点的二维投影和光 栅化， 获得所述待渲染像素点 i的二维坐标； 基于所述待渲染像素点i的二维坐标， 确定与所述待渲染像素点i距离最近的所述待处 理蒙层的顶点圆角； 计算与所述待渲染像素点i距离最近的所述待处理蒙层的顶点圆角的圆心和外接矩 形； 根据所述圆心、 所述外接矩形和所述待渲染像素点i的二维坐标， 判断所述待渲染像素 点i是否在所述待处 理蒙层的顶点圆角区域外 。 9.根据权利要求1至5中任一项所述的方法， 其特征在于， 所述响应于所述待渲染图形 的进度值， 确定与所述待渲染图形对应的待处 理蒙层的偏移值和顶点圆角大小， 包括： 获取所述待渲染图形的长度； 计算所述长度与所述进度值的乘积， 将计算的乘积作为所述待处理蒙层相对所述待渲 染图形中心点的偏移值； 根据所述进度值和所述偏移值， 确定所述待处理蒙层与 所述待渲染图形相交的顶点 圆 角大小。 10.根据权利要求9所述的方法， 其特征在于， 所述根据所述进度值和所述偏移值， 确定 所述待处 理蒙层与所述待渲染图形相交的顶点圆角大小， 包括： 根据所述进度值和所述待渲染图形的边框的大小， 确定所述待渲染图形的进度线的长 短； 基于所述进度线的长短和所述偏移值， 确定所述待处理蒙层与 所述待渲染图形相交的 顶点圆角大小。 11.一种图形渲染装置， 其特 征在于， 包括： 图形显示模块， 用于在用户界面显示待渲染图形， 所述待渲染图形包括一个或多个顶 点圆角； 蒙层处理模块， 用于响应于所述待渲染图形的进度值， 确定与所述待渲染图形对应的 待处理蒙层的偏移值和顶点圆角大小， 所述待处 理蒙层覆盖所述待渲染图形的边框； 图形渲染模块， 用于基于所述待处理蒙层的偏移值和顶点圆角大小， 在所述用户界面 渲染所述待渲染图形。 12.根据权利要求1 1所述的装置， 其特 征在于， 所述图形渲染模块， 具体用于： 基于所述待处理蒙层的偏移值， 在所述用户界面对所述待渲染图形进行顶点着色， 并 基于顶点着色的待渲 染图形和所述待处理蒙层的顶点圆角大小， 在所述用户界面对剩余的 各个待渲染像素点， 进行片段着色。 13.一种图形渲染设备， 其特 征在于， 包括： 处理器； 存储器； 以及权　利　要　求　书 2/3 页 3 CN 114627225 A 3