2、片元着色器之有向距离场(SDF)运算:并集、差集、交集

1、并集

cpp 复制代码
float sdCircle(vec2 uv,float r){
    return length(uv)-r;
}
float sdRect(vec2 uv,float r){
    return max(abs(uv.x),abs(uv.y))-r;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float w = 1.0/iResolution.y;
	// 计算纹理坐标
    vec2 uv = fragCoord/iResolution.xy;
    // 将纹理坐标系原点移动到屏幕中央
    uv-=0.5;
	// 调整 x 轴比例,使得坐标系纵横比一致
    uv.x*=iResolution.x/iResolution.y;
    vec3 col = vec3(0.0);
	// `sdRect(uv - vec2(0.1, 0.1), 0.2)`计算当前 uv 坐标到中心在 (0.2, 0.2)、半径为 0.2 的矩形的距离
    float r= sdRect(uv-vec2(0.1,0.1),0.2);
    // 大于0代表像素点不在矩形范围内
    r = r > 0.0 ? 0.0:1.0;
   
    float c = sdCircle(uv-vec2(-0.1,-0.1),0.2);
    c = c > 0.0 ? 0.0:1.0;
	
	// 并集就是像素属于圆或者矩形都可以着色,即r=1 or c=1
    float result = max(r,c);//r和c只能为0或1,取最大值即有一个为1结果就是1

    col = mix(col,vec3(1.0,0.0,1.0),result);
    
    fragColor = vec4(col,1.0);
}

2、差集

cpp 复制代码
float sdCircle(vec2 uv,float r){
    return length(uv)-r;
}
float sdRect(vec2 uv,float r){
    return max(abs(uv.x),abs(uv.y))-r;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float w = 1.0/iResolution.y;
	// 计算纹理坐标
    vec2 uv = fragCoord/iResolution.xy;
    // 将纹理坐标系原点移动到屏幕中央
    uv-=0.5;
	// 调整 x 轴比例,使得坐标系纵横比一致
    uv.x*=iResolution.x/iResolution.y;
    vec3 col = vec3(0.0);
	// `sdRect(uv - vec2(0.1, 0.1), 0.2)`计算当前 uv 坐标到中心在 (0.2, 0.2)、半径为 0.2 的矩形的距离
    float r= sdRect(uv-vec2(0.1,0.1),0.2);
    // 大于0代表像素点不在矩形范围内
    r = r > 0.0 ? 0.0:1.0;
   
    float c = sdCircle(uv-vec2(-0.1,-0.1),0.2);
    c = c > 0.0 ? 0.0:1.0;
	
	// 差集就是像素只属于圆或者只属于矩形才能着色,即(r=1 and c=0)&&(r=0 and c=1)
    float result = abs(r-c);

    col = mix(col,vec3(1.0,0.0,1.0),result);
    
    fragColor = vec4(col,1.0);
}

3、交集

cpp 复制代码
float sdCircle(vec2 uv,float r){
    return length(uv)-r;
}
float sdRect(vec2 uv,float r){
    return max(abs(uv.x),abs(uv.y))-r;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float w = 1.0/iResolution.y;
	// 计算纹理坐标
    vec2 uv = fragCoord/iResolution.xy;
    // 将纹理坐标系原点移动到屏幕中央
    uv-=0.5;
	// 调整 x 轴比例,使得坐标系纵横比一致
    uv.x*=iResolution.x/iResolution.y;
    vec3 col = vec3(0.0);
	// `sdRect(uv - vec2(0.1, 0.1), 0.2)`计算当前 uv 坐标到中心在 (0.2, 0.2)、半径为 0.2 的矩形的距离
    float r= sdRect(uv-vec2(0.1,0.1),0.2);
    // 大于0代表像素点不在矩形范围内
    r = r > 0.0 ? 0.0:1.0;
   
    float c = sdCircle(uv-vec2(-0.1,-0.1),0.2);
    c = c > 0.0 ? 0.0:1.0;
	
	// 交集就是像素既属于圆又属于矩形才能着色,即(r=1 and c=1)&&(r=1 and c=1)
    float result = r*c;

    col = mix(col,vec3(1.0,0.0,1.0),result);
    
    fragColor = vec4(col,1.0);
}
相关推荐
徐子竣11 天前
Unity Shader开发-着色器变体(1)-着色器变体概述
unity·游戏引擎·着色器
0点51 胜12 天前
像素着色器没有绘制的原因
着色器
爱怪笑的小杰杰20 天前
Cesium圆锥渐变色实现:融合顶点着色器、Canvas动态贴图与静态纹理的多方案整合
贴图·着色器
wcjwdq1 个月前
“顶点着色器”和“片元着色器”是先处理完所有顶点再统一进入片元阶段,还是一个顶点处理完就去跑它的片元?
算法·着色器
冒泡P1 个月前
Unity Shader入门(更新中)
unity·c#·游戏引擎·图形渲染·着色器
龙湾开发1 个月前
计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 13.几何着色器(二)爆炸效果&修改图元类型
c++·笔记·学习·3d·图形渲染·着色器
qziovv1 个月前
WebGL 3着色器和GLSL
webgl·着色器
前端小崔1 个月前
从零开始学习three.js(18):一文详解three.js中的着色器Shader
前端·javascript·学习·3d·webgl·数据可视化·着色器
一个程序员(●—●)2 个月前
法线纹理采样+可视化Shader编辑器
unity·编辑器·着色器
米芝鱼2 个月前
Unity URPShader:实现和PS一样的色相/饱和度调整参数效果(修复)
游戏·unity·游戏引擎·图形渲染·opengl·着色器