games104 homework2 作业2 PA02 学习笔记

homework1是Build and Run Pilot Engine不用赘述，直接homework2

代码如下：

 

 

#version 310 es

 

#extension GL_GOOGLE_include_directive : enable

 

#include "constants.h"

 

layout(input_attachment_index = 0, set = 0, binding = 0) uniform highp subpassInput in_color;

 

layout(set = 0, binding = 1) uniform sampler2D color_grading_lut_texture_sampler;

 

layout(location = 0) out highp vec4 out_color;

 

void main()

{

    highp ivec2 lut_tex_size = textureSize(color_grading_lut_texture_sampler, 0);

    highp float _COLORS      = float(lut_tex_size.y);

 

    highp vec4 color       = subpassLoad(in_color).rgba;

    

    // texture(color_grading_lut_texture_sampler, uv)

    //(小白须知：R可认为是红色的强度，G是绿色的强度，B是蓝色的强度)

    //首先根据rendering.global.json文件里面看到LUT图的路径，然后我们根据这个路径找到LUT图打开看它的样子

    //我们会发现，它从左往右有16个颜色格子，而打开它的文件属性我们可以看到这个图片的分辨率为长256，宽16。

//而且每个格子内，越往右越红，越往下越绿，这说明单个格子内横轴方向向右为R值，竖轴方向向下为G值，u方向为横轴向右，v方向为纵轴向下

 

 

 

 //那么32个格子就是32种不同的B值下，对应的R和G值的图。如果用三维的色彩空间来表示的话会更直观

 

    //那么我们现在就要得到该像素点对应地在LUT图的单个格子中，以格子左上角顶点建系，求该像素点对应的LUT图在单个格子中对应的坐标

    //注意，这里的位置下标的单位长度为1个像素，就是在LUT图的单个格子上一个像素一个像素地数

    highp float red_subscript            = (_COLORS-1.0)*color.r;

    highp float green_subscript        = (_COLORS-1.0)*color.g;

    highp float blue_subscript           = (_COLORS-1.0)*color.b;

 

    highp float x_size=float(lut_tex_size.x);//求LUT图的横轴长度，一个像素点一个像素点地数

 

    //因为决定在哪个格子上取色采样的是B值，所以我们要用基础色的B值决定横轴坐标u

    highp float x1=red_subscript+ceil(blue_subscript)*_COLORS;//ceil(x)是求不大于x的最大整数

    highp float u1=x1/x_size;//因为读取LUT图用的坐标是uv坐标系，u和v的取值范围都是[0,1],所以这里除以LUT图的横向像素点数就转化为了uv坐标系

    highp float x2=red_subscript+floor(blue_subscript)*_COLORS;//floor(x)是求大于x的最小整数

    highp float u2=x2/x_size;

    //为什么上面我们要求两个u值，而且一个偏大一个偏小？

    //因为后面我们要对LUT图采样得到的值偏大的和偏小的按合理的比例混合得出合适的输出颜色，提高输出值的精度，防止走样

 

    //现在我们要根据u值求出v值，v值是由绿色也就是G值确定的

    highp float y=green_subscript;

    highp float v=y/_COLORS;//xy坐标系转化为uv坐标系

 

    //采样，在LUT图上采取一大一小两个样本

    highp vec2 p1=vec2(u1,v);

    highp vec2 p2=vec2(u2,v);

    highp vec3 color1=texture(color_grading_lut_texture_sampler,p1).xyz;

    highp vec3 color2=texture(color_grading_lut_texture_sampler,p2).xyz;

 

    //混合，其中frack是取小数部分的意思，按混合比例就是从前一个格子过度到后一个格子之间取舍，这里看颜色RGB的三维坐标系色彩空间图的话理解起来比较直观

    highp vec3 mixed_color=mix(color2,color1,fract(blue_subscript));

    

    out_color = vec4(mixed_color,color.a);

} 

使用自带的LUT图color_grading_lut_01.png，

运行效果：

 

自定义的LUT图，myLUT2.png如下，用PS调出来的LUT

 运行效果如下，目的是实现一个夕阳西下感觉的滤镜，感觉自己在art这块不是很行啊，自己用PS调出来的效果不是很完美。