function startModel()
{
    alertUser("");
    
    filename = "";
    
    setInterval(timerEvent, 10);
    makeCube();
                     
    canvas = document.createElement('canvas');
    canvas2 = document.createElement('canvas');
    document.body.appendChild(canvas);
    document.body.appendChild(canvas2);
    canvas.style.position = 'fixed';
    canvas2.style.position = 'fixed';
    ctx = canvas.getContext('2d');
    gl = canvas2.getContext("webgl") || canvas2.getContext("experimental-webgl");
    
    pos = new Point(0, 0); // last known position
        
    lastClickPos = new Point(0, 0); // last click position
    window.addEventListener('resize', resize);
    window.addEventListener('keydown', keyDown);
    window.addEventListener('keyup', keyRelease);
    
    canvas.addEventListener('mousemove', mouseMove);
    canvas.addEventListener('mousedown', mouseDown);
    canvas.addEventListener('mouseup', mouseUp);
    canvas.addEventListener('mouseenter', setPosition);
    canvas.addEventListener('click', click);
    
    canvas2.addEventListener('mousemove', mouseMoveGL);
    canvas2.addEventListener('mousedown', mouseDownGL);
    canvas2.addEventListener('mouseup', mouseUpGL);    
    
    canvas.style.backgroundColor = colorString(canvasBackgroundColor, false);
    canvas.style.position = "absolute";
    canvas.style.border = '1px solid black';    
    
    canvas2.style.position = "absolute";
    canvas2.style.border = '1px solid black';    
    resize();
    
    document.getElementById("checkboxoutlines").checked = false;
    document.getElementById("checkboxsolid").checked = true;
    document.getElementById("checkboxgrid").checked = false;
    document.getElementById("toolslider").checked = true;
    document.getElementById("checkboxtwosided").checked = true;
    document.getElementById("checkboxwebgl").checked = false;
    document.getElementById("checkbox2DWindow").checked = true;
    document.getElementById("checkboxtransparent").checked = false;
    
    if (gl != null)
    {    
      gl.clearColor(canvasBackgroundColor.R / 255.0, 
      canvasBackgroundColor.G / 255.0, canvasBackgroundColor.B / 255.0, 1.0);
      gl.enable(gl.DEPTH_TEST);
      gl.depthFunc(gl.LEQUAL);
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    }
    
    addShaderToList("Phong");
    addShaderToList("Rainbow 1");
    addShaderToList("Rainbow 2");
    addShaderToList("Stripes");
    addShaderToList("Chrome");
    addShaderToList("Smear");
    addShaderToList("Flat");
    addShaderToList("T-Map");
    addShaderToList("Comic");
    addShaderToList("Comic 2");
    addShaderToList("Topo");
    addShaderToList("Paint By Numbers");
    
    var rect = canvas.getBoundingClientRect();
    origin = new Point(-(rect.width / 2), -(rect.height / 2));
    
    setEditViewOptions();
    
    hideInputForm();
}

function To2D(p3d) // gives a 3D->2D perspective projection
{
    var point3d = new Point3D(p3d.x, p3d.y, p3d.z);
    
    RotateXYZ(point3d, myCenter, radiansX, radiansY, radiansZ);
    var xRise = point3d.x - myCenter.x;
    var yRise = point3d.y - myCenter.y;
    var zRunEye = zEyePlane - point3d.z;
    var zRunView = zViewingPlane - point3d.z;
    var factor = (zRunEye - zRunView) / zRunEye;
    var x = (myCenter.x + (factor * xRise));
    var y = (myCenter.y + (factor * yRise));
    x *= ctx.canvas.width;
    x /= docSize;
    y *= ctx.canvas.width;
    y /= docSize;
    
    var p = new Point(Math.floor(x), -Math.floor(y)); 
    // have to flip sign of Y coordinate, this makes it match the GL side
    
    p.x -= origin.x;
    p.y -= origin.y;
    
    return p;
}

function RotateXYZ(p, rotation_point, radiansX, radiansY, radiansZ)
{
    if (radiansZ != 0.0) // rotate about Z axis
    {
        radiansZ = normalize_radians(radiansZ);
        if (radiansZ != 0)
        {
            var ydiff = (p.y) - (rotation_point.y);
            var xdiff = (p.x) - (rotation_point.x);
            var xd = (xdiff * Math.cos(radiansZ)) - (ydiff * Math.sin(radiansZ));
            xd = Math.round(xd, 0);
            var yd = (xdiff * Math.sin(radiansZ)) + (ydiff * Math.cos(radiansZ));
            yd = Math.round(yd, 0);
            p.x = rotation_point.x + (xd);
            p.y = rotation_point.y + (yd);
        }
    }
    
    if (radiansY != 0.0) // rotate about the Y axis
    {
        radiansY = normalize_radians(radiansY);
        if (radiansY != 0)
        {
            var zdiff = (p.z) - (rotation_point.z);
            var xdiff = (p.x) - (rotation_point.x);
            var xd = (xdiff * Math.cos(radiansY)) - (zdiff * Math.sin(radiansY));
            xd = Math.round(xd, 0);
            var zd = (xdiff * Math.sin(radiansY)) + (zdiff * Math.cos(radiansY));
            zd = Math.round(zd, 0);
            p.x = rotation_point.x + (xd);
            p.z = rotation_point.z + (zd);
        }
    }
    
    if (radiansX != 0.0) // rotate about the X axis
    {
        radiansX = normalize_radians(radiansX);
        if (radiansX != 0)
        {
            var ydiff = (p.y) - (rotation_point.y);
            var zdiff = (p.z) - (rotation_point.z);
            var zd = (zdiff * Math.cos(radiansX)) - (ydiff * Math.sin(radiansX));
            zd = Math.round(zd, 0);
        var yd = (zdiff * Math.sin(radiansX)) + (ydiff * Math.cos(radiansX));
            yd = Math.round(yd, 0);
            p.z = rotation_point.z + (zd);
            p.y = rotation_point.y + (yd);
        }
    }    
}

function cube(left, right, top, bottom, front, back)
{
    if (left == undefined)
    {
        left = 0;
    }
    if (right == undefined)
    {
        right = 0;
    }
    if (top == undefined)
    {
        top = 0;
    }
    if (bottom == undefined)
    {
        bottom = 0;
    }
    if (front == undefined)
    {
        front = 0;
    }
    if (back == undefined)
    {
        back = 0;
    }
    
    this.color = new Color(190, 180, 190); // default solid color
    this.outlineColor = new Color(0, 0, 0); // default solid outline color
    this.textureName = "";
    
    this.nSubdivide = 0;
    
    this.left = left;
    this.right = right;
    this.top = top;
    this.bottom = bottom;
    this.front = front;
    this.back = back;
    this.previousFacetLists = [];
    this.facets = [];
    
    var lefttopback = new Point3D(left, top, back);
    var lefttopfront = new Point3D(left, top, front);
    var righttopfront = new Point3D(right, top, front);
    var righttopback = new Point3D(right, top, back);
    
    var leftbottomback = new Point3D(left, bottom, back);
    var leftbottomfront = new Point3D(left, bottom, front);
    var rightbottomfront = new Point3D(right, bottom, front);
    var rightbottomback = new Point3D(right, bottom, back);
    
    var topPoints = [];
    
    topPoints.push(clonePoint3D(lefttopback));
    topPoints.push(clonePoint3D(righttopback));
    topPoints.push(clonePoint3D(righttopfront));
    topPoints.push(clonePoint3D(lefttopfront));
    topPoints.reverse();
    
    var bottomPoints = [];
    
    bottomPoints.push(clonePoint3D(leftbottomfront));
    bottomPoints.push(clonePoint3D(rightbottomfront));
    bottomPoints.push(clonePoint3D(rightbottomback));
    bottomPoints.push(clonePoint3D(leftbottomback));
    bottomPoints.reverse();
    
    var frontPoints = [];
    
    frontPoints.push(clonePoint3D(lefttopfront));
    frontPoints.push(clonePoint3D(righttopfront));
    frontPoints.push(clonePoint3D(rightbottomfront));
    frontPoints.push(clonePoint3D(leftbottomfront));
    frontPoints.reverse();
    var backPoints = [];
    
    backPoints.push(clonePoint3D(righttopback));
    backPoints.push(clonePoint3D(lefttopback));
    backPoints.push(clonePoint3D(leftbottomback));
    backPoints.push(clonePoint3D(rightbottomback));
    backPoints.reverse();
    
    var leftPoints = [];
    
    leftPoints.push(clonePoint3D(lefttopback));
    leftPoints.push(clonePoint3D(lefttopfront));
    leftPoints.push(clonePoint3D(leftbottomfront));
    leftPoints.push(clonePoint3D(leftbottomback));
    leftPoints.reverse();
    var rightPoints = [];
    
    rightPoints.push(clonePoint3D(righttopfront));
    rightPoints.push(clonePoint3D(righttopback));
    rightPoints.push(clonePoint3D(rightbottomback));
    rightPoints.push(clonePoint3D(rightbottomfront));
    rightPoints.reverse();
    
    var id = 1;
    
    var s1 = new Facet();
    s1.ID = id++;
    s1.points = topPoints;    
    this.facets.push(s1);
    
    var s2 = new Facet();
    s2.ID = id++;
    s2.points = bottomPoints;    
    this.facets.push(s2);
    
    var s3 = new Facet();
    s3.ID = id++;
    s3.points = backPoints;    
    this.facets.push(s3);
    
    var s4 = new Facet();
    s4.ID = id++;
    s4.points = frontPoints;    
    this.facets.push(s4);
    
    var s5 = new Facet();
    s5.ID = id++;
    s5.points = leftPoints;    
    this.facets.push(s5);
    
    var s6 = new Facet();
    s6.ID = id++;
    s6.points = rightPoints;    
    this.facets.push(s6);    
    
    for (var n = 0; n < this.facets.length; n++)
    {
        this.facets[n].cube = this;
    }
}
function Facet()
{
    this.cube = -1;
    this.ID = -1;
    this.points = [];
    this.point1 = new Point(0, 0);
    this.point2 = new Point(0, 0);
    this.closed = false;
    this.fill = false;
    this.averagePoint3D = new Point3D(0, 0, 0);
    this.normal = -1;    
    
    this.edges = [];    
    this.neighbors = [];
    this.greatestRotatedZ = 0;
    this.greatestLeastRotatedZ = 0;
    this.averageRotatedZ = 0;
    
    this.boundsMin = new Point3D(0, 0, 0);
    this.boundsMax = new Point3D(0, 0, 0);
}
function Point3D(x, y, z)
{
    this.x = x;
    this.y = y;
    this.z = z;
}

function CalculateNormal(facet)
{
    var normal = -1;
    
    if (facet.points.length > 2)
    {
        var p0 = facet.points[0];
        var p1 = facet.points[1];
        var p2 = facet.points[2];
        
        var a = timesPoint(minusPoints(p1, p0), 8);
        var b = timesPoint(minusPoints(p2, p0), 8);
        normal = new line(clonePoint3D(p0), 
                                new Point3D((a.y * b.z) - (a.z * b.y), // cross product
                                          -((a.x * b.z) - (a.z * b.x)),
                                            (a.x * b.y) - (a.y * b.x))
                );
        normal.end = LengthPoint(normal, cubeSize * 2);
        
        var avg =  averageFacetPoint(facet.points);
        
        normal.end.x += avg.x - normal.start.x;
        normal.end.y += avg.y - normal.start.y;
        normal.end.z += avg.z - normal.start.z;
        normal.start = avg;        
    }
    
    return normal;
}
function getLightSourceAngle(normal)
{
    var angle = 0;
    
    if (normal != -1)
    {
        angle = normalize_radians(vectorAngle
                (lightSource, minusPoints(ToRotated(normal.end), ToRotated(normal.start))));
    }
    
    return angle;
}      
function vectorAngle(vector1, vector2)
{
    var angle = 0.0;
    var length1 = Math.sqrt((vector1.x * vector1.x) + (vector1.y * vector1.y) + 
                            (vector1.z * vector1.z));
    var length2 = Math.sqrt((vector2.x * vector2.x) + (vector2.y * vector2.y) + 
                           (vector2.z * vector2.z));
    var dot_product = (vector1.x * vector2.x + vector1.y * vector2.y + vector1.z * vector2.z);
    var cosine_of_angle = dot_product / (length1 * length2);
    angle = Math.acos(cosine_of_angle);
    return angle;
}               
function ShadeFacet(color, angle)
{
    var darken_range = 0.75;
    var lighten_range = 0.75;
    
    var result = new Color(color.R, color.G, color.B);
    if (angle > 180)
    {
        angle = 360 - angle;
    }
    if (angle > 90) // darken
    {
        var darken_amount = (angle - 90) / 90;
        darken_amount *= darken_range;
        var r = color.R - (color.R * darken_amount);
        var g = color.G - (color.G * darken_amount);
        var b = color.B - (color.B * darken_amount);
        r = Math.min(255, Math.max(0, r));
        g = Math.min(255, Math.max(0, g));
        b = Math.min(255, Math.max(0, b));
        
        result = new Color(r, g, b);
    }
    else // lighten
    {
        var lighten_amount = (90 - angle) / 90;
        lighten_amount *= lighten_range;
        var r = color.R + ((255 - color.R) * lighten_amount);
        var g = color.G + ((255 - color.G) * lighten_amount);
        var b = color.B + ((255 - color.B) * lighten_amount);
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));
        
        result = new Color(r, g, b);
    }
    return result;
}

function sortFacets()
{
    allFacets = [];
    for (var w = 0; w < cubes.length; w++)
    {
        var cube = cubes[w];
        
        for (var i = 0; i < cube.facets.length; i++)
        {
            allFacets.push(cube.facets[i]);
        }        
    }
    sortFacetsOnZ(allFacets);
}
function sortFacetsOnZ(facets)
{
    for (var i = 0; i < facets.length; i++)
    {
        setAverageAndGreatestRotatedZ(facets[i]);
    }
    facets.sort(
                    function(a, b)
                    {
                        if (a.greatestRotatedZ == b.greatestRotatedZ)
                        {
                            if (a.leastRotatedZ == b.leastRotatedZ)
                            {
                                return a.averageRotatedZ - b.averageRotatedZ;
                            }
                            else
                            {
                                return a.leastRotatedZ - b.leastRotatedZ;
                            }
                        }
                        else
                        {
                            return a.greatestRotatedZ - b.greatestRotatedZ
                        }
                    }
    );
}

function updateModel()
{
    for (var c = 0; c < cubes.length; c++)
    {
        updateCube(cubes[c]);
    }
    sortFacets();
    reloadSceneGL();
    draw();
}
function draw()
{
    if (isGL && gl != null)
    {
        drawSceneGL();
    }
    if (is2dWindow || !isGL)
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        findGridOrientation();
        if (gridChosen())
        {       
            drawGridXY();
        }
        lineColor = lineColorShape;
        drawCubes();
        if (mouseIsDown && draggingShape)
        {
            draw3DRectangleFrom2DPoints(mouseDownPos, pos, false, "white");       
        }
        if (hitLine != -1)
        {
            var pts = [];
            pts.push(To2D(hitLine.start));
            pts.push(To2D(hitLine.end));
            drawPolygonHighlighted(pts);
        }
        if (hitFacet != -1 && toolChosen() == "facet")
        {
            drawPolygon3d(hitFacet.points, true, true, "yellow", true);
        }
        for (var g = 0; g < selectedLines.length; g++)
        {
            var pts = [];
            pts.push(To2D(selectedLines[g].start));
            pts.push(To2D(selectedLines[g].end));
            drawPolygonSelected(pts);
        }
        if (hitVertex != -1)
        {
            drawVertex(hitVertex, false);
        }
        for (var qq = 0; qq < selectedVertexes.length; qq++)
        {
            drawVertex(selectedVertexes[qq], true);
        }
        if (lineDiv != -1 &&
            lineDiv2 != -1)
        {
            drawLine2D(lineDiv, "blue");
            drawLine2D(lineDiv2, "blue");
        }
        if (draggingRect)
        {
            draw2DRectangleFrom2DPoints(mouseDownPos, pos, "black");       
        }
        if (colorPickMode.length > 0)
        {
            drawColors(0, 0, colorPickHeight);
        }
        drawMenu();
    }
}
function drawCubes()
{
    var drawlines = isOutline || !isShade;
    var drawNormals = isNormals;
    var shadeSolids = isShade;
    var dual = isDualSided;
    for (var i = 0; i < allFacets.length; i++)
    {
        var facet = allFacets[i];
        if (facet.normal == -1)
        {
            facet.normal = CalculateNormal(facet);
        }
        var c = facet.cube.color;
        if (colorPickMode.length == 0)
        {
            if (facet.cube == hitSolid)
            {
                c = new Color(23, 100, 123);
            }    
            if (listHas(selectedSolids, facet.cube))
            {
                c = new Color(200, 30, 144);
            }
            if (listHas(selectedFacets, facet))
            {
                c = new Color(0, 255, 255);
            }
        }
        c = ShadeFacet(c, degrees_from_radians(getLightSourceAngle(facet.normal)));
        var show = true;
        if (!dual)
        {
            show = ShowFacet(degrees_from_radians(getFrontSourceAngle(facet.normal)));
        }
        var colorFillStyle = colorString(c, isTransparent);
        var colorOutlineStyle = colorString(facet.cube.outlineColor, isTransparent);    
        if (listHas(selectedSolids, facet.cube))
        {
            drawlines = true;
            colorOutlineStyle = "red";
        }
        if (show)
        {
            drawPolygon3d(facet.points, true, shadeSolids || listHas(selectedFacets, facet),
                colorFillStyle, drawlines, colorOutlineStyle);
            if (drawNormals)
            {
                drawLine3D(facet.normal, "magenta");
            }
        }
    }
}
function drawPolygon3d(points, isClosed, isFill, fillColor, isOutline, outlineColor)
{
    var result = [];
    
    if (points.length > 0)
    {
        for (var i = 0; i < points.length; i++)
        {
            result.push(To2D(points[i]));
        }
    
        drawPolygon(result, isClosed, isFill, fillColor, isOutline, outlineColor);
    }
}
function drawPolygon
(points, isClosed, isFill, fillColor, isOutline, outlineColor, lineThickness)
{
    if (points.length > 0)
    {
        isClosed = isClosed ? isClosed : false;
        isFill = isFill ? isFill : false;
        if (isOutline === undefined)
        {
            isOutline = true;
        }
        if (lineThickness === undefined)
        {
            lineThickness = 1;
        }
        if (outlineColor === undefined)
        {
            outlineColor = lineColor;
        }
        
        ctx.beginPath();
        ctx.lineWidth = lineThickness;
        ctx.lineCap = 'round';
        ctx.strokeStyle = outlineColor;
        if (isFill)
        {
            ctx.fillStyle = fillColor;
        }
        ctx.moveTo(points[0].x, points[0].y);
        for (var i = 1; i < points.length; i++)
        {        
            ctx.lineTo(points[i].x, points[i].y);
        }
        
        if (isClosed)
        {
            ctx.lineTo(points[0].x, points[0].y);
        }
        if (isFill)
        {
            ctx.fill();    
        }
        
        if (isOutline)
        {
            ctx.stroke();
        }
    }
}

function bindModelGL()
{
    bindVerticesGL();
    bindColorsGL();
    bindVertexIndicesGL();
    bindTextureCoordinatesGL();
    bindNormalsGL();
}

function bindColorsGL()
{
    if (isGL && gl != null)
    {
        var generatedColors = [];
        for (var i = 0; i < allFacets.length; i++)
        {   
            var f = allFacets[i];
            var c = color2FromColor(f.cube.color);
            
            var b = [];
            
            b.push(c.R);
            b.push(c.G);
            b.push(c.B);
            b.push(1.0);
                
            // repeat each color 4 times for the 4 vertices of each facet
            for (var s = 0; s < 4; s++) 
            {            
                generatedColors.push(b[0]);
                generatedColors.push(b[1]);
                generatedColors.push(b[2]);
                generatedColors.push(b[3]);                
            }
        }
      
        cubeVerticesColorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
    }
}

function bindNormalsGL()
{              
    if (isGL && gl != null)
    {    
        cubeVerticesNormalBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
        var vertexNormals = [];
        for (q = 0; q < allFacets.length; q++) 
        {
            var f = allFacets[q];
            if (f.normal == -1)
            {
                f.normal = CalculateNormal(f);
            }
        }
        if (fastVertexNormalMethod)
        {
            if (isSmoothShading())
            {
                allSortedPoints = getFacetPointsAndSetUpBackPointers(allFacets);
                sortPointsByXYZ(allSortedPoints);
                stageVertexNeighborFacets(allSortedPoints);
            }
        }
        if (isSmoothShading())
        {        
            for (q = 0; q < allFacets.length; q++) 
            {
                var f = allFacets[q];
                for (var j = 0; j < f.points.length; j++)
                {
                    var p = f.points[j];
                    var vn = p.vertexNormal;
                    if (vn == undefined)
                    {
                        vn = calculateVertexNormal(p, allFacets);
                        p.vertexNormal = vn;
                    }
                    vertexNormals.push((vn.end.x / reductionFactor) - 
                                       (vn.start.x / reductionFactor));
                    vertexNormals.push((vn.end.y / reductionFactor) - 
                                       (vn.start.y / reductionFactor));
                    vertexNormals.push((vn.end.z / reductionFactor) - 
                                       (vn.start.z / reductionFactor));
                }
            }        
        }
        else
        {
            for (q = 0; q < allFacets.length; q++) 
            {
                var f = allFacets[q];
                for (var i = 0; i < 4; i++) 
                {
                    vertexNormals.push((f.normal.end.x / reductionFactor) - 
                                       (f.normal.start.x / reductionFactor));
                    vertexNormals.push((f.normal.end.y / reductionFactor) - 
                                       (f.normal.start.y / reductionFactor));
                    vertexNormals.push((f.normal.end.z / reductionFactor) - 
                                       (f.normal.start.z / reductionFactor));
                }
            }        
        }        
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
    }
}

function bindVerticesGL()
{
    cubeVerticesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
    var vertices = [];
  
    for (var i = 0; i < allFacets.length; i++)
    {    
        var f = allFacets[i];
        for (var j = 0; j < f.points.length; j++)
        {
            var point3d = f.points[j];
        
            vertices.push(point3d.x / reductionFactor);
            vertices.push(point3d.y / reductionFactor);
            vertices.push((point3d.z / reductionFactor));
        }
    }
  
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}

function bindVertexIndicesGL()
{
    cubeVerticesIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
    var cubeVertexIndices = [];
 
    var t = 0;
    
    for (var i = 0; i < allFacets.length; i++)
    {
        cubeVertexIndices.push(t + 0);
        cubeVertexIndices.push(t + 1);
        cubeVertexIndices.push(t + 2);
        cubeVertexIndices.push(t + 0);
        cubeVertexIndices.push(t + 2);
        cubeVertexIndices.push(t + 3);
        
        t += 4;
    }
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
}

function bindTextureCoordinatesGL()
{
    for (var i = 0; i < cubes.length; i++)
    {
        assignPolarUV_2(cubes[i], i);
    }
    cubeVerticesTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
  
    var textureCoordinates = [];
    for (var i = 0; i < allFacets.length; i++)
    {
        if (isPolarUV)
        {
            var f = allFacets[i];
            
            textureCoordinates.push(f.points[0].u);  
            textureCoordinates.push(f.points[0].v);  
            
            textureCoordinates.push(f.points[1].u);  
            textureCoordinates.push(f.points[1].v);  
            textureCoordinates.push(f.points[2].u);  
            textureCoordinates.push(f.points[2].v);  
            textureCoordinates.push(f.points[3].u);  
            textureCoordinates.push(f.points[3].v);  
        }
        else
        {
            textureCoordinates.push(0.0);  
            textureCoordinates.push(0.0);
            textureCoordinates.push(1.0);  
            textureCoordinates.push(0.0);
            textureCoordinates.push(1.0);  
            textureCoordinates.push(1.0);
            textureCoordinates.push(0.0);  
            textureCoordinates.push(1.0);
        }
    }  
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
              gl.STATIC_DRAW);
}

<script id="vertex-shader-color-flat" type="x-shader/x-vertex">
  // VERTEX SHADER COLOR (FLAT)
  attribute highp vec3 aVertexNormal;
  attribute highp vec3 aVertexPosition;
  attribute vec4 aVertexColor;
  uniform highp mat4 uNormalMatrix;
  uniform highp mat4 uMVMatrix;
  uniform highp mat4 uPMatrix;
  
  varying highp vec3 vLighting;
  varying lowp vec4 vColor;
  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
       
    highp vec3 ambientLight = vec3(0.5, 0.5, 0.5);
    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.5);
    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
    
    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
    
    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
    vLighting = ambientLight + (directionalLightColor * directional);
    
    vColor = aVertexColor;
  }
</script>
<script id="fragment-shader-color-flat" type="x-shader/x-fragment">
   // FRAGMENT SHADER COLOR (FLAT)
    varying lowp vec4 vColor;
    varying highp vec3 vLighting;
  
  uniform sampler2D uSampler;
  
  void main(void) {
    gl_FragColor = vec4(vColor.rgb * vLighting, 1.0);
  }
</script>

<script id="shader-vs-normals-notexture-phong" type="x-shader/x-vertex">
  // VERTEX SHADER COLOR (PHONG)
  attribute highp vec3 aVertexNormal;
  attribute highp vec3 aVertexPosition;
  attribute vec4 aVertexColor;
  uniform highp mat4 uNormalMatrix;
  uniform highp mat4 uMVMatrix;
  uniform highp mat4 uPMatrix;
  varying vec3 vTransformedNormal;
  varying vec4 vPosition;
  varying lowp vec4 vColor;
  void main(void) 
  {
     vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
     gl_Position = uPMatrix * vPosition;
     vTransformedNormal = vec3(uNormalMatrix * vec4(aVertexNormal, 1.0));
     
      vColor = aVertexColor;
  }
</script>
<script id="shader-fs-normals-notexture-phong" type="x-shader/x-fragment">
  // FRAGMENT SHADER COLOR (PHONG)
  precision mediump float;
  uniform int specularUniform;    
  
  varying vec3 vTransformedNormal;
  varying vec4 vPosition;
 
  varying lowp vec4 vColor;
  void main(void) {
    vec3 pointLightingLocation;
    pointLightingLocation = vec3(0, 13.5, 13.5);
    vec3 ambientColor;
    ambientColor = vec3(0.5, 0.5, 0.5);
    vec3 pointLightingColor;
    pointLightingColor = vec3(0.5, 0.5, 0.5);
    
    vec3 lightWeighting;
    vec3 lightDirection = normalize(pointLightingLocation - vPosition.xyz);
    float directionalLightWeighting = max(dot(normalize(vTransformedNormal), 
                                      lightDirection), 0.0);
        
    lightWeighting = ambientColor + pointLightingColor * directionalLightWeighting;
    vec4 fragmentColor;
    
    fragmentColor = vColor;
                         
    gl_FragColor = vec4(fragmentColor.rgb * lightWeighting, fragmentColor.a);
    if (specularUniform == 1)
    {
        if (dot(normalize(vTransformedNormal), lightDirection) > 0.99) // specular
        {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
    }
  }
  
</script>

function startSubdivision(solid)
{
    informUser("Subdividing, please wait...");
    subdivSurfaceLoopCounter = 0;
    var facets = solid.facets;
    solidToSubdivide = solid;
    isSubdividing = true;
    if (solid.nSubdivide == 0)
    {
        solid.previousFacetLists.push(solid.facets);
    }
    
    for (var i = 0; i < facets.length; i++)
    {
        facets[i].edges = getFacetLines(facets[i]);
        facets[i].averagePoint3D = averageFacetPoint(facets[i].points);
    }
    
    findFacetNeighborsAndAdjacents(facets);
    
    for (var i = 0; i < facets.length; i++)
    {
        var facet = facets[i];
        
        for (var j = 0; j < facet.edges.length; j++)
        {
            var edge = facet.edges[j];
            
            var list = [];
            list.push(edge.start);
            list.push(edge.end);
            if (edge.parentFacet != -1 && edge.adjacentFacet != -1)
            {
                list.push(edge.parentFacet.averagePoint3D);
                list.push(edge.adjacentFacet.averagePoint3D);
            }
            edge.edgePoint = averageFacetPoint(list);
        }
    }
    
    subdivTimerId = setTimeout(subdivisionSurfaceProcessFacet, 0);
    
    newSubdivFacets = [];
}    
function subdivisionSurfaceProcessFacet()
{
    var facet = solidToSubdivide.facets[subdivSurfaceLoopCounter];
    var nEdge = 0;
    var neighborsAndCorners = facetNeighborsPlusFacet(facet);
    for (var j = 0; j < facet.points.length; j++)
    {
        var p = facet.points[j];
    
        var facepoints = [];
        var edgepoints = [];
        var facetsTouchingPoint = findFacetsTouchingPoint(p, neighborsAndCorners);
        for (var n = 0; n < facetsTouchingPoint.length; n++)
        {
            var f = facetsTouchingPoint[n];
            
            facepoints.push(averageFacetPoint(f.points));
        }
        var edgesTouchingPoint = findEdgesTouchingPoint(p, facetsTouchingPoint);
        for (var m = 0; m < edgesTouchingPoint.length; m++)
        {
            var l = edgesTouchingPoint[m];
            
            edgepoints.push(midPoint3D(l.start, l.end));
        }
        var onBorder = false;
        if (facepoints.length != edgepoints.length)
        {                
            onBorder = true; // vertex is on a border
        }
        var F = averageFacetPoint(facepoints);
        var R = averageFacetPoint(edgepoints);
        var n = facepoints.length;
        
        var barycenter = roundPoint(divPoint(plusPoints
                         (plusPoints(F, timesPoint(R, 2)), timesPoint(p, n - 3)), n));
        var n1 = nEdge;
        if (n1 > facet.edges.length - 1)
        {
            n1 = 0;
        }
        var n2 = n1 - 1;
        if (n2 < 0)
        {
            n2 = facet.edges.length - 1;
        }
        if (onBorder)
        {
            var borderAverage = [];
            
            var etp = edgesTouchingPoint;
            
            for (var q = 0; q < etp.length; q++)
            {
                var l = etp[q];
                
                if (lineIsOnBorder(l))
                {
                    borderAverage.push(midPoint3D(l.start, l.end));
                }
            }
            
            borderAverage.push(clonePoint3D(p));
            
            barycenter = averageFacetPoint(borderAverage);
        }
        var newFacet = new Facet();
        newFacet.points.push(clonePoint3D(facet.edges[n2].edgePoint));
        newFacet.points.push(clonePoint3D(barycenter));
        newFacet.points.push(clonePoint3D(facet.edges[n1].edgePoint));
        newFacet.points.push(clonePoint3D(facet.averagePoint3D));                                     
        newSubdivFacets.push(newFacet);
        newFacet.cube = solidToSubdivide;
        nEdge++;                        
    }        
    drawThermometer(solidToSubdivide.facets.length, subdivSurfaceLoopCounter);
    subdivSurfaceLoopCounter++;
    if (subdivSurfaceLoopCounter >= solidToSubdivide.facets.length)
    {
        clearInterval(subdivTimerId);
        finishSubdivision(solidToSubdivide);
    }
    else
    {
        subdivTimerId = setTimeout(subdivisionSurfaceProcessFacet, 0);
    }
}
function finishSubdivision(parentShape)
{
    parentShape.nSubdivide++;
    parentShape.facets = newSubdivFacets;
    fuseFaster(parentShape);
    
    selectedFacets = [];
    selectedLines = [];
    selectedVertexes = [];
    sortFacets();
    
    setFacetCount(parentShape);
    isSubdividing = false;
    
    alertUser("");
    
    reloadSceneGL();
    
    draw();
}