我的博客着色编辑器上线啦！

说明

笔者个人博客网站：https://hk-shao.github.io/
最新文章和更新都会在这里

什么是着色器？

如果你不知道什么是着色器（Shader），你可以先看我之前写的这篇博客： 点击这里

我写的可能晦涩难懂，这里强烈推荐一本介绍Shader的书，它可以在线免费阅读，非常感谢它的作者和这本书的翻译！
《The Book of Shaders》——by Patricio Gonzalez Vivo & Jen Lowe

ShaderEditor使用地址

点击这里 打开着色编辑器。当然，你也可以在我的博客左下角的Demo里打开，界面如下图

开源项目

这个是GitHub上的一个开源项目：https://github.com/patriciogonzalezvivo/glslEditor
我只是把它搬进我的博客网站里而已。

示例

简单的曲线绘制

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

#define ZOOM 20.0
#define LINE_SIZE 2.0
#define GRAD_OFFS vec2(1e-4 * ZOOM, 0.0)
#define GRAD(f, p) (vec2(f(p) - f(p + GRAD_OFFS.xy), f(p) - f(p + GRAD_OFFS.yx)) / GRAD_OFFS.x)
#define PLOT(f, c, d, p) d = mix(c(p), d, smoothstep(0.0, (LINE_SIZE / u_resolution.y * ZOOM), abs(f(p) / length(GRAD(f, p)))))

float Func(vec2 p)
{
    return (p.x * p.x + p.y * p.y - 9.0);
}

vec3 Color(vec2 p) { return vec3(1.0); }
float Axes(vec2 p) { return p.x*p.y; }
vec3 Ac(vec2 p) { return vec3(0.2); }

void main(void)
{
    vec2 uv = ((gl_FragCoord.xy - u_resolution / 2.0) / u_resolution.xy) * ZOOM;
    vec3 col;
    PLOT(Axes, Ac, col, uv);
    PLOT(Func, Color, col, uv);
    gl_FragColor = vec4(col, 1.0);
}

return (p.x * p.x + p.y * p.y - 9.0); 表示绘制曲线 $x^2+y^2=9$ ，这是一个半径为 $3$ 的圆，你可以将它修改成任何你想绘制的初等函数曲线，比如这样 return (pow(p.x, 2.0) + pow(p.y - pow(pow(p.x, 2.0),1.0 / 3.0), 2.0) - 22.0); 。

曼德博集绘制

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec2 u_resolution;

vec3 C,mcol;
bool bColoring=false;
#define pi 3.14159265358979
float DE(in vec3 p){
    float dr=1.0,r=length(p);
    //C=p;
    for(int i=0;i<10;i++){
        if(r>20.0)break;
        dr=dr*2.0*r;
        float psi = abs(mod(atan(p.z,p.y)+pi/8.0,pi/4.0)-pi/8.0);
        p.yz=vec2(cos(psi),sin(psi))*length(p.yz);
        vec3 p2=p*p;
        p=vec3(vec2(p2.x-p2.y,2.0*p.x*p.y)*(1.0-p2.z/(p2.x+p2.y+p2.z)),
            2.0*p.z*sqrt(p2.x+p2.y))+C;
        r=length(p);
        if(bColoring && i==3)mcol=p;
    }
    return min(log(r)*r/max(dr,1.0),1.0);
}

float rnd(vec2 c){return 0.5;}
float rndStart(vec2 fragCoord){
    return 0.5;
}
float shadao(vec3 ro, vec3 rd, float px, vec2 fragCoord){//pretty much IQ's SoftShadow
    float res=1.0,d,t=2.0*px*rndStart(fragCoord);
    for(int i=0;i<4;i++){
        d=max(px,DE(ro+rd*t)*1.5);
        t+=d;
        res=min(res,d/t+t*0.1);
    }
    return res;
}
vec3 Sky(vec3 rd){//what sky??
    return vec3(0.5+0.5*rd.y);
}
vec3 L;
vec3 Color(vec3 ro, vec3 rd, float t, float px, vec3 col, bool bFill, vec2 fragCoord){
    ro+=rd*t;
    bColoring=true;float d=DE(ro);bColoring=false;
    vec2 e=vec2(px*t,0.0);
    vec3 dn=vec3(DE(ro-e.xyy),DE(ro-e.yxy),DE(ro-e.yyx));
    vec3 dp=vec3(DE(ro+e.xyy),DE(ro+e.yxy),DE(ro+e.yyx));
    vec3 N=(dp-dn)/(length(dp-vec3(d))+length(vec3(d)-dn));
    vec3 R=reflect(rd,N);
    vec3 lc=vec3(1.0,0.9,0.8),sc=sqrt(abs(sin(mcol))),rc=Sky(R);
    float sh=clamp(shadao(ro,L,px*t,fragCoord)+0.2,0.0,1.0);
    sh=sh*(0.5+0.5*dot(N,L))*exp(-t*0.125);
    vec3 scol=sh*lc*(sc+rc*pow(max(0.0,dot(R,L)),4.0));
    if(bFill)d*=0.05;
    col=mix(scol,col,clamp(d/(px*t),0.0,1.0));
    return col;
}
mat3 lookat(vec3 fw){
    fw=normalize(fw);vec3 rt=normalize(cross(fw,vec3(0.0,1.0,0.0)));return mat3(rt,cross(rt,fw),fw);
}

void main(void) {
    float px=0.5/u_resolution.y;
    L=normalize(vec3(0.4,0.8,-0.6));

    vec3 ro = vec3(vec2(-0.180,0.550),3.862);
    vec3 rd=lookat(-2.0*ro*pi)*normalize(vec3((2.0*gl_FragCoord.xy-u_resolution.xy)/u_resolution.y,3.0));

    C = vec3(-0.8,0.0,0.0);

    float t=DE(ro)*rndStart(gl_FragCoord.xy),d=0.0,od=10.0;
    vec3 edge=vec3(-1.0);
    bool bGrab=false;
    vec3 col=Sky(rd);
    for(int i=0;i<78;i++){
        t+=d*0.5;
        d=DE(ro+rd*t);
        if(d>od){
            if(bGrab && od<px*t && edge.x<0.0){
                edge=vec3(edge.yz,t-od);
                bGrab=false;
            }
        }else bGrab=true;
        od=d;
        if(t>5.0 || d<1e-5)break;
    }
    bool bFill=false;
    d*=0.05;
    if(d<px*t && t<10.0){
        if(edge.x>0.0)edge=edge.zxy;
        edge=vec3(edge.yz,t);
        bFill=true;
    }
    for(int i=0;i<3;i++){
        if(edge.z>0.0)col=Color(ro,rd,edge.z,px,col,bFill,gl_FragCoord.xy);
        edge=edge.zxy;
        bFill=false;
    }
    gl_FragColor = vec4(2.0*col,1.0);
}

你可以修改一些参数来绘制更加惊艳的效果。

注意

运行着色编辑器需要支持WebGL的浏览器