Shader toy （顺手写两个Gyro）（纯代码写3D） / 憋错料

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 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，来实现一些基本效果。

还有不放心的是：

以下就留给可爱的

时间： 2024-10-13 23:06:24

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

Shader toy （A new world）

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

初步技术细节

晋级技术

Shadertoy Gyro 代码最终总结

Shader toy （顺手写两个Gyro）（纯代码写3D）的相关文章

Unity CG 写一个超酷的 ray-marching（shader纯代码写3D）

ios 用纯代码写程序的时候，navigationController的导航栏的设置

iOS开发UI篇—用纯代码写实现图片轮播

猫猫学IOS（十七）UI之纯代码自定义Cell实现新浪微博UI

(素材源码)猫猫学IOS（十七）UI之纯代码自定义Cell实现新浪微博UI

纯代码自动屏幕适配iPhone

（源码推荐）快速开发10几天时间纯代码高仿《内涵段子》

swift 之纯代码创建 cell

【转】纯CSS写三角形-border法[晋级篇01]