基于WebGL的半透明物体的渲染方法.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN115690302A(43)申请公布日2023.02.03(21)申请号202211409702.6(22)申请日2022.11.09(71)申请人杭州易知微科技有限公司地址310000浙江省杭州市余杭区仓前街道余杭塘路2301号海智中心8幢102室-3(72)发明人谢传金(74)专利代理机构杭州裕阳联合专利代理有限公司33289专利代理师吴文杰(51)Int.Cl.G06T15/20(2011.01)G06T15/04(2011.01)G06F16/957(2019.01)权利要求书2页说明书7页附图6页(54)发明名称基于WebGL的半透明物体的渲染方法(57)摘要本申请涉及3D图形渲染技术领域，公开了一种基于WebGL的半透明物体的渲染方法，包括：对所有物体进行第一次渲染，以获取每个像素位的最大深度值和区间片元数；基于所述最大深度值和区间片元数计算深度区间的切分数；基于所述切分数和最大深度值计算深度区间的单位距离；创建区间片元缓存纹理和深度区间索引纹理；将所述深度区间的单位距离、区间片元缓存纹理和深度区间索引纹理输入到片元着色器中，对所有物体进行第二次渲染；输出最终像素，本申请通过使用两个渲染过程和两侧屏幕后处理，完了顺序无关的半透明物体渲染，与深度剥离、逐像素链表算法相比，由于划分了区间，预先合并了一部分片元，相对更节省显存，并且性能要比深度剥离高。CN115690302ACN115690302A权利要求书1/2页1.一种基于WebGL的半透明物体的渲染方法，其特征在于，包括：对所有物体进行第一次渲染，以获取每个像素位的最大深度值和区间片元数；基于所述最大深度值和区间片元数计算深度区间的切分数；基于所述切分数和最大深度值计算深度区间的单位距离；创建区间片元缓存纹理和深度区间索引纹理；将所述深度区间的单位距离、区间片元缓存纹理和深度区间索引纹理输入到片元着色器中，对所有物体进行第二次渲染；输出最终像素。2.根据权利要求1所述的基于WebGL的半透明物体的渲染方法，其特征在于，获取每个像素位的最大深度值和区间片元数，包括：在第一次渲染之前，调用WebGL提供的方法depthFunc()来设置深度比较方式，其中，深度比较所采用的函数为greater；在第一次渲染中，设置混合模式的源混合因子和目标混合因子都为gl.ONE，且写入红色通道的值为1；当一个片元通过了片元着色器阶段，并进行到深度测试阶段时，如果该片元通过了深度测试以及后续渲染管线中的测试，则将该片元的深度写入深度缓冲区；当深度缓冲区已经存在某一片元的深度值时，则根据深度比较函数提供的策略来判断是否要覆盖当前已存在缓冲区中的深度值；当第一次渲染完成之后，深度缓冲区中将保存着每个像素位下所有片元的最大深度值，帧缓存的纹理红色通道中将存储当前像素位的区间片元数。3.根据权利要求1所述的基于WebGL的半透明物体的渲染方法，其特征在于，所述切分数的计算公式为：C＝Cb+(1+(N‑Nmin)÷(Nmax‑Nmin)×t)，t∈[0,+∞)，Cb∈[1,+∞)其中，C为切分数，Nmax为最大区间片元数，Nmin为最小区间片元数，Cb为由用户输入的区间切分基数，t为由用户输入的区间切分系数的常量值，N为输入数值区间片元数。4.根据权利要求3所述的基于WebGL的半透明物体的渲染方法，其特征在于，所述深度区间的单位距离的计算公式为：D＝Dmax÷C，Dmax∈[0，1]其中，D为深度区间的单位距离，Dmax为像素位的最大深度值，C为切分数。5.根据权利要求1所述的基于WebGL的半透明物体的渲染方法，其特征在于，所述区间片元缓存纹理包括第一纹理和第二纹理，其中，第一纹理用于储存区间片元缓存纹理中的颜色值，第二纹理用于储存区间片元缓存纹理中的深度值。6.根据权利要求5所述的基于WebGL的半透明物体的渲染方法，其特征在于，所述第一纹理的创建包括：调用WebGL提供的函数createTexture()创建第一纹理；将纹理格式设置为RGBA8；将纹理类型设置为UNSIGNED_BYTE；调用texImage2D()函数初始化像素，其中，pixels参数设置为JavaScript的ArrayBuffer实例，即完成第一纹理的创建。2CN115690302A权利要求书2/2页7.根据权利要求5所述的基于WebGL的半透明物体的渲染方法，其特征在于，所述第二纹理的创建包括：调用WebGL提供的函数createTexture()创建第二纹理；将纹理格式设置为R16UI；将纹理类型设置为UNSIGNED_INT；调用texImage2D()函数初始化像素，其中，pixels参数设置为JavaScript的ArrayBuffer实例，