Shader toy （顺手写两个Gyro）（纯代码写3D）

来源：互联网发布：淘宝商品id 编辑：程序博客网时间：2024/05/21 14:44

Shader toy （A new world）

1.一个多月了，突然忘记CSDN的密码了，因为每次输密码的时候都要计算一遍,于是没有计算出来…
2.回头发现都过了半年了，都快捏了一把汗，这百度何时不那么踉踉跄跄，搜索服务一直那么差，百度网速又不给力了。
3.创新的思维很重要，那为了那死去活来还要被唾弃的文聘我值得吗？

留一戳shadertoy地址：https://www.shadertoy.com/user/834144373 就恬纳微晰
C博客做得还是可以，毕竟是技术论坛，有的是原创文章，而有的文章千金难求，所以C博客没有大量的广告，以后C博客的口碑还是可以……

快来看看吧！你的第一眼感觉！

My Transparent Gyro！
1.这看着眼熟嘛
它的住址在这儿https://www.shadertoy.com/view/MlfXz7

2.来个不动的
还是不过瘾，去拜访拜访https://www.shadertoy.com/view/MlfXz7

同志们，一定要小心，不要拿其它方面都不专业的浏览器访问，不然浏览器吃不消。
My Smooth Gyro！
1.这个是谁呀
我怎么也看着眼熟，gif为什么这么卡？那快去看看这儿吧！ https://www.shadertoy.com/view/llfXz7

2.怎么看着奇怪
这又是哪样的节奏啊！
仔细看图片的日期
一定要仔细看图片上的日期
是那个画在834144373旁边的那个日期 \\//博客发布日期2015年7月23日

初步技术细节

Gyro 旋转之谜
也许你不相信，这gif有2.96MB大小，CSDN要求2MB，这个C到底怎么了？

math可都家喻户晓了，当然这个旋转math也就要摆出来了，平时调用数学库，这回可就完全靠自己了。。。。。。（A say：我靠，靠谁呀！老师没有教？Super B say：–马丹，不知道抄啊！要养成从小抄袭的良好习惯。）

//标准数学中的旋转矩阵vec3 rotate_y(vec3 v, float angle)//y轴旋转 {    float ca = cos(angle); float sa = sin(angle);    return v*mat3(        ca, .0, -sa,        .0,1.0, .0,        sa, .0, ca);}vec3 rotate_x(vec3 v, float angle)//x轴旋转{    float ca = cos(angle); float sa = sin(angle);    return v*mat3(        1.0, .0, .0,         .0, ca, -sa,         .0, sa, ca);}vec3 rotate_z(vec3 v,float angle){//z轴旋转 这儿是我故意写上的，就用不上节奏了    float ca = cos(angle),sa = sin(angle);    return v*mat3(        ca,-sa,0.,        sa, ca,0.,        0., 0.,0.    );}//当然对于程序来说，还有更简的旋转写法，如果你经历过。。。。。

所以你用的时候一定要注意了，让物体旋转的条件是鼠标mouse为变量，以哪个轴旋转
这里写图片描述
p如果看不懂就当做一条射线向量，我们这是在旋转它，就如gif上鼠标晃来晃去那样。
（哎，怪我罗！赶快在这儿补补http://blog.csdn.net/baidu_26153715/article/details/46510703 3D基础实现篇，马丹，我都还没找到这样解析shadertoy上三D，还是中文易懂不要钱的文章）

Gyro 背景之谜

可以仔细从图中看出，一个背景是黑的，一个背景有点蹊跷，那么有点蹊跷是怎么实现的？
```
col = textureCube(iChannel0,pp).rgb;//就是这么实现的，pp为镜头向外射出的单位向量，这个就不需要想吧。
```

晋级技术

Gyro 初步假光照，试探光照反应

col = vec3(max(0.,dot(nDir,-normalize(vec3(0.,1.,1.)))));

可以看到初步的光照反应是成立的。

最后用到常用的这种方法，这是最后添加上去的。

//fork diffuse            diff = 0.5*max(0.,dot(nDir,normalize(vec3(0.,1.,0.))))+0.5;

Gyro 折射、透明、其他效果

这里写图片描述

factor = (1.- iMouse.y/iResolution.y)*0.1;                factor = pow(factor,1.1);            ref = normalize(reflect(pp,nDir));            fra0 = normalize(refract(pp,nDir,iMouse.y/iResolution.y));            fra1 = normalize(refract(pp,nDir,iMouse.y/iResolution.y)+factor);            fra2 = normalize(refract(pp,nDir,iMouse.y/iResolution.y)+2.*factor);            //col = nDir;            //fork diffuse            diff = 0.5*max(0.,dot(nDir,normalize(vec3(0.,1.,0.))))+0.5;            //custom fresnel            fresnel = pow(1.-max(0.,dot(pp,nDir)),2.);            refcol = textureCube(iChannel0,ref).rgb;            //tone-mapping            refcol /= vec3(1.)+refcol;            //fracol = textureCube(iChannel0,fra).rgb/1.5;            vec3 fracol = vec3(                textureCube(iChannel0,fra0).r,                textureCube(iChannel0,fra1).g,                textureCube(iChannel0,fra2).b            );            //Luminance            luminance = dot( fracol, vec3(0.22, 0.707, 0.071));            fracol *= diff*luminance;            //gamma            fracol = pow(fracol,vec3(1.3));            col = mix(fracol,refcol,fresnel);            //tone             col *= 2.3*vec3(1.1,1.1,1.);            //col = vec3(diff);

从代码片段可以看出，我用到了fresnel来混合折射与反射效果，其中Luminance来计算折射亮度，其他效果你懂得。

Gyro 折射率这样的调节

factor = (1.- iMouse.y/iResolution.y)*0.1;factor = pow(factor,1.1);ref = normalize(reflect(pp,nDir));fra0 = normalize(refract(pp,nDir,iMouse.y/iResolution.y));fra1 = normalize(refract(pp,nDir,iMouse.y/iResolution.y)+factor);fra2 = normalize(refract(pp,nDir,iMouse.y/iResolution.y)+2.*factor);

这儿的iMouse.y/iResolution.y作用可以鼠标上下滑动来调节折射率因子。

vec3 fracol = vec3(                textureCube(iChannel0,fra0).r,                textureCube(iChannel0,fra1).g,                textureCube(iChannel0,fra2).b            );

这儿就是经典的rgb三通道简单位移实现折射产生的散色想象，当然你可以自己发明……

Shadertoy Gyro 代码最终总结

这个就是实现一款简单3D的秘密，，，当然这是基于fragment shader直接实现的。。。

//thx for shadertoy give me a more interesting world//The Transparent Gyro made by 834144373zhu//https://www.shadertoy.com/view/MlfXz7/////////////////////////////////////////////////#define time iGlobalTimevec3 rotate_y(vec3 v, float angle){    float ca = cos(angle); float sa = sin(angle);    return v*mat3(        ca, .0, -sa,        .0,1.0, .0,        sa, .0, ca);}vec3 rotate_x(vec3 v, float angle){    float ca = cos(angle); float sa = sin(angle);    return v*mat3(        1.0, .0, .0,         .0, ca, -sa,         .0, sa, ca);}vec3 rotate_z(vec3 v,float angle){    float ca = cos(angle),sa = sin(angle);    return v*mat3(        ca,-sa,0.,        sa, ca,0.,        0., 0.,0.    );}//distance functionfloat toSphere(in vec3 p){    p = rotate_y(p,-time*0.5);    p.y += 0.2;    return length(pow(abs(p),vec3(.7,0.68,0.4)))-1.5;    //you can try this another DE vertion    //return length(pow(abs(p),vec3(.7,0.68,0.4))-vec3(.6,0.35,0.4))-1.;}float toPlane( vec3 p ){    return p.y;}//map the objects and return the distancefloat map(in vec3 p){    return toSphere(p);}//the object's noramlvec3 normal(in vec3 p){    vec2 offset = vec2(0.01,0.);    vec3 nDir = vec3(        map(p+offset.xyy)-map(p-offset.xyy),        map(p+offset.yxy)-map(p-offset.yxy),        map(p+offset.yyx)-map(p-offset.yyx)    );    return normalize(nDir);}//ray-marching the object and return the distancefloat raymarching(in vec3 pos,in vec3 p){    float d = 0.;    float distance = 1.;    for(int i = 0;i<64;++i){        distance += d;        vec3 raysphere = pos + distance*p;        d = map(raysphere);        if(d<0.02 )break;        };    return distance;}/*vec3 thenewp (in vec3 pos,in vec3 p,in float an){    vec3 dian = vec3(0.);    vec3 z = normalize(dian-pos);    vec3 x = normalize(cross(z,vec3(sin(an),cos(an),0.)));    vec3 y = normalize(cross(z,x));    mat3 mat = mat3(x,y,z);    return p*mat;//;p.x*x+p.y*y+p.z*z;}*/void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 mouse = iMouse.xy/iResolution.xy*vec2(5.,0.);    vec2 uv = fragCoord.xy / iResolution.xy;    uv = uv*2.-1.;    uv.x *= iResolution.x/iResolution.y;    vec3 p = normalize(vec3(uv,2.));    //camera     vec3 pos = vec3(0.,0.,-5.);    pos = rotate_x(pos,mouse.y);    pos = rotate_y(pos,mouse.x);    //the new p    //vec3 pp = thenewp(pos,p,0.);    vec3 pp;    //pp = rotate_x(p,mouse.y);    pp = rotate_y(p,mouse.x);    vec3 col = vec3(0.);    float d = raymarching(pos,pp);    float diff,fresnel,luminance,factor;    vec3 nDir,ref,  fra0,fra1,fra2;    vec3 refcol,fracol;    if(d<40.){        nDir = -normal(pos+d*pp);        if(dot(pp,nDir) > 0.){            factor = (1.- iMouse.y/iResolution.y)*0.1;                factor = pow(factor,1.1);            ref = normalize(reflect(pp,nDir));            fra0 = normalize(refract(pp,nDir,iMouse.y/iResolution.y));            fra1 = normalize(refract(pp,nDir,iMouse.y/iResolution.y)+factor);            fra2 = normalize(refract(pp,nDir,iMouse.y/iResolution.y)+2.*factor);            //col = nDir;            //fork diffuse            diff = 0.5*max(0.,dot(nDir,normalize(vec3(0.,1.,0.))))+0.5;            //custom fresnel            fresnel = pow(1.-max(0.,dot(pp,nDir)),2.);            refcol = textureCube(iChannel0,ref).rgb;            //tone-mapping            refcol /= vec3(1.)+refcol;            //fracol = textureCube(iChannel0,fra).rgb/1.5;            vec3 fracol = vec3(                textureCube(iChannel0,fra0).r,                textureCube(iChannel0,fra1).g,                textureCube(iChannel0,fra2).b            );            //Luminance            luminance = dot( fracol, vec3(0.22, 0.707, 0.071));            fracol *= diff*luminance;            //gamma            fracol = pow(fracol,vec3(1.3));            col = mix(fracol,refcol,fresnel);            //tone             col *= 2.3*vec3(1.1,1.1,1.);            //col = vec3(diff);        }        else{            discard;        }    }else{col = vec3(0.06);}    fragColor = vec4(col,1.0);}

我很不放心：你绝对没有看过这篇博客 http://blog.csdn.net/baidu_26153715/article/details/46510703，本片博客就是基于这篇基本3D实现技术，来实现其它深层次技术。
还有不放心的地方：你可以看这篇博客http://blog.csdn.net/baidu_26153715/article/details/45420029，来实现一些基本效果。

还有不放心的是：

以下就留给可爱的

3 0