threejs-demo
/
shadow1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一切都会好起来的</title>
    <style>
        body {
            margin: 0;
        }
        shader-doodle {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .text {
            position: absolute;
            font-family: "Bowlby One", cursive;
            top: 50%;
            left: 50%;
            color: #ffffba;
            transform: translate(-50%, -50%);
            font-size: 4rem;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <shader-doodle>
        <sd-node name="iChannel0" prevbuffer>
            <script type="x-shader/x-fragment">
                uniform sampler2D u_prevbuffer;
                #define PI 3.141592
                #define LOOKUP(COORD) texture2D(u_prevbuffer,(COORD)/u_resolution.xy)
                vec4 Field (vec2 position) {
                    // Rule 1 : All My Energy transates with my ordered Energy
                    vec2 velocityGuess = LOOKUP (position).xy;
                    vec2 positionGuess = position - velocityGuess;
                    return LOOKUP (positionGuess);
                }
                void mainImage( out vec4 Energy, in vec2 Me )
                {
                    Energy  =  Field(Me);
                    // Neighborhood :
                    float scale = 1.5;
                    vec4 pX  =  Field(Me + vec2(scale,0));
                    vec4 pY  =  Field(Me + vec2(0,scale));
                    vec4 nX  =  Field(Me - vec2(scale,0));
                    vec4 nY  =  Field(Me - vec2(0,scale));

                    // Rule 2 : Disordered Energy diffuses completely :
                    Energy.b = (pX.b + pY.b + nX.b + nY.b)/4.;

                    // Rule 3 : Order in the disordered Energy creates Order :
                    vec2 Force;
                    Force.x = nX.b - pX.b;
                    Force.y = nY.b - pY.b;
                    Energy.xy += (Force/8.);

                    // Rule 4 : Disorder in the ordered Energy creates Disorder :
                    Energy.b += (nX.x - pX.x + nY.y - pY.y)/4.;

                    // Gravity effect :
                    Energy.y -=Energy.w/200.;

                    // Mass concervation :
                    Energy.w += sin(nX.x*nX.w-pX.x*pX.w+nY.y*nY.w-pY.y*pY.w)/4.;

                    //Energy.xy += Energy.w/300.;
                    Energy.b -= sin(Force.y-Force.x)*1.15;

                    // Ring shapes
                    float shapes = distance(Me.xy,u_resolution.xy/2.);
                    float size = shapes/u_resolution.x;

                    shapes *= 155.5 + 156. * sin( (shapes*.025) * (shapes/u_resolution.x) - (u_time*1.1) );

                    //Boundary conditions :
                    float hlf =10.;
                    if(Me.x<hlf||Me.y<hlf||u_resolution.x-Me.x<hlf||u_resolution.y-Me.y<hlf) {
                        Energy.xy *= 0.0;
                    } else {

                        if (shapes < size) {
                            float dc = distance(Me.xy,u_resolution.xy/2.)*2.5;
                            Energy.w = 1.*(dc/u_resolution.x);
                        }

                    }
                }
                void main(void) {
                    mainImage(gl_FragColor, gl_FragCoord.xy);
                }
            </script>
        </sd-node>
        <script type="x-shader/x-fragment">
            uniform sampler2D iChannel0;

            #define LOOKUP(COORD) texture2D(iChannel0,(COORD)/u_resolution.xy)

            void main() {
                vec4 color = LOOKUP (gl_FragCoord.xy);
                vec3 newColor = vec3(
                    smoothstep(0.,.75,color.w),
                    smoothstep(0.65,.95,color.w),
                    color.w/2.
                );

                gl_FragColor = vec4(newColor,1.);
            }
        </script>
    </shader-doodle>
    <div class="text">
        一切都会好起来的
    </div>
    <script src='https://unpkg.com/[email protected]'></script>
</body>
</html>