首页 > 其他分享 >Opengl: 使用glsl 将纹理处理成圆角的几种思路

Opengl: 使用glsl 将纹理处理成圆角的几种思路

时间:2024-08-09 17:42:09浏览次数:5  
标签:glsl 圆角 Opengl float TexCoord 纹理 vec4 vec2 uniform

在GLSL中实现纹理圆角效果可以通过多种方法,这些方法各有其优缺点和适用场景。以下是几种常见的实现方法:

1. 使用距离函数

最常见的方法是计算像素到中心的距离,并使用该距离来决定像素是否显示。

#version 330 core

in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D texture1;
uniform vec2 resolution;
uniform float radius;

void main()
{
    vec2 center = vec2(0.5, 0.5); // 中心位置
    vec2 uv = TexCoord; // 当前纹理坐标

    float dist = length(uv - center); // 计算距离
    float alpha = smoothstep(radius, radius + 0.01, dist); // 创建圆角掩码

    vec4 color = texture(texture1, TexCoord);
    FragColor = vec4(color.rgb, color.a * (1.0 - alpha)); // 应用掩码
}

2. 使用圆形遮罩纹理

你可以创建一个圆形遮罩纹理,用于在片段着色器中结合原始纹理。这个方法有时更灵活,尤其是在处理多个不同的形状时。

#version 330 core

in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D texture1;
uniform sampler2D maskTexture; // 圆形遮罩纹理

void main()
{
    vec4 texColor = texture(texture1, TexCoord);
    float maskAlpha = texture(maskTexture, TexCoord).r; // 从遮罩纹理中取样
    FragColor = vec4(texColor.rgb, texColor.a * maskAlpha); // 应用遮罩
}

3. 利用discard语句

你可以在片段着色器中使用discard语句来完全丢弃不在圆角区域内的像素。

#version 330 core

in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D texture1;
uniform float radius;

void main()
{
    vec2 center = vec2(0.5, 0.5); // 中心位置
    vec2 uv = TexCoord; // 当前纹理坐标

    float dist = length(uv - center); // 计算距离
    if (dist > radius) {
        discard; // 丢弃超出圆角区域的像素
    }

    vec4 color = texture(texture1, TexCoord);
    FragColor = color; // 输出纹理颜色
}

4. 利用Shader中的数学函数

在一些情况下,你可能需要创建更复杂的圆角效果,结合其他数学函数来实现。例如,可以结合高斯模糊函数或其他形状的遮罩来创建柔和的边缘效果。

#version 330 core

in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D texture1;
uniform vec2 resolution;
uniform float radius;

void main()
{
    vec2 center = vec2(0.5, 0.5); // 中心位置
    vec2 uv = TexCoord; // 当前纹理坐标

    float dist = length(uv - center); // 计算距离
    float alpha = 1.0 - smoothstep(radius - 0.01, radius, dist); // 更柔和的圆角

    vec4 color = texture(texture1, TexCoord);
    FragColor = vec4(color.rgb, color.a * alpha); // 应用圆角
}

5. 使用Alpha测试

你可以先将纹理的透明度设置为圆形区域,然后在渲染管线的早期阶段进行Alpha测试来丢弃不需要的像素。

#version 330 core

in vec2 TexCoord;
out vec4 FragColor;

uniform sampler2D texture1;
uniform float radius;

void main()
{
    vec2 center = vec2(0.5, 0.5); // 中心位置
    vec2 uv = TexCoord; // 当前纹理坐标

    float dist = length(uv - center); // 计算距离
    float alpha = smoothstep(radius, radius + 0.01, dist); // 圆角掩码

    vec4 color = texture(texture1, TexCoord);
    if (color.a * (1.0 - alpha) < 0.1) {
        discard; // 根据透明度决定是否丢弃
    }

    FragColor = color; // 输出纹理颜色
}

总结

这些方法各有其特点和应用场景。选择合适的方法取决于具体的需求和性能考虑。例如,使用discard语句可能对性能有影响,但非常直观;而使用遮罩纹理或距离函数则可能更灵活,适用于不同的场景.

                                                           

标签:glsl,圆角,Opengl,float,TexCoord,纹理,vec4,vec2,uniform
From: https://www.cnblogs.com/lianshanIn17/p/18351116

相关文章

  • 【面试高频,必知必会】OpenGL渲染流程
    ......
  • 矩形元素加圆角
    矩形元素加圆角要解决页面中矩形元素4px圆角样式属性由于样式优先级导致的禁用问题,可以尝试以下几种方法:使用更具体的选择器:确保您的选择器比覆盖样式的选择器更具体。例如,如果覆盖样式使用的是类选择器,您可以使用ID选择器、属性选择器或结合更多的父元素来提高选择器的特异......
  • border-image实现与圆角渐变边框实例页面
    <h4>1.父元素圆角</h4><divclass="father"><divclass="border-gradient">圆角渐变边框</div></div><h4>2.clip-path剪裁</h4><divclass="border-gradientclip-path">圆角渐变边框</div&......
  • LearnOpenGL 笔记 -- VAO & VBO
    1前言VAO和VBO属于我们学习opengl最先接触的几个概念,最开始学习的时候有可能无法直观的理解这个概念的作用和使用方法。笔者也是opengl新手,在此记录学习的相关笔记,便于之后进行查看。本文主要参考learnopengl教程以及opengl官网中的用法和解释,文中的代码实例使用opengl3.3,过......
  • OpenGL实现3D游戏编程【连载2】——了解并创建3D空间模型
    1、本节实现的内容上一节我们创建一个简单的窗口,本节我们需要了解一下细节内容,同时为了方便观看,我们需要显示一个世界坐标轴,建立一个直观的三维空间。2、我们的眼睛设定(gluPerspective函数)上一节课,我们创建了一个简单的opengl窗口,并显示了一个简单的3d模型正方体,这节我......
  • Echarts 实现圆角环形图
     第一种方式:使用bar实现想要的效果:代码实现:constchartData={title:{text:'97',//圆环中间数字textStyle:{color:'#222222',fontSize:20,},subtext:'成功数',subtextS......
  • webgl 相对 opengl有什么优缺点
    WebGL和OpenGL是两种常用的图形渲染API,但它们有一些显著的不同和各自的优缺点。此外,还有其他一些图形API也可以用于不同的应用场景。下面详细介绍WebGL与OpenGL的对比,并列举一些其他选择。WebGLvs.OpenGLWebGL的优点跨平台支持:WebGL运行在浏览器中,无需安装额......
  • GLSL教程 第十三章:综合项目:创建一个完整的渲染场景(一更)
     目录13.1项目规划和设计13.1.1项目目标13.1.2设计要求13.2实现场景中的光照、材质和纹理13.2.1创建基础场景13.2.2应用材质和纹理13.3集成高级渲染效果和后期处理13.3.1阴影映射(ShadowMapping)13.3.2环境光遮蔽(AO)13.3.3简单的景深效果(DepthofField)13......
  • OpenGL3.3_C++_Windows(32)
    demoSSAOSSAO环境光照(AmbientLighting):光的散射,我们通过一个固定的常量作为环境光的模拟,但是这种固定的环境光并不能很好模拟散射,因为环境光不是一成不变的,环境光遮蔽:让(褶皱、孔洞)等变暗的方法近似模拟出间接光照,但是这一技术会带来很大的性能开销,因为它还......
  • GLSL教程 第11章:性能优化和调试
    目录11.1GLSL着色器的性能考量11.1.1减少计算复杂度避免不必要的计算使用适当的数据类型优化数学操作11.1.2减少内存访问减少纹理采样次数使用纹理缓存11.1.3优化数据传输减少数据传输量批处理(Batching)11.1.4使用高级渲染技术LevelofDetail(LOD)延迟渲染......