index.html 16.3 KB
Newer Older
amandaghassaei's avatar
amandaghassaei committed
1 2 3 4 5 6 7 8 9 10 11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Origami Simulator</title>

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

amandaghassaei's avatar
amandaghassaei committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        void main() {
           gl_Position = vec4(a_position, 0, 1);
        }
    </script>

    <script id="packToBytesShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_floatTextureDim;
        uniform sampler2D u_floatTexture;
        uniform float u_vectorLength;
        float shift_right (float v, float amt) {
            v = floor(v) + 0.5;
            return floor(v / exp2(amt));
        }
        float shift_left (float v, float amt) {
            return floor(v * exp2(amt) + 0.5);
        }
        float mask_last (float v, float bits) {
            return mod(v, shift_left(1.0, bits));
        }
        float extract_bits (float num, float from, float to) {
            from = floor(from + 0.5); to = floor(to + 0.5);
            return mask_last(shift_right(num, from), to - from);
        }
        vec4 encode_float (float val) {
            if (val == 0.0) return vec4(0, 0, 0, 0);
            float sign = val > 0.0 ? 0.0 : 1.0;
            val = abs(val);
            float exponent = floor(log2(val));
            float biased_exponent = exponent + 127.0;
            float fraction = ((val / exp2(exponent)) - 1.0) * 8388608.0;
            float t = biased_exponent / 2.0;
            float last_bit_of_biased_exponent = fract(t) * 2.0;
            float remaining_bits_of_biased_exponent = floor(t);
            float byte4 = extract_bits(fraction, 0.0, 8.0) / 255.0;
            float byte3 = extract_bits(fraction, 8.0, 16.0) / 255.0;
            float byte2 = (last_bit_of_biased_exponent * 128.0 + extract_bits(fraction, 16.0, 23.0)) / 255.0;
            float byte1 = (sign * 128.0 + remaining_bits_of_biased_exponent) / 255.0;
            return vec4(byte4, byte3, byte2, byte1);
        }
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            float textureXcoord = floor((fragCoord.x - 0.5)/u_vectorLength+0.0001) + 0.5;
            vec4 data = texture2D(u_floatTexture, vec2(textureXcoord, fragCoord.y)/u_floatTextureDim);
            int textureIndex = int(floor(mod(fragCoord.x-0.5+0.0001, u_vectorLength)));
            if (textureIndex == 0) gl_FragColor = encode_float(data[0]);
            else if (textureIndex == 1) gl_FragColor = encode_float(data[1]);
            else if (textureIndex == 2) gl_FragColor = encode_float(data[2]);
            else if (textureIndex == 3) gl_FragColor = encode_float(data[3]);
        }
    </script>

    <script id="zeroTexture" type="x-shader/x-fragment">
        void main(){
amandaghassaei's avatar
amandaghassaei committed
68
            gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
        }
    </script>

    <script id="positionCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform float u_dt;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_velocity;
        uniform sampler2D u_mass;

        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;

            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
amandaghassaei committed
86
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
87 88 89 90 91 92 93 94 95 96 97 98 99
                return;
            }

            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
            vec3 velocity = texture2D(u_velocity, scaledFragCoord).xyz;
            vec3 position = velocity*u_dt + lastPosition;
            gl_FragColor = vec4(position,0.0);
        }
    </script>

    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
100
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
amandaghassaei committed
101 102 103
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
amandaghassaei's avatar
amandaghassaei committed
104 105 106 107 108 109
        uniform float u_dt;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_lastVelocity;
        uniform sampler2D u_originalPosition;
        uniform sampler2D u_externalForces;
        uniform sampler2D u_mass;
amandaghassaei's avatar
amandaghassaei committed
110
        uniform sampler2D u_meta;//[beamsIndex, numBeam, creaseMeta2Index, numCreases]
amandaghassaei's avatar
amandaghassaei committed
111
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
amandaghassaei committed
112 113 114 115
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
        uniform sampler2D u_creaseMeta2;//[creaseIndex, momentArmLength, nodeIndex]
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
amandaghassaei's avatar
amandaghassaei committed
116 117 118 119 120 121 122

        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
            if (mass.y == 1.0){
amandaghassaei's avatar
amandaghassaei committed
123
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
124 125 126 127 128 129 130 131 132
                return;
            }
            vec3 force = texture2D(u_externalForces, scaledFragCoord).xyz;
            force.y = 1.0;
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
            vec3 lastVelocity = texture2D(u_lastVelocity, scaledFragCoord).xyz;
            vec3 originalPosition = texture2D(u_originalPosition, scaledFragCoord).xyz;

            vec4 neighborIndices = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
133
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
134

amandaghassaei's avatar
ui  
amandaghassaei committed
135
            for (int j=0;j<100;j++){//for all beams (up to 100, had to put a const int in here)
amandaghassaei's avatar
amandaghassaei committed
136 137 138 139 140 141 142 143
                if (j >= int(meta[1])) break;

                float beamIndex1D = meta[0]+float(j);
                vec2 beamIndex = vec2(mod(beamIndex1D, u_textureDimEdges.x)+0.5, floor(beamIndex1D/u_textureDimEdges.x)+0.5);
                vec2 scaledBeamIndex = beamIndex/u_textureDimEdges;
                vec4 beamMeta = texture2D(u_beamMeta, scaledBeamIndex);

                float neighborIndex1D = beamMeta[3];
amandaghassaei's avatar
amandaghassaei committed
144 145 146 147 148 149 150 151
                vec2 neighborIndex = vec2(mod(neighborIndex1D, u_textureDim.x)+0.5, floor(neighborIndex1D/u_textureDim.x)+0.5);
                vec2 scaledNeighborIndex = neighborIndex/u_textureDim;
                vec3 neighborLastPosition = texture2D(u_lastPosition, scaledNeighborIndex).xyz;
                vec3 neighborLastVelocity = texture2D(u_lastVelocity, scaledNeighborIndex).xyz;
                vec3 neighborOriginalPosition = texture2D(u_originalPosition, scaledNeighborIndex).xyz;

                vec3 nominalDist = neighborOriginalPosition-originalPosition;
                vec3 deltaP = neighborLastPosition-lastPosition+nominalDist;
amandaghassaei's avatar
amandaghassaei committed
152
                deltaP -= normalize(deltaP)*beamMeta[2];
amandaghassaei's avatar
amandaghassaei committed
153 154
                vec3 deltaV = neighborLastVelocity-lastVelocity;

amandaghassaei's avatar
amandaghassaei committed
155
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
amandaghassaei committed
156 157
                force += _force;
            }
amandaghassaei's avatar
amandaghassaei committed
158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180

            for (int j=0;j<100;j++){//for all creases (up to 100, had to put a const int in here)
                if (j >= int(meta[3])) break;

                float nodeCreaseIndex1D = meta[2]+float(j);
                vec2 nodeCreaseIndex = vec2(mod(nodeCreaseIndex1D, u_textureDimNodeCreases.x)+0.5, floor(nodeCreaseIndex1D/u_textureDimNodeCreases.x)+0.5);
                vec2 scaledNodeCreaseIndex = nodeCreaseIndex/u_textureDimNodeCreases;
                vec4 creaseMeta2 = texture2D(u_creaseMeta2, scaledNodeCreaseIndex);

                float creaseIndex1D = creaseMeta2[0];
                vec2 creaseIndex = vec2(mod(creaseIndex1D, u_textureDimCreases.x)+0.5, floor(creaseIndex1D/u_textureDimCreases.x)+0.5);
                vec2 scaledCreaseIndex = creaseIndex/u_textureDimCreases;

                vec4 thetas = texture2D(u_theta, scaledCreaseIndex);
                vec3 creaseMeta = texture2D(u_creaseMeta, scaledCreaseIndex).xyz;//[k, d, targetTheta]

                float nodeNum = creaseMeta2[2];
                float normalIndex1D = thetas[2];
                if (nodeNum > 1.1) normalIndex1D = thetas[3];
                vec2 normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                vec2 scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                vec3 normal = texture2D(u_normals, scaledNormalsIndex).xyz;

amandaghassaei's avatar
amandaghassaei committed
181
                float angForce = creaseMeta[0]*(creaseMeta[2]-thetas[0]) + creaseMeta[1]*thetas[1];;
amandaghassaei's avatar
amandaghassaei committed
182 183 184 185 186 187
                float momentArm = creaseMeta2[1];

                vec3 _force = angForce/momentArm*normal;
                force += _force;
            }

amandaghassaei's avatar
amandaghassaei committed
188 189 190 191 192
            vec3 velocity = force*u_dt/mass.x + lastVelocity;
            gl_FragColor = vec4(velocity,0.0);
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
    <script id="thetaCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_normals;
        uniform sampler2D u_lastTheta;
        uniform sampler2D u_creaseVectors;

        void main(){

            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimCreases;

            vec4 lastTheta = texture2D(u_lastTheta, scaledFragCoord);

            if (lastTheta[2]<0.0){
                gl_FragColor = vec4(0.0, 0.0, -1.0, -1.0);
                return;
            }

            vec2 normal1Index = vec2(mod(lastTheta[2], u_textureDimFaces.x)+0.5, floor(lastTheta[2]/u_textureDimFaces.x)+0.5);
            normal1Index /= u_textureDimFaces;
            vec2 normal2Index = vec2(mod(lastTheta[3], u_textureDimFaces.x)+0.5, floor(lastTheta[3]/u_textureDimFaces.x)+0.5);
            normal2Index /= u_textureDimFaces;

            vec3 normal1 = texture2D(u_normals, normal1Index).xyz;
            vec3 normal2 = texture2D(u_normals, normal2Index).xyz;

            float theta = acos(dot(normal1, normal2));//normals are already normalized, no need to divide by length
            vec3 creaseVector = texture2D(u_creaseVectors, scaledFragCoord).xyz;
            float sign = dot(cross(normal1, normal2), creaseVector);
            if (sign < 0.0) theta *= -1.0;
            gl_FragColor = vec4(theta, theta-lastTheta[0], lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
229 230 231 232 233 234 235 236 237 238 239 240 241 242
    <script type="text/javascript" src="dependencies/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="dependencies/jquery-ui.min.js"></script>
    <script type="text/javascript" src="dependencies/flat-ui.min.js"></script>
    <script type="text/javascript" src="dependencies/three.min.js"></script>
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
    <script type="text/javascript" src="dependencies/OrbitControls.js"></script>
    <script type="text/javascript" src="dependencies/underscore-min.js"></script>
    <script type="text/javascript" src="dependencies/FileSaver.min.js"></script>

    <script type="text/javascript" src="js/GLBoilerplate.js"></script>
    <script type="text/javascript" src="js/GPUMath.js"></script>
    <script type="text/javascript" src="js/controls.js"></script>
    <script type="text/javascript" src="js/threeView.js"></script>
    <script type="text/javascript" src="js/globals.js"></script>
amandaghassaei's avatar
amandaghassaei committed
243 244
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
245
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
246 247
    <script type="text/javascript" src="js/model.js"></script>
    <script type="text/javascript" src="js/dynamicModel.js"></script>
amandaghassaei's avatar
amandaghassaei committed
248 249 250 251 252

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
253
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277
<div id="controlsLeft" class="flipped">
    <div>
        <a id="logo" target="_blank" href="http://cba.mit.edu/">
            <img id="inactiveLogo" src="logo.png"/>
            <img id="activeLogo" src="logo-active.png"/>
        </a><br/>
        3D View:
        <div class="indent">
            <label class="checkbox" for="dynamic">
                <input id="dynamic" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                Dynamic Simulation
            </label>
            <label class="checkbox" for="static">
                <input id="static" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                Static Simulation
            </label>
            <label class="checkbox" for="schematic">
                <input id="schematic" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                Crease Pattern
            </label>
        </div>
    </div>
    <br/><br/>
    <div class="dynamicSim">
amandaghassaei's avatar
ui  
amandaghassaei committed
278
        <div class="paddingBottom">Dynamic Sim Settings:</div>
amandaghassaei's avatar
amandaghassaei committed
279 280 281 282
        <div class="indent">
            <div class="sliderContainer">
                <span class="label-slider">Damping : </span><div id="damping"  class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div><br/>
            </div>
amandaghassaei's avatar
ui  
amandaghassaei committed
283 284
            <a href="#" id="resetDynamicSim" class="paddingBottom btn btn-lg btn-default">Replay Dynamic Simulation</a>
            <div>&Delta; t = <span id="deltaT"></span> seconds</div>
amandaghassaei's avatar
amandaghassaei committed
285 286 287 288 289 290
        </div>
    </div>
    <div id="extraSpace"></div>
</div>
<div id="controls">
    <a href="#" id="about" class="btn btn-lg btn-default">About</a><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
291

amandaghassaei's avatar
amandaghassaei committed
292
    <div class="sliderInput" id="creasePercent">
amandaghassaei's avatar
amandaghassaei committed
293 294 295 296
        <span class="label-slider">Crease Angle : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
        <input value="" placeholder="" class="form-control int" type="text">
    </div>
    <br/><br/><br/>
amandaghassaei's avatar
ui  
amandaghassaei committed
297 298 299 300 301 302 303 304 305 306 307 308
    <div class="sliderInput" id="axialStiffness">
        <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
        <input value="" placeholder="" class="form-control int" type="text">
    </div>
    <div class="sliderInput" id="creaseStiffness">
        <span class="label-slider">Crease Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
        <input value="" placeholder="" class="form-control int" type="text">
    </div>
    <div class="sliderInput" id="panelStiffness">
        <span class="label-slider">Panel Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
        <input value="" placeholder="" class="form-control int" type="text">
    </div>
amandaghassaei's avatar
amandaghassaei committed
309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332
    <!--<a href="#" id="addRemoveFixed" class="btn btn-lg btn-default">Add/Remove Fixed Constraint</a>-->
    <!--<span class="titleSpan">Available Materials:</span>-->
    <!--<div id="materialTypes" class="indent">-->
        <!--<label class="radio"><input name="materialTypes" value="none" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span><span id="noMaterial">No Material Selected</span></label>-->
    <!--</div>-->
    <!--<a href="#" id="addMaterial" class="btn btn-lg btn-default">+ New Material</a>-->
    <!--<div id="extraSpace"></div>-->
</div>
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <p><b>Origami Simulator</b><br/><br/>
                    lakfjsdlkfjladskj
                <br/>
                Built by <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a> as a homework assignment for <a href="http://courses.csail.mit.edu/6.849/spring17/" target="_blank">Geometric Folding Algorithms</a>.
                Code available on <a href="https://github.com/amandaghassaei/OrigamiSimulator" target="_blank">Github</a>.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>