index.html 18 KB
Newer Older
amandaghassaei's avatar
amandaghassaei committed
1
2
3
4
5
6
7
8
9
<!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"/>
amandaghassaei's avatar
nav    
amandaghassaei committed
10
11
12
    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>

amandaghassaei's avatar
amandaghassaei committed
13

amandaghassaei's avatar
amandaghassaei committed
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
68
69
    <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
70
            gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
        }
    </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
88
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
89
90
91
92
93
94
                return;
            }

            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
            vec3 velocity = texture2D(u_velocity, scaledFragCoord).xyz;
            vec3 position = velocity*u_dt + lastPosition;
amandaghassaei's avatar
amandaghassaei committed
95
            gl_FragColor = vec4(position, 0.0);
amandaghassaei's avatar
amandaghassaei committed
96
97
98
99
100
101
        }
    </script>

    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
102
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
amandaghassaei committed
103
104
105
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
amandaghassaei's avatar
eod    
amandaghassaei committed
106
        uniform float u_creasePercent;
amandaghassaei's avatar
amandaghassaei committed
107
108
109
110
111
112
        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
113
        uniform sampler2D u_meta;//[beamsIndex, numBeam, creaseMeta2Index, numCreases]
amandaghassaei's avatar
amandaghassaei committed
114
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
amandaghassaei committed
115
116
117
118
        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
119
120
121
122
123
124

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

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
125
            if (mass.y == 1.0){//fixed
amandaghassaei's avatar
amandaghassaei committed
126
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
127
128
129
130
131
132
133
134
                return;
            }
            vec3 force = texture2D(u_externalForces, scaledFragCoord).xyz;
            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
135
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
136

amandaghassaei's avatar
ui    
amandaghassaei committed
137
            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
138
139
140
141
142
143
144
145
                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
146
147
148
149
150
151
152
153
                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
154
                deltaP -= normalize(deltaP)*beamMeta[2];
amandaghassaei's avatar
amandaghassaei committed
155
156
                vec3 deltaV = neighborLastVelocity-lastVelocity;

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

            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];
amandaghassaei's avatar
eod    
amandaghassaei committed
178
179
180
181
                float targetTheta = creaseMeta[2] *= u_creasePercent;
                if (nodeNum > 1.1) {
                    normalIndex1D = thetas[3];
                }
amandaghassaei's avatar
amandaghassaei committed
182
183
184
185
                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
186
                float angForce = creaseMeta[0]*(targetTheta-thetas[0]);// + creaseMeta[1]*thetas[1];
amandaghassaei's avatar
amandaghassaei committed
187
188
189
                float momentArm = creaseMeta2[1];

                vec3 _force = angForce/momentArm*normal;
amandaghassaei's avatar
amandaghassaei committed
190
                //force += _force;
amandaghassaei's avatar
amandaghassaei committed
191
192
            }

amandaghassaei's avatar
amandaghassaei committed
193
194
195
196
197
            vec3 velocity = force*u_dt/mass.x + lastVelocity;
            gl_FragColor = vec4(velocity,0.0);
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
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
229
230
231
232
233
    <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
234
235
236
    <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>
amandaghassaei's avatar
amandaghassaei committed
237
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
238
239
240
241
    <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>
amandaghassaei's avatar
amandaghassaei committed
242
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
243
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
244
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
amandaghassaei committed
245
246
247
248
249
250

    <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
251
252
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
253
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
254
255
    <script type="text/javascript" src="js/model.js"></script>
    <script type="text/javascript" src="js/dynamicModel.js"></script>
amandaghassaei's avatar
amandaghassaei committed
256
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
amandaghassaei committed
257
258
259
260

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav    
amandaghassaei committed
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<nav id="globalNav" class="navbar navbar-inverse navbar-embossed" role="navigation">
    <div class="navbar-header">
        <a id="logo" class="navbar-brand" target="_blank" href="http://cba.mit.edu/">
            <img id="inactiveLogo" src="logo.png"/>
            <img id="activeLogo" src="logo-active.png"/>
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-01">
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown navDropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">File <b class="caret"></b></a>
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu">
                    <li><a class="loadFile" href="#">Import SVG...</a></li>
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
276
                    <li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
                </ul>
            </li>
            <li><a data-menu-id="navDesign" class="menuHoverControls" href="#">Pattern</a></li>
            <li><a data-menu-id="navSim" class="menuHoverControls" href="#">Simulation</a></li>
            <!--<li class="dropdown navDropdown">-->
                <!--<a href="#" class="dropdown-toggle" id="viewMenuDropdown" data-toggle="dropdown">View <b class="caret"></b></a>-->
                <!--<span class="dropdown-arrow"></span>-->
                <!--<ul id="navViewMenu" class="dropdown-menu">-->
                    <!--<li><a href="#">thing1</a></li>-->
                    <!--<li><a href="#">things2</a></li>-->
                <!--</ul>-->
            <!--</li>-->
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>

    </div><!-- /.navbar-collapse -->
    <input id="fileSelector" type="file">

</nav>

amandaghassaei's avatar
amandaghassaei committed
298
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
299
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<div id="controlsLeft" class="flipped">
    <div>
        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
320
        <div class="paddingBottom">Dynamic Sim Settings:</div>
amandaghassaei's avatar
amandaghassaei committed
321
322
323
324
        <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
325
326
            <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
327
328
        </div>
    </div>
amandaghassaei's avatar
amandaghassaei committed
329
    <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
330
331
</div>
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
332
    <div class="sliderInput" id="creasePercent">
amandaghassaei's avatar
amandaghassaei committed
333
        <span class="label-slider">Crease Percent : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
334
335
336
        <input value="" placeholder="" class="form-control int" type="text">
    </div>
    <br/><br/><br/>
amandaghassaei's avatar
ui    
amandaghassaei committed
337
338
339
340
341
342
343
344
345
346
347
348
    <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
349
350
    <div id="svgViewer"></div>
    <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
351
352
353
354
355
356
</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/>
amandaghassaei's avatar
eod    
amandaghassaei committed
357
358
359
360
361
                    http://www2.eng.cam.ac.uk/~sdg/preprint/5OSME.pdf
                    http://origami.c.u-tokyo.ac.jp/~tachi/cg/SimulationOfRigidOrigami_tachi_4OSME.pdf
                    https://github.com/mapbox/earcut

                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
362
363
364
365
366
367
368
369
370
                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>