shader入门教程四(距离场构图)

这一节我们来探讨距离场构图法。

我们回顾一下前面绘制圆的思路,就是定义每个像素点的一个距离,例如每个点到圆心的距离,再根据距离值来计算颜色值。

其实我们可以将这种方式抽象化,变成一种普遍的方法,我们可以称为距离场构图,其核心在于给每个像素定义一个特定的距离值,所有距离值相等的点则意味这些像素点的颜色值也一致。

上述绘制圆的距离值如果我们用通俗的话来说就是:

scss 复制代码
每个像素点,请你计算下你们各自到(0.0,0.0)这个点的距离,如果大于0.5则使用绿色,否则使用黑色

基于上述原理,例如我们也可以定义例如像素点到v1(0.5,0.0),v2(-0.5,0.0)两个点的距离之和做为距离。

c 复制代码
void main(){
        // 将坐标归一化到[-1,1]
        vec2 st = 2.0*(gl_FragCoord.xy/vec2(1000.0,1000.0)) - vec2(1.0);
        float v = length(st-vec2(-0.5,0.0)) + length(st-vec2(0.5,0.0));
        float v2 = smoothstep(0.0,2.0,v);
        gl_FragColor = vec4(1.0,v2,0.0,1.0);
}

也可以定义到两点距离取最短的那个

c 复制代码
 void main(){
    // 将坐标归一化到[-1,1]
    vec2 st = 2.0*(gl_FragCoord.xy/vec2(1000.0,1000.0)) - vec2(1.0);
    float v = min(length(st-vec2(-0.5,0.0)) , length(st-vec2(0.5,0.0)));
    float v2 = smoothstep(0.0,1.0,v);
    gl_FragColor = vec4(1.0,v2,0.0,1.0);
 }

利用此方法,我们也可以绘制一些通用的线条。例如绘制一条直线。我们可以定义每个像素点到这个直线的距离。如果点在这个直线上,则距离为0,我们可以使用向量的方法来计算点到直线的距离

现在我们假如需要绘制y=x+0.1的直线,我们取两个直线上的点v1(0,0.1)和v2(-0.1,0)

c 复制代码
	// 封装绘制直线方法。
float sdf_line(vec2 st,vec2 v1,vec2 v2){
  vec2 ab = v2 - v1;
  vec2 ap = st - v1;
  return ((ap.x * ab.y) - (ab.x * ap.y))/length(ab);
}

void main(){
    // 将坐标归一化到[-1,1]
    vec2 st = 2.0*(gl_FragCoord.xy/vec2(1000.0,1000.0)) - vec2(1.0);
    float d = sdf_line(st,vec2(-0.1,0.0),vec2(0.0,0.1));
    gl_FragColor = vec4(step(abs(d),0.005));
}

还可以绘制抛物线和三角函数:

c 复制代码
vec4 stroke(float d,vec4 color,float w){
    float v = step(abs(d),w);
    return color*v;
}

void main(){
    // 将坐标归一化到[-1,1]
    vec2 st = 2.0*(gl_FragCoord.xy/vec2(1000.0,1000.0)) - vec2(1.0);
    float d = st.y - st.x*st.x;
    float d1 = st.y - 0.1*sin((2.0*3.1415/0.2)*st.x);
    float d2 = st.y - 0.1*sin((2.0*3.1415/0.2)*st.x)/st.x;
            gl_FragColor=stroke(d,vec4(1.0),0.005)+stroke(d1,vec4(0.0,1.0,0.0,1.0),0.005)+stroke(d2,vec4(1.0,1.0,0.0,1.0),0.005);
}
相关推荐
Nicander2 天前
上帝视角看 GPU 学习笔记
webgl·gpu
你真的可爱呀4 天前
5.Three.js 学习(基础+实践)
学习·three.js
平行云4 天前
赋能数字孪生:Paraverse平行云实时云渲染平台LarkXR,提供强大的API与SDK用于二次开发和深度集成
3d·unity·ue5·webgl·实时云渲染·云xr
Uzuki5 天前
目标检测 | 基于Weiler–Atherton算法的IoU求解
目标检测·机器学习·自动驾驶·图形学
战场小包6 天前
弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园,让弟弟看个够
前端·three.js·文心快码
入秋6 天前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
Becauseofyou1377 天前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
Jedi Hongbin9 天前
Three.js shader内置矩阵注入
前端·javascript·three.js
接着奏乐接着舞。9 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
刘皇叔code10 天前
记一次用Three.js展示360°全景图的折腾
webgl·three.js