• GAMES104 作业2-ColorGrading


    ColorGrading网上资料很就多就不介绍了,简单来说就是将ps中一个像素的r-g-b值转换成x-y-z坐标映射到一个三维的颜色的颜色表(LUT)得到新的颜色,从而使场景更具电影感和好看。

    以104中的色链LUT为例(ps中导出的LUT为矩形,但原理相同)

    在这里插入图片描述

    对色链LUT简单图解就如上图所示,以颜色RG为xy值形成一个2d贴图,将一系列这样的2d贴图以B值作为索引连接在一起,成为一个可以使用RGB作为XYZ坐标进行索引查找颜色值的3维数组,注意这里B值不是连续的(为了降低LUT内存占用,压缩),后续具体颜色值通过插值获得。

    以上图的点p为例,现在场景中一个像素点p的颜色值为(r, g, b),去查找表中发现b值位于b2和b3之间,则取b2贴图和b3贴图中(r,g)对应的两个点L,R做线性lerp即可得到p映射后的值。

    先求出2d贴图数量
    blockNum = lut.width / lut.height

    求出b值位置
    blockPLeft = floor(blockNum * p.r)
    blockPRight = ceil(blockNum * p.r)

    求出左贴图和右贴图中对应像素(L、R)的u值。除以lut长度归一化到0-1范围
    uL = (blockPLeft * lut.height + p.r * lut.height) / lut.width
    uR= (blockPRight * lut.height + p.r * lut.height) / lut.width

    求出v值,注意计算方式和lut的格式有关系
    v = p.g

    根据uv值对lut进行采样
    pixelL = texture(lut, vec2(uL, v))
    pixelR = texture(lut, vec2(uR, v))

    根据b值对采样结果进行插值
    weight = fract(blockNum * p.r)
    outColor = pixelL * weight + pixelR * (1 - weight)

    对于104的作业,只需要改color_grading.frag即可,还是比较简单的

    highp ivec2 lut_tex_size = textureSize(color_grading_lut_texture_sampler, 0);
    
    highp vec4 color       = subpassLoad(in_color).rgba;
    
    highp vec2 lutSize = vec2(lut_tex_size.x, lut_tex_size.y);
    
    highp float blockNum = lutSize.x / lutSize.y;
    
    highp float blockIndexL = floor(color.b * blockNum);
    highp float blockIndexR = ceil(color.b * blockNum);
    
    highp float lutCoordXL = (blockIndexL * lutSize.y + color.r * lutSize.y) / lutSize.x;
    highp float lutCoordXR = (blockIndexR * lutSize.y + color.r * lutSize.y) / lutSize.x;
    
    highp float lutCoorY = color.g;
    
    highp vec2 lutCoordL = vec2(lutCoordXL, lutCoorY);
    highp vec2 lutCoordR = vec2(lutCoordXR, lutCoorY);
    
    highp vec4 lutcolorL = texture(color_grading_lut_texture_sampler, lutCoordL);
    highp vec4 lutcolorR = texture(color_grading_lut_texture_sampler, lutCoordR);
    
    highp float weight = fract(color.b * lutSize.y);
    
    out_color = mix(lutcolorL, lutcolorR, weight);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述


    注意出现这种花纹可能是没有正确混合b值

    最后我的结果。
    在这里插入图片描述

    104小引擎中的color grading是post-tonemapping的,根据real-time rendering4th 8.2.3章指出,现在业界更多喜欢使用pre-tonemapping的colorgrading,可以提高更高的画面质量和保真度。
    但是我太菜了呜呜,完全不会用vulkan,改了很久pre-tonemapping没有成功。想加一个pass做个描边,加上去才发现不知道怎么给ps传深度。。。学习路任重而道远,后续补上。

  • 相关阅读:
    使用 DM binary 部署 DM 集群
    使用layui框架实战之栅格系统和菜单评分组件运用心得
    OCR表格识别(三)——文本检测与文本识别理论学习
    Google Earth Engine(GEE)——建立一个图表(ui.Chart.array.values)chart散点图
    Java学习路线(14)——Map集合类
    Lammps实现纳米孔道内瓦斯驱替过程(包含In文件)
    论坛项目知识回顾
    PE文件解析(5):重定位表详解
    MyBatis学习:自定义别名
    【爬虫】第五部分 selenium库
  • 原文地址:https://blog.csdn.net/t1370620378/article/details/125414521