时间戳

首页 > 解决方案 > GLSL 将片段着色器蒙版拟合到顶点坐标中

opengl-es - GLSL 将片段着色器蒙版拟合到顶点坐标中

问题描述

我的片段着色器中有这个笑脸面具，它占据了整个窗口(1)。

我将较小的坐标传递给顶点着色器，试图将笑脸缩小到一个较小的框(2)中（期望的结果）。

但是，结果是(3)。

在此处输入图像描述

如何使片段着色器适合我传递给顶点着色器的坐标，使其看起来像(2)而不是(3)？

以下是相关的代码。如果您需要更多代码，请告诉我。

-- 顶点着色器 --

#version 300 es
                           
layout(location=0) in vec3 vPosition;

void main() {
    gl_Position = vec4(vPosition, 1.0);
}

-- 片段着色器 --

#version 300 es
                               
precision mediump float;       

uniform float width;           
uniform float height;          

out vec4 fragColor;            

float Circle(vec2 uv, vec2 p, float r, float blur) {
    float d = length(uv - p);  
    return smoothstep(r, r-blur, d);
} 

void main() {                  
    vec2 uv = gl_FragCoord.xy / vec2(width, height);

    uv -= 0.5;                 
    uv.x *= width / height;
      
    float blur = 0.005;        
      
    float c = Circle(uv, vec2(0., 0.), 0.25, blur);
    c -= Circle(uv, vec2(-0.1, 0.1), 0.05, blur);
    c -= Circle(uv, vec2(0.1, 0.1), 0.05, blur);
    
    float mouth = Circle(uv, vec2(0., 0.), 0.15, blur);
    mouth -= Circle(uv, vec2(0., 0.05), 0.15, blur);
  
    c -= clamp(mouth, 0., 1.); 
  
    fragColor = vec4(vec3(1., 1., 0.) * c, 1.0);
}

谢谢！

编辑1：

这是在之前/之后传递给顶点着色器的两组坐标。

在此处输入图像描述

编辑2：

感谢Rabbid76的解决方案！下面显示了我最终传递给顶点着色器的 uv 坐标。

    // location = 0
    GLfloat vertices[] = { 
        -0.8, -0.8, 0.0,
        -0.2, -0.8, 0.0,
        -0.2, -0.2, 0.0,
        -0.8, -0.2, 0.0
    };

    // location = 1
    GLfloat uv[] = { 
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0
    };

标签： opengl-esglslshaderglsles

解决方案

为uv坐标添加一个附加属性。属性必须在 [0.0, 1.0] 范围内。(0, 0 左下角和 (1, 1) 右上角。将属性从顶点着色器传递给片段着色器：

#version 300 es
                           
layout(location=0) in vec3 vPosition;
layout(location=1) in vec2 vUV;

out vec2 uv;

void main() 
{
    uv = vUV;
    gl_Position = vec4(vPosition, 1.0);
}

使用片段着色器输入uv而不是vec2 uv = gl_FragCoord.xy / vec2(width, height);：

// [...]

in vec2 uv;

void main()
{
    // vec2 uv = gl_FragCoord.xy / vec2(width, height); DELETE

    // [...]
}

推荐阅读