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

Shader toy （A new world）

1.一个多月了，突然忘记CSDN的password了。由于每次输password的时候都要计算一遍,于是没有计算出来…

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 iGlobalTime

vec3 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 function
float 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 distance
float map(in vec3 p){
    return toSphere(p);
}
//the object's noraml
vec3 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 distance
float 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，来实现一些基本效果。

• 还有不放心的是：

下面就留给可爱的