practice

这里只展开fragment.glsl的代码,vertex都大差不离

blending color uniforms

uniform vec3 u_color;

uniform vec2 u_mouse;
uniform vec2 u_resolution;
//传递长和宽
uniform float u_time;

void main(){
    // vec2 v = u_mouse/u_resolution;

    // vec3 color = vec3(u_mouse.x/u_resolution.x,0.,u_mouse.y/u_resolution.y);
    // vec3 color = vec3(v.x,0.,v.y);


    vec2 uv = gl_FragCoord.xy/u_resolution;
    //uv.y:片元垂直位置的权重
    //自下而上
    vec3 color = mix(vec3(228./255.,181./255.,163./255.),vec3(0.,0.,0),uv.y);
    // mix(x,y,a) = x*(1-a)+y*a

    gl_FragColor = vec4(color ,1.0 );
}

blending color varying

uniform vec3 u_color;

uniform vec2 u_mouse;
uniform vec2 u_resolution;
//传递长和宽
uniform float u_time;

varying vec2 v_uv;


void main(){
    // vec2 v = u_mouse/u_resolution;

    // vec3 color = vec3(u_mouse.x/u_resolution.x,0.,u_mouse.y/u_resolution.y);
    // vec3 color = vec3(v.x,0.,v.y);


    vec3 color = vec3(v_uv.x,v_uv.y,0);    

    gl_FragColor = vec4(color ,1.0 );
}

change color by mouse

uniform vec3 u_color;

uniform vec2 u_mouse;
uniform vec2 u_resolution;

void main(){
    vec2 v = u_mouse/u_resolution;
    // vec3 color = vec3(u_mouse.x/u_resolution.x,0.,u_mouse.y/u_resolution.y);
    vec3 color = vec3(v.x,0.,v.y);
    gl_FragColor = vec4(color ,1.0 );
}

change color by time

uniform vec3 u_color;

uniform vec2 u_mouse;
uniform vec2 u_resolution;
uniform float u_time;

void main(){
    // vec2 v = u_mouse/u_resolution;

    // vec3 color = vec3(u_mouse.x/u_resolution.x,0.,u_mouse.y/u_resolution.y);
    // vec3 color = vec3(v.x,0.,v.y);

    vec3 color = vec3((sin(u_time)+1.)/2.,0.,(cos(u_time)+1.)/2.);

    gl_FragColor = vec4(color ,1.0 );
}

box shader

moving square