teapot.html

URL: https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/concepts/hiddenSurface/teapot.html
 
<html lang="en">
<head>

<script id="vertex-shader" type="x-shader/x-vertex" >
precision mediump float;

attribute vec4 attributePosition;
attribute float attributeBC;

uniform mat4 uniformTransform;
uniform mat4 uniformProject;

varying vec3 varyingBC;

void main() {

    gl_Position = uniformProject * uniformTransform *  attributePosition;
    if (attributeBC == 0.0) {
         varyingBC = vec3(1.0, 0.0, 0.0);
    } else if (attributeBC == 1.0) {
         varyingBC = vec3(0.0, 1.0, 0.0);
    } else {
         varyingBC = vec3(0.0, 0.0, 1.0);
    }
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

    precision mediump float;
    varying vec3 varyingBC;
    uniform vec4 uniformEdgeColor;

    // wireframe shader
    void main(){
       // front face
       if (gl_FrontFacing) {  
           if (any(lessThan(varyingBC, vec3(0.03)))) {
               gl_FragColor= uniformEdgeColor;
           } else {
               gl_FragColor= vec4(0.0, 0.0, 0.0, 1.0);
           }
       } else { 
           // back facing
           if (any(lessThan(varyingBC, vec3(0.05)))) {
               gl_FragColor= uniformEdgeColor;
           } else {
               //gl_FragColor = vec4(1.0, 0.0, 0.0, 0.05);
               discard;
           }
       }
    }
</script>

<script type="text/javascript" src="https://mirkwood.cs.edinboro.edu/~bennett/f360-19/Common/webgl-utils.js"></script>
<script type="text/javascript" src="https://mirkwood.cs.edinboro.edu/~bennett/f360-19/Common/initShaders.js"></script>
<script type="text/javascript" src="https://mirkwood.cs.edinboro.edu/~bennett/f360-19/Common/MV.js"></script>

<script type="text/javascript" src="https://mirkwood.cs.edinboro.edu/~bennett/f360-19/Models/teapot.js"></script>

<script type="text/javascript" src="GLCanvas.js"></script>
<script type="text/javascript" src="Widget.js"></script>
<script type="text/javascript" src="UI.js"></script>

</head>
<body>
<main>

<title>Things are Shaping Up</title>
<h1>Things are Shaping Up</h1>
<script>
    "use strict"
    var canvas = new Canvas(500, 500, Keypress)
    var object = new Widget(canvas.GL(), canvas.Program(), Teapot_Triangles)
    Reset()
    Redisplay()
</script>
<p>
X/x, Y/y, Z/z to rotate
<p>
F/f, B/b to turn on/off front/back face visibility.

</main>
</body>
</html>