gnopaste

gnopaste database reset @ 19/03/2013

Name
loop
Scriptlanguage
Plain Text
Tabwidth
4
Date
03/29/2013 09:59:38 pm
IP
::ffff:2.226.189.243

webgl cube

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="description" content="" />
  6.         <meta name="author" content="loop" />
  7.  
  8.         <title>Cubo</title>
  9.  
  10.         <style type="text/css">
  11.             canvas {border: 2px dotted blue;}
  12.         </style>
  13.  
  14.         <!-- JavaScript Libraries //-->
  15.         <script type='text/javascript' src='js/utils.js'></script>
  16.         <script type='text/javascript' src='js/gl-matrix-min.js'></script>
  17.  
  18.         <!-- Vertex Shader //-->
  19.         <script id="shader-vs" type="x-shader/x-vertex">
  20.  
  21.             attribute vec3 aVertexPosition;
  22.             attribute vec2 aVertexTextureCoords;
  23.             attribute vec3 aNormal;
  24.  
  25.             uniform mat4 uMVMatrix;
  26.             uniform mat4 uNMatrix;
  27.             uniform mat4 uPMatrix;
  28.            
  29.             uniform vec3 uLightPosition;
  30.            
  31.             varying vec3 vNormal;
  32.             varying vec3 vEyeVec;
  33.             varying vec3 vLightRay;
  34.  
  35.             varying vec2 vTexCoords;
  36.  
  37.             void main(void) {
  38.             //Transformed vertex position
  39.             vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
  40.  
  41.             //Transformed normal position
  42.             vNormal = vec3(uNMatrix * vec4(aNormal, 1.0));
  43.  
  44.             //Vector Eye
  45.             vEyeVec = -vec3(vertex.xyz);
  46.  
  47.            
  48.             vec3 light= uLightPosition;
  49.             vLightRay= light - vec3(vertex.xyz);
  50.  
  51.             //Final vertex position
  52.             gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  53.             vTexCoords=aVertexTextureCoords;
  54.             }
  55.  
  56.  
  57.  
  58.         </script>
  59.  
  60.         <!-- Fragment Shader //-->
  61.         <script id="shader-fs" type="x-shader/x-fragment"> 
  62.  
  63.             #ifdef GL_ES
  64.             precision highp float;
  65.             #endif
  66.  
  67.  
  68.             uniform sampler2D uSampler;    // texture sampler
  69.  
  70.  
  71.             uniform float uMaterialShininess;      //shininness
  72.             uniform vec3 uLightPosition;    //light position
  73.             uniform vec4 uLightAmbient;    //light ambient property
  74.             uniform vec4 uLightDiffuse;    //light diffuse prooperty
  75.             uniform vec4 uLightSpecular;    //light specular property
  76.  
  77.             uniform vec4 uMaterialAmbient;  //object ambient property
  78.             uniform vec4 uMaterialDiffuse;  //object diffuse property
  79.             uniform vec4 uMaterialSpecular;  //object specular property
  80.  
  81.  
  82.             //uniform vec3 uLightDirection;//light direction
  83.             uniform float uLightCutOffPower;    //light exponential cut-off
  84.            
  85.            
  86.             uniform mat4 uMVMatrix;
  87.  
  88.             varying vec3 vNormal;
  89.             varying vec3 vEyeVec;
  90.             varying vec3 vLightRay;
  91.             varying vec2 vTexCoords;
  92.             void main(){
  93.             vec3 N = normalize(vNormal);
  94.  
  95.             // Initialize fragment color with the ambient term
  96.             vec4 finalColor = uLightAmbient * uMaterialAmbient;
  97.            
  98.            
  99.             //Transformed light position
  100.  
  101.             vec3 L = normalize(vLightRay);
  102.  
  103.             vec3 D = normalize(uLightDirection);
  104.                        
  105.                         float cutoff = pow(dot(-L,D),uLightCutOffPower);
  106.  
  107.                         //Lambert's cosine law
  108.                         float lambertTerm = dot(N,L);
  109.  
  110.                         if(lambertTerm > 0.0) //only if lambertTerm is positive
  111.                         {
  112.                             finalColor += uLightDiffuse * uMaterialDiffuse * lambertTerm; //add diffuse term
  113.                                                                                          
  114.                             vec3 E = normalize(vEyeVec);
  115.                             vec3 R = reflect(-L, N);
  116.                             float specular = pow( max(dot(R, E), 0.0), uMaterialShininess);
  117.  
  118.                             finalColor += uLightSpecular * uMaterialSpecular * specular; //add specular term
  119.                             finalColor.rgb*=cutoff;
  120.                         }
  121.                     }
  122.  
  123.                     finalColor.a = 1.0;
  124.  
  125.                     //scaling the texture color with lighting
  126.                     gl_FragColor = finalColor*texture2D(uSampler,vTexCoords);
  127.        
  128.  
  129.         </script>
  130.  
  131.  
  132.  
  133.  
  134.         <!-- WebGL Application //-->
  135.         <script id="code-js" type="text/javascript">
  136.                
  137.             var gl = null; // WebGL context
  138.             var prg = null; // The program (shaders)
  139.             var c_width = 0; // Variable to store the width of the canvas
  140.             var c_height = 0; // Variable to store the height of the canvas
  141.             var clearColor = [0.2,0.6,0.5,1.0];
  142.                
  143.             // Viewing parameters
  144.             var eye=[10,10,10];
  145.             var ref=[0,0,0];  //direzione di osservazione
  146.             var up=[0,1,0];  //vettore up, continuo a non capire in cosa consiste
  147.              
  148.              
  149.              
  150.              
  151.             /* Here we use glmatrix library */
  152.  
  153.             var mvMatrix = mat4.create(); // The Model-View matrix
  154.                
  155.             var vMatrix =mat4.create()  // camera matrix
  156.             var pMatrix = mat4.create();  // The projection matrix
  157.             var nMatrix =mat4.create(); // Normal matrix
  158.                
  159.          
  160.             var cubeVertexBuffer=null; // vertex buffer object
  161.             var cubeIndexBuffer=null; // index buffer object
  162.             var cubeNormalBuffer=null; // normal buffer object
  163.             var textureBuffer=null; // buffer coordinate texture
  164.                
  165.                
  166.             var vertices=[]; // JavaScript Array for vertices
  167.             var indices=[];  // JavaScript Array for indices
  168.             var texturecoords=[] // array coordinate texture
  169.             var texture=null; //variabile per il caricamento della texture
  170.                
  171.              
  172.             var normals=[];
  173.            
  174.             var angle=0.0;
  175.             var angle2=0.0;
  176.             var angle3=0.0;
  177.             var angle4=0.0;
  178.                
  179.             window.onkeydown= checkKey;  // intercetta tasto
  180.            
  181.                
  182.             function checkKey(ev){
  183.                 //alert(ev.keyCode);
  184.              
  185.                 switch(ev.keyCode){
  186.                     case 87:{  // w  rotazione camera in alto
  187.                             ref[1]++;
  188.                              
  189.                             break;
  190.                         }
  191.                      
  192.                     case 88:{ //x  rotazione camera in basso
  193.                             ref[1]--;
  194.                              
  195.                             break;
  196.                         }
  197.                      
  198.                      
  199.                     case 65:{ //a rotazione a sinistra
  200.                             ref[0]--;
  201.                              
  202.                             break;
  203.                         }
  204.                      
  205.                     case 68:{ //d rotazione a destra
  206.                             ref[0]++;
  207.                              
  208.                             break;
  209.                         }
  210.                      
  211.                     case 81:{ //q
  212.                            
  213.                             //Zoom out
  214.                             eye[1]++;
  215.                              
  216.                             break;
  217.                         }
  218.                      
  219.                     case 69:{ //e
  220.                             //
  221.                             //Zoom in
  222.                             eye[1]--;
  223.                              
  224.                             break;
  225.                         }
  226.                      
  227.                     case 90:{ //z
  228.                             //Pan a sinistra
  229.                             up[0]++;
  230.                             break;
  231.                         }
  232.                      
  233.                     case 67:{ //c
  234.                             ////Pan a destra
  235.                             up[2]++;
  236.                             break;
  237.                         }
  238.                     case 86:{//v
  239.                             //Rotazione su asse y nel verso positivo; Rotazione verso dx
  240.                             //angle ovviamente si trova in drawScene()
  241.                             angle+=30;
  242.                             break;
  243.                         }
  244.                     case 66:{//b
  245.                             //Rotazione su asse y nel verso negativo; Rotazione verso sx
  246.                             //angle ovviamente si trova in drawScene()
  247.                             angle2+=30;
  248.                             break;
  249.                         }
  250.                     case 78:{//n
  251.                             //Rotazione su asse x nel verso positivo; Rotazione verso alto
  252.                             //angle ovviamente si trova in drawScene()
  253.                             angle3+=30;
  254.                             break;
  255.                         }
  256.                     case 77:{//m
  257.                             //Rotazione su asse x nel verso positivo; Rotazione verso basso
  258.                             //angle ovviamente si trova in drawScene()
  259.                             angle4+=30;
  260.                             break;
  261.                         }
  262.                 }
  263.                  
  264.             }
  265.          
  266.                    
  267.             function initBuffers(){         
  268.                
  269.        
  270.                 vertices=[
  271.        
  272.                     //Faccia laterale sx
  273.                     -0.5,0.5,-0.5,
  274.                     -0.5,-0.5,-0.5,
  275.                     -0.5, -0.5,0.5,
  276.                     -0.5,0.5,0.5,
  277.                        
  278.                     //Faccia di fronte
  279.                     -0.5,0.5,0.5,
  280.                     -0.5,-0.5,0.5,
  281.                     0.5,-0.5,0.5,
  282.                     0.5,0.5,0.5,
  283.                    
  284.                     //Faccia laterale dx
  285.                     0.5,0.5,0.5,
  286.                     0.5, -0.5,0.5,
  287.                     0.5,-0.5,-0.5,
  288.                     0.5,0.5,-0.5,
  289.                    
  290.                     //faccia retro
  291.                     0.5,0.5,-0.5,
  292.                     0.5,-0.5,-0.5,
  293.                     -0.5,-0.5,-0.5,
  294.                     -0.5,0.5,-0.5,
  295.            
  296.                     //Faccia superiore
  297.                     -0.5,0.5,-0.5,
  298.                     -0.5,0.5,0.5,
  299.                     0.5,0.5,0.5,
  300.                     0.5,0.5,-0.5,
  301.                        
  302.                     //Faccia inferiore
  303.                     -0.5,-0.5,0.5,
  304.                     0.5,-0.5,0.5,
  305.                     0.5,-0.5,-0.5,
  306.                     -0.5,-0.5,-0.5
  307.                    
  308.                 ];
  309.                  
  310.      
  311.      
  312.                 indices=[
  313.                    
  314.                   0,1,2,    0,2,3,
  315.                   4,5,6,    4,6,7,
  316.                   8,9,10,  8,10,11,
  317.                   12,13,14, 12,14,15,
  318.                   16,17,18, 16,18,19,
  319.                   20,21,22, 20,22,23
  320.                  
  321.                 ];
  322.                
  323.                
  324.                 normals = utils.calculateNormals(vertices, indices); //normali
  325.    
  326.                 texturecoords= [
  327.                     0.0, 0.0,
  328.                     1.0, 0.0,
  329.                     1.0, 1.0,
  330.                     0.0, 1.0,
  331.  
  332.  
  333.                     1.0, 0.0,
  334.                     1.0, 1.0,
  335.                     0.0, 1.0,
  336.                     0.0, 0.0,
  337.  
  338.  
  339.                     0.0, 1.0,
  340.                     0.0, 0.0,
  341.                     1.0, 0.0,
  342.                     1.0, 1.0,
  343.  
  344.                     1.0, 1.0,
  345.                     0.0, 1.0,
  346.                     0.0, 0.0,
  347.                     1.0, 0.0,
  348.  
  349.  
  350.                     1.0, 0.0,
  351.                     1.0, 1.0,
  352.                     0.0, 1.0,
  353.                     0.0, 0.0,
  354.  
  355.  
  356.                     0.0, 0.0,
  357.                     1.0, 0.0,
  358.                     1.0, 1.0,
  359.                     0.0, 1.0
  360.        
  361.                 ];
  362.                
  363.                 cubeVertexBuffer=gl.createBuffer();
  364.                 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
  365.                 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  366.  
  367.                 cubeNormalBuffer = gl.createBuffer();
  368.                 gl.bindBuffer(gl.ARRAY_BUFFER, cubeNormalBuffer);
  369.                 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
  370.  
  371.                 cubeIndexBuffer = gl.createBuffer();
  372.                 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
  373.                 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
  374.                    
  375.                 textureBuffer=gl.createBuffer();
  376.                 gl.bindBuffer(gl.ARRAY_BUFFER,textureBuffer);
  377.                 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texturecoords), gl.STATIC_DRAW);
  378.                    
  379.                 gl.bindBuffer(gl.ARRAY_BUFFER, null);
  380.                 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
  381.                    
  382.                
  383.             }
  384.                
  385.              
  386.                
  387.             function drawScene() {
  388.                 gl.clearColor(clearColor[1],clearColor[2],clearColor[1],clearColor[3]);
  389.                 gl.clearDepth(1.0);
  390.                 gl.enable(gl.DEPTH_TEST);
  391.                 gl.depthFunc(gl.LEQUAL);
  392.                 gl.viewport(0, 0, c_width, c_height);
  393.                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  394.  
  395.                 mat4.perspective(45, c_width / c_height, 0.1, 10000.0, pMatrix);
  396.            
  397.                 mat4.identity(vMatrix);
  398.                 mat4.lookAt(eye,ref,up,vMatrix);
  399.                 mat4.identity(mvMatrix);
  400.                 mat4.multiply(vMatrix,mvMatrix,mvMatrix);
  401.                    
  402.                 mat4.set(mvMatrix,nMatrix);
  403.                 mat4.inverse(nMatrix);
  404.                 mat4.transpose(nMatrix);
  405.  
  406.                 gl.uniformMatrix4fv(prg.uMVMatrix, false, mvMatrix);
  407.                 gl.uniformMatrix4fv(prg.uPMatrix, false, pMatrix);
  408.                 gl.uniformMatrix4fv(prg.uNMatrix,false,nMatrix);
  409.  
  410.  
  411.                 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
  412.                 gl.vertexAttribPointer(prg.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
  413.                 gl.enableVertexAttribArray(prg.aVertexPosition);
  414.                    
  415.                 gl.bindBuffer(gl.ARRAY_BUFFER, cubeNormalBuffer);
  416.                 gl.vertexAttribPointer(prg.aNormal, 3, gl.FLOAT, false, 0,0);
  417.                 gl.enableVertexAttribArray(prg.aNormal);
  418.                    
  419.                    
  420.                 //texture
  421.                 gl.enableVertexAttribArray(prg.aVertexTextureCoords);
  422.                 gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
  423.                 gl.vertexAttribPointer(prg.aVertexTextureCoords, 2, gl.FLOAT, false, 0, 0);
  424.                 gl.activeTexture(gl.TEXTURE0);
  425.                 gl.bindTexture(gl.TEXTURE_2D, texture);
  426.                 gl.uniform1i(prg.uSampler, 0);
  427.                    
  428.                    
  429.                 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
  430.                 gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
  431.  
  432.  
  433.                 gl.bindBuffer(gl.ARRAY_BUFFER, null);
  434.                 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
  435.          
  436.             }
  437.                
  438.                
  439.                
  440.            
  441.                
  442.             function renderLoop() {
  443.                 requestAnimFrame(renderLoop);
  444.                 drawScene();
  445.                  
  446.             }
  447.                
  448.                
  449.             function initLights(){
  450.              
  451.                    
  452.                 gl.uniform3fv(prg.uLightPosition,  [10.0, 10.0, -10.0]);
  453.                 gl.uniform4fv(prg.uLightAmbient, [0.2,0.2,0.2,1.0]);
  454.                 gl.uniform4fv(prg.uLightDiffuse,  [0.7,0.3,0.5,1.0]);
  455.                 gl.uniform4fv(prg.uLightSpecular,  [0.3,0.7,0.4,1.0]);
  456.                 //gl.uniform4fv(prg.uLightDirection, [2.0, -2.0, -2.0, 1.0, -3.0, -2.0, -2.0, 1.0]);   
  457.                    
  458.                 gl.uniform2fv(prg.uLightCutOffPower, [100, 100]);   
  459.                    
  460.                 //inizio materiale
  461.                 gl.uniform4fv(prg.uMaterialAmbient, [0.2,0.2,0.2,1.0]);
  462.                 gl.uniform4fv(prg.uMaterialDiffuse, [0.5,0.5,0.5,1.0]);
  463.                 gl.uniform4fv(prg.uMaterialSpecular,[0.8,0.8,0.8,1.0]);
  464.                 gl.uniform1f(prg.uMaterialShininess, 120.0);
  465.                 // fine materiale
  466.                    
  467.          
  468.             }
  469.            
  470.                
  471.                
  472.             function initTexture(){
  473.                 texture=gl.createTexture();
  474.                    
  475.                 var image=new Image();
  476.                                        
  477.                 image.onload=function(){
  478.                      
  479.                     gl.bindTexture(gl.TEXTURE_2D, texture);
  480.                     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  481.                     //gl.generateMipmap(gl.TEXTURE_2D);
  482.                     //gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  483.                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  484.                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
  485.                     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
  486.        
  487.                     gl.bindTexture(gl.TEXTURE_2D, null);
  488.                        
  489.                    
  490.                      
  491.                        
  492.                 }
  493.                    
  494.                 image.src="pattern2.jpg";
  495.                    
  496.                    
  497.             }
  498.                
  499.                
  500.            
  501.             function initProgram() {
  502.                    
  503.                 var fragmentShader = utils.getShader(gl, "shader-fs");
  504.                 var vertexShader = utils.getShader(gl, "shader-vs");
  505.  
  506.                 prg = gl.createProgram();
  507.                 gl.attachShader(prg, vertexShader);
  508.                 gl.attachShader(prg, fragmentShader);
  509.                 gl.linkProgram(prg);
  510.  
  511.                 if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
  512.                     alert("Could not initialise shaders");
  513.                 }
  514.  
  515.                 gl.useProgram(prg);
  516.  
  517.                    
  518.  
  519.                 prg.aVertexPosition = gl.getAttribLocation(prg, "aVertexPosition");
  520.                 prg.aVertexTextureCoords = gl.getAttribLocation(prg, "aVertexTextureCoords");
  521.                 prg.aNormal = gl.getAttribLocation(prg,"aNormal");
  522.                
  523.                                  
  524.                 prg.uMVMatrix = gl.getUniformLocation(prg, "uMVMatrix");
  525.                 prg.uNMatrix = gl.getUniformLocation(prg,"uNMatrix");
  526.                 prg.uPMatrix = gl.getUniformLocation(prg, "uPMatrix");
  527.                    
  528.                 prg.uSampler = gl.getUniformLocation(prg, "uSampler");
  529.                    
  530.                    
  531.                    
  532.                 prg.uMaterialAmbient = gl.getUniformLocation(prg, "uMaterialAmbient");
  533.                 prg.uMaterialDiffuse = gl.getUniformLocation(prg, "uMaterialDiffuse");
  534.                 prg.uMaterialSpecular = gl.getUniformLocation(prg, "uMaterialSpecular");
  535.  
  536.                 prg.uMaterialShininess = gl.getUniformLocation(prg, "uMaterialShininess");
  537.  
  538.                 prg.uLightAmbient = gl.getUniformLocation(prg, "uLightAmbient");
  539.                 prg.uLightDiffuse = gl.getUniformLocation(prg, "uLightDiffuse");
  540.                 prg.uLightSpecular  = gl.getUniformLocation(prg, "uLightSpecular");
  541.                 prg.uLightCutOffPower = gl.getUniformLocation(prg, "uLightCutOffPower");
  542.                 //prg.uLightDirection = gl.getUniformLocation(prg,"uLightDirection");
  543.                 prg.uLightPosition = gl.getUniformLocation(prg, "uLightPosition");
  544.  
  545.              
  546.             }
  547.                
  548.          
  549.                
  550.             function runWebGLApp() {
  551.                 //Obtains a WebGL context
  552.                 gl = utils.getGLContext('canvas-element-id');
  553.                  
  554.                  
  555.                 //Initializes the program (shaders)
  556.                  
  557.                 initProgram();
  558.                  
  559.                 initBuffers();
  560.                  
  561.                 initLights();
  562.                 initTexture();
  563.                    
  564.                 //Renders the scene!
  565.                 renderLoop();
  566.             } 
  567.                      
  568.                    
  569.                
  570.                
  571.         </script>
  572.     </head>
  573.     <body onLoad="runWebGLApp()">
  574.         <canvas id="canvas-element-id" width="800" height="600">
  575.             Your browser does not support the HTML5 canvas element.
  576.         </canvas>
  577.         <footer>
  578.             <p>
  579.                
  580.             </p>
  581.         </footer>
  582.     </body>
  583. </html>
  584.  
submitter » gnopaster | imprint « imprint     
» Terms of use «