Doors

Hva
Her fyller vi canvas-elementet med en 3-dimensjonal figur (WebGL). Vi bruker figuren som er nærmere beskrevet i modulen Android i materialet om WebGL.
Vi legger demoen i en iFrame for å forenkle koden. Du bør nok åpne den i et eget vindu for å få full oversiktt over koden:
doors4 https://borres.hiof.no/wep/js/ex/doors/doors4/doors4.html
Forandringen i basiskoden er følgende:
Vi må inkludere en del biblioteker for å få til 3D.
Vi må legge til shadere (fragment og vertex)
Vi må initiere 3D
Den komplette beskrivelsen av dette finnes i modulen Android
Den komplette HTML koden:
<!DOCTYPE HTML>
<title>What</title>
<head>
    <meta charset="UTF-8"/>
    
    <!-- speak -->
    <script src="../mespeak.js" type="text/javascript"> </script>
    <script src="../doors3/meSpeakStuff.js" type="text/javascript"> </script>
    
    <!-- webgl and android figure -->
    <script src="../sylvester.js" type="text/javascript"> </script>
    <script src="../glUtils.js" type="text/javascript"> </script>
    <script src="../androidscript.js" type="text/javascript"> </script>
    <script src="../shapes.js" type="text/javascript"> </script>
    
    <!-- doors -->
    <script src="doors4.js" type="text/javascript"> </script>
    
    <!--shaders -->
    <!-- Fragment shader program -->
    <script id="shader-fs" type="x-shader/x-fragment">
      //<![CDATA[
//fragf
#ifdef GL_ES
precision mediump float;
#endif
varying vec3 vTransformedNormal;
varying vec4 vPosition;
uniform vec3 uMaterialAmbientColor;
uniform vec3 uMaterialDiffuseColor;
uniform vec3 uMaterialSpecularColor;
uniform float uMaterialShininess;
uniform vec3 uMaterialEmissiveColor;
uniform vec3 uAmbientLightingColor;
uniform vec3 uPointLightingDiffuseColor;
uniform vec3 uPointLightingSpecularColor;
uniform vec3 uPointLightingLocation;
void main(void) {
    vec3 ambientLightWeighting = uAmbientLightingColor;
    vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);
    vec3 normal = normalize(vTransformedNormal);
    vec3 specularLightWeighting = vec3(0.0, 0.0, 0.0);
    vec3 eyeDirection = normalize(-vPosition.xyz);
    vec3 reflectionDirection = reflect(-lightDirection, normal);
    float specularLightBrightness = 
        pow(max(dot(reflectionDirection, eyeDirection), 0.0), uMaterialShininess);
    specularLightWeighting = uPointLightingSpecularColor * specularLightBrightness;
    float diffuseLightBrightness = max(dot(normal, lightDirection), 0.0);
    vec3 diffuseLightWeighting = uPointLightingDiffuseColor * diffuseLightBrightness;
    vec3 materialAmbientColor = uMaterialAmbientColor;
    vec3 materialDiffuseColor = uMaterialDiffuseColor;
    vec3 materialSpecularColor = uMaterialSpecularColor;
    vec3 materialEmissiveColor = uMaterialEmissiveColor;
    float alpha = 1.0;
    gl_FragColor = vec4(
        materialAmbientColor * ambientLightWeighting
        + materialDiffuseColor * diffuseLightWeighting
        + materialSpecularColor * specularLightWeighting
        + materialEmissiveColor,
        alpha
    );
}
//eoffragf
    //]]>    
    </script>
    
    <!-- Vertex shader program -->   
    <script id="shader-vs" type="x-shader/x-vertex">
      //<![CDATA[
//fragv
attribute mediump vec3 aVertexNormal; // or in
attribute mediump vec3 aVertexPosition;
uniform mediump mat4 uNormalMatrix;
uniform mediump mat4 uMVMatrix;
uniform mediump mat4 uPMatrix;
varying vec3 vTransformedNormal;
varying vec4 vPosition;
varying lowp vec4 vColor;
varying mediump vec3 vLighting;
void main(void) {
    vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
    gl_Position = uPMatrix * vPosition;
    vTransformedNormal=(uNormalMatrix * vec4(aVertexNormal, 1.0)).xyz;
}
//eoffragv
    //]]>
</script>
<!--eofshaders -->
<style>
.selected{border-style:solid}
.unselected{border-style:none}
</style>    
</head>
<body style="background-color:#FFFFC0">
    <div id="doors" onclick="startAnimation();">
        <!-- doorleft -->
        <img id="leftdoor"  src="../leftdoor.gif" style="width:100px;height:340px;
             position:absolute; left:100px;top:20px; z-index:20;"/>
        <!-- doorright -->
        <img id="rightdoor"  src="../rightdoor.gif"  style="width:107px;height:340px;
             position:absolute; left:200px;top:20px; z-index:20;"/>
    </div>
  
    <!-- the canvas  -->
    <div onclick="startAnimation();" 
         style="position:absolute;left:100px;top:110px;z-index:10">        
            <canvas id="glcanvas" width="200" height="240" 
               style="border-style:solid;border-width:1px" >
            </canvas>
    </div>
    <!-- sounds -->
    <audio id="open">
        <source src="../squeakOpen.mp3" type="audio/mp3"/>
        <source src="../squeakOpen.ogg" type="audio/ogg"/>
    </audio>
    
    <audio id="close">
        <source src="../squeakClose.mp3" type="audio/mp3"/>
        <source src="../squeakClose.ogg" type="audio/ogg"/>
    </audio>
    <!-- menu -->
    <script>
    // quick and dirty
    function update(id){
        document.getElementById("fr").className="unselected";
        document.getElementById("ge").className="unselected";
        document.getElementById("sv").className="unselected";
        document.getElementById("no").className="unselected";
        document.getElementById("en").className="unselected";
        document.getElementById(id).className="selected";
    }
    function updatesex(id){
        document.getElementById("male").className="unselected";
        document.getElementById("female").className="unselected";
        document.getElementById(id).className="selected";
    }
    </script>
    <img id="fr"  class="unselected" src="../fr.png" onclick="doFrench();update('fr')"/><br/>
    <img id="ge"  class="unselected" src="../ge.png" onclick="doGerman();update('ge')"/><br/>
    <img id="sv"  class="unselected" src="../sv.png" onclick="doSwedish();update('sv')"/><br/>
    <img id="no"  class="unselected" src="../no.png" onclick="doNorwegian();update('no')"/><br/>
    <img id="en"  class="unselected" src="../en.png" onclick="doEnglish();update('en')"/><br/><br/><br/>
    
    <img id="male"   class="unselected" src="../male.png" style="width:32px" 
         onclick="doMale();updatesex('male')"/><br/>
    <img id="female"   class="unselected" src="../female.png" style="width:32px"  
         onclick="doFeMale();updatesex('female')"/>
    <!-- starter -->
    <script>
        initDoors();
        // androidscript.js
        start();
        // set meny
        update('en');
        updatesex('male');
    </script>
    
    </body>
    
</html>