说明
笔者个人博客网站：https://hk-shao.github.io/
最新文章和更新都会在这里
什么是着色器？
如果你不知道什么是着色器（Shader），你可以先看我之前写的这篇博客： 点击这里
我写的可能晦涩难懂，这里强烈推荐一本介绍Shader的书，它可以在线免费阅读，非常感谢它的作者和这本书的翻译！
《The Book of Shaders》——by Patricio Gonzalez Vivo & Jen Lowe
ShaderEditor使用地址
点击这里 打开着色编辑器。当然，你也可以在我的博客左下角的Demo里打开，界面如下图
image
开源项目
这个是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); 表示绘制曲线 ，这是一个半径为
的圆，你可以将它修改成任何你想绘制的初等函数曲线，比如这样
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的浏览器
