index.html

<!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="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-86531114-8', 'auto');
      ga('send', 'pageview');

    </script>


    <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">
        precision mediump float;
        void main(){
            gl_FragColor = vec4(0.0);
        }
    </script>
    <script id="zeroThetaTexture" type="x-shader/x-fragment">
        precision mediump float;
        uniform sampler2D u_theta;
        uniform vec2 u_textureDimCreases;
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimCreases;
            vec4 theta = texture2D(u_theta, scaledFragCoord);
            gl_FragColor = vec4(0.0, 0.0, theta[2], theta[3]);
        }
    </script>
    <script id="centerTexture" type="x-shader/x-fragment">
        precision mediump float;
        uniform sampler2D u_lastPosition;
        uniform vec2 u_textureDim;
        uniform vec3 u_center;
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;
            vec3 position = texture2D(u_lastPosition, scaledFragCoord).xyz;
            gl_FragColor = vec4(position-u_center, 0.0);
        }
    </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;

            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;

            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
                gl_FragColor = vec4(lastPosition, 0.0);
                return;
            }

            vec4 velocityData = texture2D(u_velocity, scaledFragCoord);
            vec3 position = velocityData.xyz*u_dt + lastPosition;
            gl_FragColor = vec4(position, velocityData.a);//velocity.a has error info
        }
    </script>

    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimEdges;
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
        uniform vec2 u_textureDimNodeFaces;
        uniform float u_creasePercent;
        uniform float u_dt;
        uniform float u_axialStiffness;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_lastVelocity;
        uniform sampler2D u_originalPosition;
        uniform sampler2D u_externalForces;
        uniform sampler2D u_mass;
        uniform sampler2D u_meta;//[beamsIndex, numBeam, nodeCreaseMetaIndex, numCreases]
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
        uniform sampler2D u_nodeCreaseMeta;//[creaseIndex, nodeIndex, -, -]
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
        uniform sampler2D u_creaseGeo;//[h1, h2, coef1, coef2]
        uniform sampler2D u_meta2;//[nodesFaceIndex, numFaces]
        uniform sampler2D u_nodeFaceMeta;//[faceIndex, a, b, c]
        uniform sampler2D u_nominalTriangles;//[angleA, angleB, angleC]

        vec4 getFromArray(float index1D, vec2 dimensions, sampler2D tex){
            vec2 index = vec2(mod(index1D, dimensions.x)+0.5, floor(index1D/dimensions.x)+0.5);
            vec2 scaledIndex = index/dimensions;
            return texture2D(tex, scaledIndex);
        }

        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

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

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
            if (mass[1] == 1.0){//fixed
                gl_FragColor = vec4(0.0);
                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);
            vec4 meta = texture2D(u_meta, scaledFragCoord);
            vec2 meta2 = texture2D(u_meta2, scaledFragCoord).xy;

            float nodeError = 0.0;

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

                vec4 beamMeta = getFromArray(meta[0]+float(j), u_textureDimEdges, u_beamMeta);

                float neighborIndex1D = beamMeta[3];
                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;
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
                vec3 deltaV = neighborLastVelocity-lastVelocity;

                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
                force += _force;
            }
            nodeError /= meta[1];

            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;

                vec4 nodeCreaseMeta = getFromArray(meta[2]+float(j), u_textureDimNodeCreases, u_nodeCreaseMeta);

                float creaseIndex1D = nodeCreaseMeta[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]
                vec4 creaseGeo = texture2D(u_creaseGeo, scaledCreaseIndex);//[h1, h2, coef1, coef2]
                if (creaseGeo[0]< 0.0) continue;//crease disabled bc it has collapsed too much

                float targetTheta = creaseMeta[2] * u_creasePercent;
                float angForce = creaseMeta[0]*(targetTheta-thetas[0]);// + creaseMeta[1]*thetas[1];

                float nodeNum = nodeCreaseMeta[1];//1, 2, 3, 4

                if (nodeNum > 2.0){//crease reaction, node is on a crease

                    //node #1
                    vec3 normal1 = getFromArray(thetas[2], u_textureDimFaces, u_normals).xyz;

                    //node #2
                    vec3 normal2 = getFromArray(thetas[3], u_textureDimFaces, u_normals).xyz;

                    float coef1 = creaseGeo[2];
                    float coef2 = creaseGeo[3];

                    if (nodeNum == 3.0){
                        coef1 = 1.0-coef1;
                        coef2 = 1.0-coef2;
                    }

                    vec3 _force = -angForce*(coef1/creaseGeo[0]*normal1 + coef2/creaseGeo[1]*normal2);
                    force += _force;

                } else {

                    float normalIndex1D = thetas[2];//node #1
                    float momentArm = creaseGeo[0];//node #1
                    if (nodeNum == 2.0) {
                        normalIndex1D = thetas[3];//node #2
                        momentArm = creaseGeo[1];//node #2
                    }

                    vec3 normal = getFromArray(normalIndex1D, u_textureDimFaces, u_normals).xyz;

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

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

                vec4 faceMeta = getFromArray(meta2[0]+float(j), u_textureDimNodeFaces, u_nodeFaceMeta);//[face index, a, b, c]
                vec3 nominalAngles = getFromArray(faceMeta[0], u_textureDimFaces, u_nominalTriangles).xyz;//[angA, angB, angC]

                int faceIndex = 0;
                if (faceMeta[2] < 0.0) faceIndex = 1;
                if (faceMeta[3] < 0.0) faceIndex = 2;

                //get node positions
                vec3 a = faceIndex == 0 ? lastPosition+originalPosition : getPosition(faceMeta[1]);
                vec3 b = faceIndex == 1 ? lastPosition+originalPosition : getPosition(faceMeta[2]);
                vec3 c = faceIndex == 2 ? lastPosition+originalPosition : getPosition(faceMeta[3]);

                //calc angles
                vec3 ab = b-a;
                vec3 ac = c-a;
                vec3 bc = c-b;

                float lengthAB = length(ab);
                float lengthAC = length(ac);
                float lengthBC = length(bc);

                float tol = 0.0000001;
                if (abs(lengthAB) < tol || abs(lengthBC) < tol || abs(lengthAC) < tol) continue;

                ab /= lengthAB;
                ac /= lengthAC;
                bc /= lengthBC;

                vec3 angles = vec3(acos(dot(ab, ac)),
                    acos(-1.0*dot(ab, bc)),
                    acos(dot(ac, bc)));
                vec3 anglesDiff = nominalAngles-angles;

                vec3 normal = getFromArray(faceMeta[0], u_textureDimFaces, u_normals).xyz;

                //calc forces
                anglesDiff *= u_axialStiffness/100.0;
                if (faceIndex == 0){//a
                    vec3 normalCrossAC = cross(normal, ac)/lengthAC;
                    vec3 normalCrossAB = cross(normal, ab)/lengthAB;
                    force -= anglesDiff[0]*(normalCrossAC - normalCrossAB);
                    force -= anglesDiff[1]*normalCrossAB;
                    force += anglesDiff[2]*normalCrossAC;
                } else if (faceIndex == 1){
                    vec3 normalCrossAB = cross(normal, ab)/lengthAB;
                    vec3 normalCrossBC = cross(normal, bc)/lengthBC;
                    force -= anglesDiff[0]*normalCrossAB;
                    force += anglesDiff[1]*(normalCrossAB + normalCrossBC);
                    force -= anglesDiff[2]*normalCrossBC;
                } else if (faceIndex == 2){
                    vec3 normalCrossAC = cross(normal, ac)/lengthAC;
                    vec3 normalCrossBC = cross(normal, bc)/lengthBC;
                    force += anglesDiff[0]*normalCrossAC;
                    force -= anglesDiff[1]*normalCrossBC;
                    force += anglesDiff[2]*(normalCrossBC - normalCrossAC);
                }

            }

            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
            gl_FragColor = vec4(velocity,nodeError);
        }
    </script>

    <script id="thetaCalcShader" type="x-shader/x-fragment">
        #define TWO_PI 6.283185307179586476925286766559
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_normals;
        uniform sampler2D u_lastTheta;
        uniform sampler2D u_creaseVectors;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
        uniform float u_dt;

        vec4 getFromArray(float index1D, vec2 dimensions, sampler2D tex){
            vec2 index = vec2(mod(index1D, dimensions.x)+0.5, floor(index1D/dimensions.x)+0.5);
            vec2 scaledIndex = index/dimensions;
            return texture2D(tex, scaledIndex);
        }

        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(lastTheta[0], 0.0, -1.0, -1.0);
                return;
            }

            vec3 normal1 = getFromArray(lastTheta[2], u_textureDimFaces, u_normals).xyz;
            vec3 normal2 = getFromArray(lastTheta[3], u_textureDimFaces, u_normals).xyz;

            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;

            vec2 creaseVectorIndices = texture2D(u_creaseVectors, scaledFragCoord).xy;
            vec2 creaseNodeIndex = vec2(mod(creaseVectorIndices[0], u_textureDim.x)+0.5, floor(creaseVectorIndices[0]/u_textureDim.x)+0.5);
            vec2 scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node0 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;
            creaseNodeIndex = vec2(mod(creaseVectorIndices[1], u_textureDim.x)+0.5, floor(creaseVectorIndices[1]/u_textureDim.x)+0.5);
            scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node1 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;

            //https://math.stackexchange.com/questions/47059/how-do-i-calculate-a-dihedral-angle-given-cartesian-coordinates
            vec3 creaseVector = normalize(node1-node0);
            float x = dotNormals;
            float y = dot(cross(normal1, creaseVector), normal2);

            float theta = atan(y, x);

            float diff = theta-lastTheta[0];
            float origDiff = diff;
            if (diff < -5.0) {
                diff += TWO_PI;
            } else if (diff > 5.0) {
                diff -= TWO_PI;
            }
            theta = lastTheta[0] + diff;
            gl_FragColor = vec4(theta, diff, lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
        }
    </script>

    <script id="normalCalc" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimFaces;
        uniform sampler2D u_faceVertexIndices;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;

        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

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

            vec3 indices = texture2D(u_faceVertexIndices, scaledFragCoord).xyz;

            vec3 a = getPosition(indices[0]);
            vec3 b = getPosition(indices[1]);
            vec3 c = getPosition(indices[2]);

            vec3 normal = normalize(cross(b-a, c-a));

            gl_FragColor = vec4(normal, 0.0);
        }
    </script>

    <script id="updateCreaseGeo" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
        uniform sampler2D u_creaseMeta2;

        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

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

            vec4 creaseMeta = texture2D(u_creaseMeta2, scaledFragCoord);

            vec3 node1 = getPosition(creaseMeta[0]);
            vec3 node2 = getPosition(creaseMeta[1]);
            vec3 node3 = getPosition(creaseMeta[2]);
            vec3 node4 = getPosition(creaseMeta[3]);

            float tol = 0.000001;

            vec3 creaseVector = node4-node3;
            float creaseLength = length(creaseVector);

            if (abs(creaseLength)<tol) {
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
            creaseVector /= creaseLength;

            vec3 vector1 = node1-node3;
            vec3 vector2 = node2-node3;

            float proj1Length = dot(creaseVector, vector1);
            float proj2Length = dot(creaseVector, vector2);

            float dist1 = sqrt(abs(vector1.x*vector1.x+vector1.y*vector1.y+vector1.z*vector1.z-proj1Length*proj1Length));
            float dist2 = sqrt(abs(vector2.x*vector2.x+vector2.y*vector2.y+vector2.z*vector2.z-proj2Length*proj2Length));

            if (dist1<tol || dist2<tol){
                gl_FragColor = vec4(-1);//disable crease
                return;
            }

            gl_FragColor = vec4(dist1, dist2, proj1Length/creaseLength, proj2Length/creaseLength);
        }
    </script>

    <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.js"></script>
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
    <script type="text/javascript" src="dependencies/TrackballControls.js"></script>
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.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="dependencies/SVGLoader.js"></script>
    <script type="text/javascript" src="dependencies/OBJExporter.js"></script>
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
    <script type="text/javascript" src="dependencies/earcut.js"></script>
    <script type="text/javascript" src="dependencies/fold.js"></script>
    <script type="text/javascript" src="dependencies/CCapture.all.min.js"></script>
    <!--<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>-->

    <!--<script type="text/javascript" src="dependencies/EffectComposer.js"></script>-->
    <!--<script type="text/javascript" src="dependencies/MaskPass.js"></script>-->
    <!--<script type="text/javascript" src="dependencies/ShaderPass.js"></script>-->
    <!--<script type="text/javascript" src="dependencies/CopyShader.js"></script>-->
    <!--<script type="text/javascript" src="dependencies/SSAOShader.js"></script>-->
    <!--<script type="text/javascript" src="dependencies/Detector.js"></script>-->
    <!--<script type="text/javascript" src="dependencies/RenderPass.js"></script>-->

    <script type="text/javascript" src="dependencies/WebVR.js"></script>
    <script type="text/javascript" src="dependencies/VREffect.js"></script>
    <script type="text/javascript" src="dependencies/ViveController.js"></script>
    <script type="text/javascript" src="dependencies/VRControls.js"></script>

    <script type="text/javascript" src="js/dynamic/GLBoilerplate.js"></script>
    <script type="text/javascript" src="js/dynamic/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>
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
    <script type="text/javascript" src="js/crease.js"></script>
    <script type="text/javascript" src="js/model.js"></script>
    <script type="text/javascript" src="js/3dUI.js"></script>
    <script type="text/javascript" src="js/staticSolver.js"></script>
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
    <script type="text/javascript" src="js/rigidSolver.js"></script>
    <script type="text/javascript" src="js/pattern.js"></script>
    <script type="text/javascript" src="js/saveSTL.js"></script>
    <script type="text/javascript" src="js/saveFOLD.js"></script>
    <script type="text/javascript" src="js/importer.js"></script>
    <script type="text/javascript" src="js/ViveInterface.js"></script>
    <script type="text/javascript" src="js/videoAnimator.js"></script>

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<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 / FOLD)</a></li>
                    <!--<li><a id="importSettings" href="#">SVG Import Settings...</a></li>-->
                    <li><a id="tips" href="#">File Import Tips</a></li>
                    <li class="divider"></li>
                    <li><a id="createGif" href="#">Record animated GIF...</a></li>
                    <li><a id="createVideo" href="#">Record video...</a></li>
                    <li class="divider"></li>
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
                    <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
                    <li class="divider"></li>
                    <li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li>
                    <!--<li><a id="saveSVGScreenshot" href="#">Save SVG screenshot</a></li>-->
                </ul>
            </li>
            <li class="dropdown navDropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu" style="min-width: 200px;">
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Origami<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Origami/flappingBird.svg">Flapping Bird</a></li>
                            <li><a href="#" class="demo author" data-author="randlett" data-url="Origami/randlettflappingbird.svg">Randlett Flapping Bird</a></li>
                            <li><a href="#" class="demo" data-url="Origami/traditionalCrane.svg">Crane</a></li>
                            <li><a href="#" class="demo author" data-author="hypar" data-url="Origami/hypar.svg">Hypar</a></li>
                            <li><a href="#" class="demo" data-url="Origami/singlesquaretwist.svg">Square Twist (single)</a></li>
                            <li><a href="#" class="demo author" data-author="squareTwist" data-url="Origami/squaretwistManyAngles.svg">Square Twist (many angles)</a></li>
                            <li class="divider"></li>
                            <li><a href="#" class="demo author" data-author="langTreemaker" data-url="Origami/langCardinal.svg">Lang Cardinal</a></li>
                            <li><a href="#" class="demo author" data-author="langTreemaker" data-url="Origami/langOrchid.svg">Lang Orchid</a></li>
                            <li><a href="#" class="demo author" data-author="langTreemaker" data-url="Origami/langKnlDragon.svg">Lang KNL Dragon</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Tessellations<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo author" data-author="miuraOri" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb</a></li>
                            <li class="divider"></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanExtrudedBoxes.svg">Huffman Extruded Boxes</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanWaterbomb.svg">Huffman Waterbombs</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanRectangularWeave.svg">Huffman Rect Weave</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanStarsTriangles.svg">Huffman Stars-Triangles</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanExdentedBoxes.svg">Huffman Exdented Boxes</a></li>
                            <li class="divider"></li>
                            <li><a href="#" class="demo author" data-author="reschTessellations" data-url="Tessellations/reschTriTessellation.svg">Resch Triangle Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="reschTessellations" data-url="Tessellations/reschBarbell.svg">Resch Barbell Tessellation</a></li>
                            <li class="divider"></li>
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langHoneycomb.svg">Lang Honeycomb Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langWedgeDoubleFaced.svg">Lang Wedged Double Faced Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langOvalTessellation.svg">Lang Oval Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langHyperbolicLimit.svg">Lang Hyperbolic Limit</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Curved Creases<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo author" data-author="huffmanCurved" data-url="Curved/huffmanTower.svg">Huffman Tower</a></li>
                            <li><a href="#" class="demo author" data-author="sam" data-url="Curved/shell14.svg">14 panel shell</a></li>
                            <li><a href="#" class="demo author" data-author="sam" data-url="Curved/shell6.svg">6 panel shell</a></li>
                        </ul>
                    </li>
                    <!--<li class="dropdown-submenu">-->
                        <!--<a tabindex="-1">Kirigami<span class="pull-right fui-arrow-right"></span></a>-->
                        <!--<ul class="dropdown-menu">-->
                            <!--<li><a href="#" class="demo" data-url="Kirigami/honeycombKiri.svg">Kirigami Honeycomb</a></li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Popups<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo author" data-author="ullagami" data-url="Popup/geometricPopup.svg">Geometric Pattern</a></li>
                            <li><a href="#" class="demo author" data-author="popupology" data-url="Popup/castlePopup.svg">Castle</a></li>
                            <li><a href="#" class="demo author" data-author="popupology" data-url="Popup/housePopup.svg">House</a></li>
                            <!--<li><a href="#" class="demo" data-url="Popup/popupSimple.svg">Simple Square</a></li>-->
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Maze Foldings<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo author" data-author="squareMaze" data-url="Squaremaze/helloworld.svg">Square Maze "hello world"</a></li>
                            <li><a href="#" class="demo author" data-author="squareMaze" data-url="Squaremaze/origamisimulator.svg">Square Maze "origami simulator"</a></li>
                            <li><a href="#" class="demo author" data-author="squareMaze" data-url="Squaremaze/cross.svg">Square Maze "+"</a></li>
                            <!--<li class="divider"></li>-->
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Origami Bases<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Bases/birdBase.svg">Bird Base</a></li>
                            <li><a href="#" class="demo author" data-author="moveSlowly" data-url="Bases/frogBase.svg">Frog Base</a></li>
                            <li><a href="#" class="demo" data-url="Bases/boatBase.svg">Boat Base</a></li>
                            <li><a href="#" class="demo" data-url="Bases/pinwheelBase.svg">Pinwheel Base</a></li>
                            <li><a href="#" class="demo" data-url="Bases/openSinkBase.svg">Open Sink Base</a></li>
                            <li><a href="#" class="demo" data-url="Bases/squareBase.svg">Square Base</a></li>
                            <li><a href="#" class="demo" data-url="Bases/waterbombBase.svg">Waterbomb Base</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Simple Folds<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="SimpleFolds/simpleVertex.svg">Simple Vertex</a></li>
                            <li><a href="#" class="demo" data-url="SimpleFolds/russianTriangle.svg">Russian Triangle</a></li>
                            <li><a href="#" class="demo" data-url="SimpleFolds/mapfold.svg">Map Fold</a></li>
                            <li><a href="#" class="demo" data-url="SimpleFolds/brochurefold.svg">Brochure Fold</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Problematic Patterns<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo author" data-author="skinnyTriangles" data-url="Tessellations/langRattanWeave.svg">Lang Rattan Weave</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="dropdown navDropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">View <b class="caret"></b></a>
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu">
                    <li><a id="menuVis" href="#">Toggle Menu Visibility</a></li>
                    <li><a id="changeBackground" href="#">Change Background Color...</a></li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Rotate Model<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="stopRotation" href="#">Stop Rotation</a></li>
                            <li><a id="rotateX" href="#">Rotate Around X</a></li>
                            <li><a id="rotateY" href="#">Rotate Around Y</a></li>
                            <li><a id="rotateZ" href="#">Rotate Around Z</a></li>
                            <li><a id="changeRotationSpeed" href="#">Change Rotation Speed...</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">View Direction<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" id="cameraZ">View Front</a></li>
                            <li><a href="#" id="cameraMinusZ">View Back</a></li>
                            <li><a href="#" id="cameraX">View Right</a></li>
                            <li><a href="#" id="cameraMinusX">View Left</a></li>
                            <li><a href="#" id="cameraY">View Top</a></li>
                            <li><a href="#" id="cameraMinusY">View Bottom</a></li>
                            <li><a href="#" id="cameraIso">View Iso</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
                <div class="sliderInput floatRight" id="creasePercentNav">
                    <span class="label-slider">Fold Percent : </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" type="text">-->
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->

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

</nav>

<div  id="threeContainer"></div>
<canvas id="gpuMathCanvas"></canvas>
<div id="controls">
    <div class="sliderInput floatRight" id="creasePercent">
        <span class="label-slider">Fold Percent : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
        <input value="" placeholder="" class="float form-control" type="text">&nbsp;&nbsp;%
    </div><br/><br/>
    <div id="simButtons" class="alignRight">
        <a href="#" id="start" class="paddingBottom btn btn-lg btn-success">Start Simulation</a>
        <a href="#" id="pause" class="paddingBottom btn btn-lg btn-warning">Pause Simulation</a>
        <a href="#" id="reset" class="paddingBottom btn btn-lg btn-default">Reset</a>
        <div id="stepForwardOptions" class="floatRight">
            <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
            <label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="int form-control" type="text">
            <br/><br/>
        </div>
    </div>
    <!--<b>Simulation Type:</b><br/>-->
    <!--<div class="indent">-->
        <!--<label class="radio">-->
            <!--<input name="simType" value="dynamic" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>-->
            <!--Compliant Dynamic Simulation <a class="about floatRight" href="#" id="aboutDynamicSim"><span class="fui-question-circle"></span></a>-->
        <!--</label>-->
        <!--&lt;!&ndash;<label class="radio">&ndash;&gt;-->
            <!--&lt;!&ndash;<input name="simType" value="static" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>&ndash;&gt;-->
            <!--&lt;!&ndash;Compliant Static Simulation <a class="about floatRight" href="#" id="aboutStaticSim"><span class="fui-question-circle"></span></a>&ndash;&gt;-->
        <!--&lt;!&ndash;</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="radio">&ndash;&gt;-->
            <!--&lt;!&ndash;<input name="simType" value="rigid" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>&ndash;&gt;-->
            <!--&lt;!&ndash;Rigid Static Simulation <a class="about floatRight" href="#" id="aboutRigidSim"><span class="fui-question-circle"></span></a>&ndash;&gt;-->
        <!--&lt;!&ndash;</label>&ndash;&gt;-->
    <!--</div><br/>-->
    <div class="inlineBlock fullWidth">
        <label class="checkbox floatRight" for="userInteractionEnabled">
            <input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
            Allow User Interaction
        </label>
    </div><br/>
    <div class="fullWidth alignRight">
        <a href="#" id="shouldCenterGeo" class="displayBlock btn btn-lg btn-default">Re-center geometry</a>
    </div><br/>
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/>
        <div id="simulationSettings" class="hide">
            <div class="sliderInput paddingBottom" 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="float form-control" type="text">
            </div>
            <!--<div class="sliderInput paddingBottom" id="triStiffness">-->
                <!--<span class="label-slider">Triangle Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>-->
                <!--<input value="" placeholder="" class="float form-control" type="text">-->
            <!--</div>-->
            <div class="sliderInput" id="creaseStiffness">
                <span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
                <input value="" placeholder="" class="float form-control" type="text">
            </div>
            <div class="sliderInput" id="panelStiffness">
                <span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
                <input value="" placeholder="" class="float form-control" type="text">
            </div>
            <div class="sliderInput" id="percentDamping">
                <span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
                <input value="" placeholder="" class="float form-control" type="text">
            </div>
        </div><br/>
    </div>
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
        <div id="animationsSettings" class="fullWidth hide">
            <div class="doubleIndent">
                <span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
                <span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span>
            </div>
        </div>
    </div><br/>

    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="errorInfo"><span class="fui-triangle-down"></span><b>Error:</b></a><a class="about" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/>
        <div id="errorInfo" class="hide smallTxt doubleIndent">
            <label>Average vertex error: <span id="globalError"></span></label>
        </div>
    </div><br/>

    <div class="extraSpace"></div>
</div>
<div id="svgViewer"></div>
<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
            <div>
                <a href="#" class="seeMore open" data-id="materialSettings"><span class="fui-triangle-down"></span>Mesh Material:</a>
            </div>
            <div id="materialSettings" class="inlineBlock indent">
                <label class="checkbox" for="meshVisible">
                    <input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Mesh Visible
                </label>
                <div id="meshMaterialOptions">
                    <label class="radio">
                        <input name="colorMode" value="color" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Colored Material
                    </label>
                    <div id="coloredMaterialOptions" class="indent">
                        <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                        <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                    </div>
                    <label class="radio">
                        <input name="colorMode" value="axialStrain" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
                    </label>
                    <div id="axialStrainMaterialOptions" class="indent">
                        <label>Max Strain: &nbsp;&nbsp;</label>
                        <input id="strainClip" value="" placeholder="" class="float form-control" type="text"> %<br/>
                    </div>
                    <label class="radio">
                        <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Face Normals Material
                    </label>
                </div>
                <br/>
            </div><br/>
            <div>
                <a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
            </div>
            <div id="edgeVisiblity" class="hide indent">
                <label class="checkbox" for="edgesVisible">
                    <input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Edges Visible
                </label>
                <div id="edgeVisOptions" class="indent">
                    <label class="checkbox" for="mtnsVisible">
                        <input id="mtnsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Mountains <span id="numMtns"></span>
                    </label>
                    <label class="checkbox" for="valleysVisible">
                        <input id="valleysVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Valleys <span id="numValleys"></span>
                    </label>
                    <label class="checkbox" for="panelsVisible">
                        <input id="panelsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Facet Creases <span id="numFacets"></span>
                    </label>
                    <label class="checkbox" for="passiveEdgesVisible">
                        <input id="passiveEdgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Undriven Edges <span id="numPassive"></span>
                    </label>
                    <label class="checkbox" for="boundaryEdgesVisible">
                        <input id="boundaryEdgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Boundary Edges <span id="numBoundary"></span>
                    </label>

                </div>
                <br/>
            </div>
            <br/>
            <!--Rendering:-->
            <!--<div class="indent">-->
                <!--<label class="checkbox" for="ambientOcclusion">-->
                    <!--<input id="ambientOcclusion" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>-->
                    <!--Ambient Occlusion-->
                <!--</label>-->
            <!--</div>-->
            <div>
                <a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
            </div>
            <div id="virtualReality" class="hide indent smallTxt">
                Status: &nbsp;<span id="VRstatus"></span><a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a>
                <div id="VRoptions"><br/>
                    <a href="#" id="enterVR" class="displayBlock btn btn-lg btn-inverse"></a>
                </div><br/><br/>
            </div><br/>
            <div class="extraSpace"></div>
        </div>
    </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">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                <