<isol>

!!! Listing 1


   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3   <head>
   4     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   5     <title>WebGL-Tutorial_Teil2_Listing1</title>
   6     <script type="text/javascript" src="glMatrix.js"></script> 
   7     <script type="text/javascript" src="webgl-utils.js"></script>
   8     <script type="text/javascript">
   9       WebGLObjekt = function() {
  10         this.programObject = 0; 
  11         this.gl = null;         
  12         this.vertexAttribLoc = null; 
  13         this.perspektivMatrixUniformLoc = null;
  14         this.modelViewMatrixUniformLoc = null;
  15         this.texturKoordinatenAttribLoc = null;
  16         this.alpha = 45.0;           
  17       }
  18     
  19       WebGLObjekt.prototype.aktualisiereAttribUniformLocations = function()  {
  20         this.perspektivMatrixUniformLoc = this.gl.getUniformLocation(this.programObject, "um4PerspektivMatrix");
  21         this.vertexAttribLoc = this.gl.getAttribLocation( this.programObject, "av4Position"); ;
  22         this.modelViewMatrixUniformLoc = this.gl.getUniformLocation(this.programObject, "um4ModelViewMatrix");
  23         this.texturKoordinatenAttribLoc = this.gl.getAttribLocation(this.programObject, "av2VertexTextureCoord");
  24         return true;
  25       }
  26     
  27 
  28       WebGLObjekt.prototype.draw = function()  {
  29         var gl = this.gl;
  30         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  31         gl.clearColor ( 0.0, 0.0, 0.2, 1.0 );  
  32         gl.clear ( gl.COLOR_BUFFER_BIT );      
  33   
  34    
  35    
  36         var mvMatrix = mat4.create(); 
  37         mat4.identity(mvMatrix);
  38         mat4.translate(mvMatrix,[0,0,-3]);
  39         mat4.rotate(mvMatrix, this.alpha*Math.PI/180,[0,1,0]);
  40                     
  41         gl.uniformMatrix4fv(this.modelViewMatrixUniformLoc, false, mvMatrix); 
  42         gl.enableVertexAttribArray(this.texturKoordinatenAttribLoc);
  43         gl.enableVertexAttribArray(this.vertexAttribLoc);
  44         gl.drawArrays ( gl.TRIANGLES, 0, 6 ); 
  45             
  46         
  47         mat4.identity(mvMatrix);
  48         mat4.translate(mvMatrix,[1.5,0,-5]);
  49         mat4.rotate(mvMatrix, this.alpha*Math.PI/180,[0,1,0]);
  50                    
  51         gl.uniformMatrix4fv(this.modelViewMatrixUniformLoc, false, mvMatrix);
  52         gl.enableVertexAttribArray(this.vertexAttribLoc);
  53         gl.enableVertexAttribArray(this.texturKoordinatenAttribLoc);
  54         gl.drawArrays ( gl.TRIANGLES, 0, 6 );
  55       }
  56         
  57       
  58       WebGLObjekt.prototype.animationStep = function() {
  59         this.alpha +=3; 
  60       }
  61         
  62       
  63       WebGLObjekt.prototype.init = function(canvas,vertexShaderString,fragmentShaderString, statusAusgabeDOM_ID) {
  64         this.gl = WebGLUtils.setupWebGL(canvas);
  65         if(this.gl == null){
  66           alert ("kein WebGL-Kontext gefunden. ");
  67         }
  68       
  69         this.programObject = this.gl.createProgram();
  70         vShader = this.gl.createShader(this.gl.VERTEX_SHADER);   
  71         this.gl.shaderSource(vShader,vertexShaderString);        
  72         this.gl.compileShader(vShader);                          
  73         
  74         
  75         var compilerErfolg = this.gl.getShaderParameter ( vShader, this.gl.COMPILE_STATUS );
  76         if ( !compilerErfolg )  {
  77           alert( "Fehler beim erstellen des VertexShaders : \n\n" + this.gl.getShaderInfoLog ( vShader ) );
  78           this.gl.deleteShader ( vShader );
  79           return false;
  80         } 
  81         else {
  82           this.gl.attachShader(this.programObject ,vShader);  
  83         }  
  84         
  85         fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);  
  86         this.gl.shaderSource(fShader,fragmentShaderString);       
  87         this.gl.compileShader(fShader);                           
  88         var compilerErfolg = this.gl.getShaderParameter ( fShader, this.gl.COMPILE_STATUS );
  89         if ( !compilerErfolg ) {
  90           alert("Fehler beim erstellen des FragmentShaders : \n\n" + this.gl.getShaderInfoLog ( fShader ) );
  91           this.gl.deleteShader ( fShader );
  92           return false;
  93         } 
  94         else {
  95           this.gl.attachShader(this.programObject ,fShader);   
  96         }    
  97       
  98         this.gl.linkProgram(this.programObject);   
  99 
 100         linkerErfolg = this.gl.getProgramParameter (this.programObject , this.gl.LINK_STATUS );
 101         if ( !linkerErfolg ) {
 102           alert ( "Fehler beim Linken des ShaderPrograms : \n\n" + this.gl.getProgramInfoLog(this.programObject) );
 103           this.gl.deleteProgram ( this.programObject  );
 104           return false;
 105         }
 106         this.gl.useProgram(this.programObject ); 
 107                                                  
 108         return this.gl;
 109       }
 110    
 111       var meinWebGLObjekt;  
 112       function meinWebGLStart()   {
 113         var meineCanvas = document.getElementById("meineWebGLCanvas");
 114         var gl;
 115        
 116         var vShaderQuellcode = 'attribute vec4 av4Position; \n\
 117                               attribute vec2 av2VertexTextureCoord; \n\
 118                               uniform mat4 um4PerspektivMatrix; \n\
 119                               uniform mat4 um4ModelViewMatrix; \n\
 120                               varying vec2 vTextureCoord; \n\
 121                               void main() \n\
 122                               { \n\
 123                                  gl_Position = um4PerspektivMatrix * um4ModelViewMatrix * av4Position; \n\
 124                                  vTextureCoord = av2VertexTextureCoord; \n\
 125                               } \n' ;
 126         
 127        
 128         var fShaderQuellcode = 'precision mediump float;\n\
 129                               varying vec2 vTextureCoord; \n\
 130                               uniform sampler2D uSampler; \n\
 131                               void main()  \n\
 132                               {     \n\
 133                                   gl_FragColor = texture2D(uSampler, vTextureCoord); \n\
 134                               } \n';                      
 135       
 136         meinWebGLObjekt = new WebGLObjekt();
 137         meinWebGLObjekt.init(meineCanvas,vShaderQuellcode,fShaderQuellcode,"webGLBrowserStatus");
 138         gl = meinWebGLObjekt.gl;
 139         meinWebGLObjekt.aktualisiereAttribUniformLocations();
 140        
 141        
 142        
 143        
 144         var sichtfeldOeffnungswinkel = 45* Math.PI / 180.0; 
 145         var sfOew = sichtfeldOeffnungswinkel; 
 146         var aspektVerhaeltnis = meineCanvas.height / meineCanvas.width;
 147         var zNah = 0.1;
 148         var zFern = 100.0;
 149         var meinePerspektivMatrix = new Float32Array([Math.tan(sfOew)/aspektVerhaeltnis, 0, 0,0,
 150                                                       0,  1/Math.tan(sfOew),  0, 0,
 151                                                       0, 0,  (zNah+zFern)/(zNah-zFern), -1, 
 152                                                       0,0,   2*zNah*zFern/(zNah-zFern), 0]);
 153         gl.uniformMatrix4fv(meinWebGLObjekt.perspektivMatrixUniformLoc, false, meinePerspektivMatrix);
 154         gl.depthFunc(gl.LESS);  
 155         gl.enable(gl.DEPTH_TEST); 
 156           
 157         
 158         var vVertices = new Float32Array([-1.0, -1.0, 0.0,
 159                                            1.0, -1.0, 0.0,
 160                                           -1.0, 1.0, 0.0,
 161                                            1.0, -1.0, 0.0,
 162                                            1.0, 1.0, 0.0,
 163                                            -1.0, 1.0, 0.0]);
 164                                            
 165         vertexPosBufferObjekt = gl.createBuffer(); 
 166         gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBufferObjekt); 
 167         gl.bufferData(gl.ARRAY_BUFFER, vVertices, gl.STATIC_DRAW);
 168         gl.vertexAttribPointer(meinWebGLObjekt.vertexAttribLoc, 3, gl.FLOAT, false, 0, 0);
 169         
 170
 171         meineTexturgrafik = new Image();
 172         meineTexturgrafik.src = "ix.jpg";
 173         meineWebGLTextur = gl.createTexture();
 174         meineTexturgrafik.onload = function() {
 175           gl.bindTexture(gl.TEXTURE_2D, meineWebGLTextur);
 176           gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, meineTexturgrafik);
 177           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 178           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 179         }
 180         
 181         var texturKoordinaten = new Float32Array([
 182                                       //LINKS unten
 183                                       0.0, 1.0,
 184                                       1.0, 1.0, 
 185                                       0.0, 0.0,
 186                                       //rechts oben
 187                                       1.0, 1.0,
 188                                       1.0, 0.0, 
 189                                       0.0, 0.0
 190                                     ]);
 191         texturKoordinatenBufferObjekt = gl.createBuffer();
 192         gl.bindBuffer(gl.ARRAY_BUFFER,texturKoordinatenBufferObjekt);
 193         gl.bufferData(gl.ARRAY_BUFFER, texturKoordinaten, gl.STATIC_DRAW);
 194         gl.vertexAttribPointer(meinWebGLObjekt.texturKoordinatenAttribLoc, 2, gl.FLOAT, false, 0,0);
 195 
 196         
 197         setInterval("meinWebGLObjekt.animationStep()",40); 
 198         var renderLoop = function() {
 199           WebGLUtils.requestAnimationFrame(meineCanvas, renderLoop);
 200           meinWebGLObjekt.draw();
 201         };
 202         renderLoop();
 203       }
 204     </script>
 205   </head>
 206   <body onload="meinWebGLStart();">
 207     <noscript><h2>JavaScript ist in Ihrem Browser deaktiviert oder wird nicht unterst&uuml;tzt. 
 208                   Ohne JavaScript kann diese Seite nicht korrekt dargestellt werden.</h2>   </noscript>
 209     <center> <p id="webGLBrowserStatus"></p></center>
 210     <canvas id="meineWebGLCanvas" width="500" height="500"></canvas> 
 211     <br />
 212   </body>
 213 </html> 
