index.html 4.67 KB
Newer Older
amandaghassaei's avatar
setup  
amandaghassaei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fluid Simulation</title>

    <link rel="stylesheet" type="text/css" href="dependencies/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="dependencies/flat-ui.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">

    <script id="2d-vertex-shader" type="x-shader/x-vertex">

        attribute vec2 a_position;

        void main() {
           gl_Position = vec4(a_position, 0, 1);
        }
    </script>

    <script id="2d-render-shader" type="x-shader/x-fragment">
        precision mediump float;

amandaghassaei's avatar
amandaghassaei committed
23 24 25 26 27 28 29 30 31 32
        //uniform sampler2D u_velocities;
        //uniform vec2 u_textureSize;

        void main() {
            gl_FragColor = vec4(1, 0, 1, 1);
        }
    </script>

     <script id="advectShader" type="x-shader/x-fragment">
        precision mediump float;
amandaghassaei's avatar
setup  
amandaghassaei committed
33

amandaghassaei's avatar
amandaghassaei committed
34 35 36 37 38 39
        //uniform sampler2D u_velocities;
        //uniform sampler2D u_material;

        //uniform vec2 u_textureSize;

        //uniform float u_dt;
amandaghassaei's avatar
setup  
amandaghassaei committed
40 41

        void main() {
amandaghassaei's avatar
amandaghassaei committed
42 43 44 45 46 47 48 49 50 51 52

            //vec2 fragCoord = gl_FragCoord.xy;

            //vec2 currentVelocity = texture2D(u_velocities, fragCoord/u_textureSize).xy;

            //implicitly solve advection
            //vec2 pos = fragCoord - u_dt * currentVelocity;

            // bilinear interp between nearest cells
            //gl_FragColor = texture2D(u_material, pos/u_textureSize);
            gl_FragColor = vec4(1,1,1,1);
amandaghassaei's avatar
setup  
amandaghassaei committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
        }
    </script>

    <script id="2d-fragment-shader" type="x-shader/x-fragment">
        precision mediump float;
        #define M_PI 3.1415926535897932384626433832795

        //texture array
        uniform sampler2D u_image;//u, v, --, -- = r, g, b, a

        uniform vec2 u_textureSize;

        uniform vec2 u_mouseCoord;
        uniform float u_mouseEnable;

	    const float dt = 1.0;

        void main() {

            vec2 fragCoord = gl_FragCoord.xy;

            vec2 currentState = texture2D(u_image, fragCoord/u_textureSize).xy;
            float u = currentState.x;
            float v = currentState.y;

            vec2 n = texture2D(u_image, (fragCoord + vec2(0.0, 1.0))/u_textureSize).xy;//north
            vec2 s = texture2D(u_image, (fragCoord + vec2(0.0, -1.0))/u_textureSize).xy;//south
            vec2 e = texture2D(u_image, (fragCoord + vec2(-1.0, 0.0))/u_textureSize).xy;//east
            vec2 w = texture2D(u_image, (fragCoord + vec2(1.0, 0.0))/u_textureSize).xy;//west

            if (u_mouseEnable == 1.0){
                vec2 pxDistFromMouse = (fragCoord - u_mouseCoord)*(fragCoord - u_mouseCoord);
                float tol = 10.0;
                if (length(pxDistFromMouse)<tol){
                    gl_FragColor = vec4(0.5, 0.35, 0, 1);
                    return;
                }
            }

            gl_FragColor = vec4(0,0, 0, 1);
        }
    </script>

    <script type="text/javascript" src="dependencies/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="dependencies/flat-ui.min.js"></script>

amandaghassaei's avatar
amandaghassaei committed
99 100
    <script type="text/javascript" src="GLBoilerplate.js"></script>
    <script type="text/javascript" src="GPUMath.js"></script>
amandaghassaei's avatar
setup  
amandaghassaei committed
101 102 103 104 105 106 107 108 109 110 111 112 113
    <script type="text/javascript" src="main.js"></script>
</head>
<body>

<canvas id="glcanvas"></canvas>

<a href="#" id="about">?</a>

<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <b>Fluid Simulation Shader</b><br/><br/>
amandaghassaei's avatar
eod  
amandaghassaei committed
114
                I used the following sources to write this simulation:<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
115 116
                <a href="https://pdfs.semanticscholar.org/84b8/c7b7eecf90ebd9d54a51544ca0f8ff93c137.pdf" target="_blank">Real-time ink simulation using a grid-particle method</a> - a method for real-time simulation of ink
                in water using a coarse-grained fluid simulation with a particle simulation on top.<br/>
amandaghassaei's avatar
eod  
amandaghassaei committed
117
                <a href="http://http.developer.nvidia.com/GPUGems/gpugems_ch38.html" target="_blank">Fast Fluid Dynamics Simulation on the GPU</a> - a very well written tutorial about programming the Navier-Stokes equations on a GPU.<br/>
amandaghassaei's avatar
amandaghassaei committed
118
                <a href="http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/ns.pdf" target="_blank">Stable Fluids</a> - a paper about stable numerical methods for evaluating Navier-Stokes on a discrete grid.<br/>
amandaghassaei's avatar
eod  
amandaghassaei committed
119 120
                <br/>
                By <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a>, code on <a href="https://github.com/amandaghassaei/FluidSimulation" target="_blank">Github</a>.
amandaghassaei's avatar
setup  
amandaghassaei committed
121 122 123 124 125 126 127 128
                <br/><br/>
            </div>
        </div>
    </div>
</div>

</body>
</html>