1、片元着色器之有向距离场(SDF)

1、什么是有向距离场?

有向距离场(Signed Distance Field, SDF)是一种在计算机图形学中常用的概念,用于描述空间中某一点到某个形状表面距离的有符号距离。SDF 被广泛应用在实时渲染、碰撞检测、形状表示等场景中。最典型的例子:判断一个点是否在圆内:点到圆心的距离和半径的差是否为负值,负值说明在圆内,反之则在圆上或圆外。

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.2, 0.2), 0.2)`计算当前 uv 坐标到中心在 (0.2, 0.2)、半径为 0.2 的矩形的距离
    float r= sdRect(uv-vec2(0.2,0.2),0.2);
    // 大于0代表像素点不在矩形范围内
    r = r > 0.0 ? 0.0:1.0;
    // mix(x,y,a)=x×(1−a)+y×a
    col = mix(col,vec3(0.0,0.0,1.0),r);
   
    float c = sdCircle(uv-vec2(-0.2,-0.2),0.2);
    c = c > 0.0 ? 0.0:1.0;
    col = mix(col,vec3(1.0,0.0,1.0),c);
    
    fragColor = vec4(col,1.0);
}

3、结果

相关推荐
开发游戏的老王6 天前
虚幻引擎虚拟制片入门教程 之 3D渲染基础知识:模型、材质、贴图、UV等
3d·虚幻·材质·模型·着色器·uv
云澈ovo7 天前
光线追踪加速:NVIDIA OptiX在Maya中的着色器编译优化
maya·着色器
郝学胜-神的一滴11 天前
中秋特别篇:使用QtOpenGL和着色器绘制星空与满月
开发语言·c++·算法·软件工程·着色器·中秋
淡海水11 天前
【URP】Unity[内置Shader]光照着色器Lit
unity·游戏引擎·shader·urp·着色器·lit
Duo1J21 天前
【OpenGL】LearnOpenGL学习笔记28 - 延迟渲染 Deferred Rendering
笔记·学习·图形渲染·着色器
Duo1J24 天前
【OpenGL】LearnOpenGL学习笔记25 - 法线贴图 NormalMap
笔记·学习·图形渲染·贴图·着色器
Duo1J24 天前
【OpenGL】LearnOpenGL学习笔记26 - 视差贴图 Parallax Map
笔记·学习·图形渲染·贴图·着色器
gis分享者1 个月前
学习threejs,使用自定义GLSL 着色器,实现水面、粒子特效
threejs·着色器·glsl·粒子·shadermaterial·unrealbloompass·水面
浩浩乎@2 个月前
【openGLES】着色器语言(GLSL)
人工智能·算法·着色器
枫景Maple3 个月前
Shader开发(六)什么是着色器
游戏引擎·着色器