Redmi K40 webGL link

background

In millet mi 11, notice the millet mall app has the function of the mobile phone 360 panoramic experience, under the open for the first time gave me the feeling is very shock, shock is not a model, but see it dazzle colour of the back cover that can render true, feeling and true machine is the same, then I will download the mobile phone models, their material to do, When I found that I could not realize this kind of colorful material, I lost my interest. I thought, I am a programmer, what do I care about the material? I just let the modeler give it to me. Months passed in this way

found

In recent time, I’m thinking model in the software of programmable shaders, in the process of learning node, saw a attribute is the Fresnel, before also has to understand Fresnel is water transmission objects on the physical phenomena, such as when the line of sight and the smaller the Angle of the normal vector is, the more is not easy to form a reflection, the Angle is close to 90 °, the reflection is more and more obvious. The diagram below:

Originally, I had a little understanding of Fresnel reflection, but it is basically a physical knowledge point that can be thought of on transmitted objects, and I did not think about the dazzling material at all. Later, when I carried out the color output of Fresnel attribute alone, I suddenly found that this feeling is somewhat related to the dazzling back cover material, and the effect is as follows:

But it’s not quite the same. I tried to adjust Fresnel’s approach to face orientation (which is also Fresnel, but implemented in a slightly different way). The result is as follows:

In the model software, when I did the effect of material, I found that this was exactly what I wanted, and the feeling was very consistent with the dazzling effect. The rest was to change the color according to the gray scale, so I started my practice.

implementation

The picture below is the whole process of making dazzling colors. The picture is large and can be enlarged to view:

  1. You get the Fresnel value

First is the main, is also a former half Fresnel value, the article said it will use the vector dot product concept, the value of the dot product is simply a vector of length times another vector projection in the length of the first vector, if the Angle is 90 °, the length of the projection is 0, the result is 0, if the Angle from 90 °, the result of the dot product will be more and more big.

Have the knowledge, look at the Fresnel, Fresnel’s value is based on the line of sight and the surface of the object vector to point multiply calculated, and the face amount is not good for, on the contrary, the surface normal vector is we know, so there will be a line of sight and the normal vector dot product, resulting value, and then is 1 minus the Fresnel values (but there is no need to be minus 1, When mixing colors, pass this value and switch the color order.

The result is the three nodes on the left in the figure above:

The relevant GLSL codes are as follows (based on three) :

    // Chip shader
    float dot_6 = dot(normalize(vViewPosition), normalize(vNormal));
Copy the code
  1. Colors are mixed according to Fresnel values

When I observed the blue model of MI11, I found that it actually had three color changes, from looking directly at the back cover to looking at the back cover and tangent to the back cover, the changes in sequence are as follows:

Alternating white/light blue -> dark blue -> white

The diagram below:

One of the first stage to the second stage, and the second stage to the last stage is easy to understand, according to the Fresnel values of mixed color processing, in deep blue to white phase Fresnel value fine-tuning, the reason is because I don’t want to let white influence scope is too large, the back cover and near the tangent of the line of sight to be effective, and made a smooth handling:

The relevant GLSL codes are as follows (based on three) :

    // Chip shader. vec4 mix_11 = mix( vec4(150./256..152./256..161./256..1.0), / / deep blue
        mix_10, // White/light blue alternating mixed colors
        dot_6
    );
    vec4 mix_15 = mix(
        vec4(210./256..214./256..223./256..1.0), / / white
        mix_11, // Mix the colors of the first two stages
        smoothstep(0.0.1.0, (dot_6 * 8.0)));Copy the code

Next, the first stage (alternating white/light blue) is different from the later stages. This stage alternates instead of appearing once. I also mix colors according to Fresnel values, but multiply by a multiple to make the value greater than PI. Then sin curve and normalize (change the value to 0~1), so that we can get the alternating gray value, and then mix the color according to this value, all steps are completed, and finally output the mixed color:

The relevant GLSL codes are as follows (based on three) :

    // Chip shader. vec4 mix_10 = mix( vec4(194./256..198./256..212./256..1.0), 
        vec4(220./256..234./256..243./256..1.0), 
        ((sin((dot_6 * 20.0)) + 1.0) / 2.0));Copy the code

Example:

I tried to draw three colors of K40Pro white model to make a demo with the above shader, and the effect was consistent with the expectation.