API tools faq
paste
Advertisement
keithbugeja

index.html (fixed light distance, colour saturation)

keithbugeja
May 16th, 2016
261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset='utf-8'/>
  5.  
  6.     <!-- Vertex Shader script in GLSL -->
  7.      <script id="vertex-shader" type="x-shader/x-vertex">
  8.       attribute vec3 position;
  9.       attribute vec3 normal;
  10.       attribute vec3 color;
  11.       attribute vec2 texcoords;
  12.  
  13.       varying vec3 vColor;
  14.       varying vec3 vNormal;
  15.       varying vec3 vEye;
  16.       varying vec3 vLight;
  17.       varying vec3 vLightAxis;
  18.       varying vec3 vLightWorld;
  19.       varying vec2 vTexCoords;
  20.  
  21.       uniform mat4 viewMatrix;
  22.       uniform mat4 modelMatrix;
  23.       uniform mat4 projectionMatrix;
  24.  
  25.       struct LightVertexInfo {
  26.         vec3 position;
  27.         vec3 direction;
  28.         int type;
  29.       };
  30.  
  31.       uniform LightVertexInfo LightVertex[4];
  32.  
  33.      void main(void)
  34.       {
  35.         vec4 p = vec4(position, 1.0);
  36.         mat4 vm = viewMatrix * modelMatrix;
  37.         mat4 pvm = projectionMatrix * vm;
  38.  
  39.         // Light Type : DIRECTIONAL
  40.         if (LightVertex[0].type == 0)
  41.         {
  42.           vLight = -normalize((viewMatrix * vec4(LightVertex[0].direction, 0)).xyz);
  43.         }
  44.         // Light Type : POINT && SPOT
  45.        else if (LightVertex[0].type == 1 || LightVertex[0].type == 2)
  46.        {
  47.          vec4 mp = modelMatrix * p;
  48.           vec4 lt = vec4(LightVertex[0].position, 1.0) - mp;
  49.           vLight = normalize(viewMatrix * lt).xyz;
  50.           vLightAxis = normalize(viewMatrix * vec4(LightVertex[0].direction, 0.0)).xyz;
  51.           vLightWorld = lt.xyz;
  52.         }
  53.  
  54.         // Surface normal (We're assuming no scaling)
  55.         vNormal = normalize((vm * vec4(normal, 0.0)).xyz);
  56.  
  57.         // Eye vector
  58.         vEye = -normalize(vm * p).xyz;
  59.        
  60.         // Texture coordinates
  61.         vTexCoords = texcoords;
  62.  
  63.         // Vertex colour
  64.         vColor = color;
  65.  
  66.         // Projected vertex position
  67.         gl_Position = pvm * p;
  68.       }
  69.     </script>
  70.  
  71.     <!-- Fragment Shader script in GLSL -->
  72.     <script id="fragment-shader" type="x-shader/x-vertex">
  73.         precision mediump float;
  74.  
  75.       // Passed from vertex shader
  76.       varying vec3 vColor;
  77.       varying vec3 vNormal;
  78.       varying vec3 vEye;
  79.       varying vec3 vLight;
  80.       varying vec3 vLightAxis;
  81.       varying vec3 vLightWorld;
  82.       varying vec2 vTexCoords;
  83.  
  84.       // Material information
  85.       uniform float uShininess;
  86.       uniform vec3 uAmbient;
  87.       uniform vec3 uDiffuse;
  88.       uniform vec3 uSpecular;
  89.       uniform sampler2D uTexture_0;
  90.  
  91.       // Light information structure
  92.       struct LightFragmentInfo {
  93.         int type;
  94.         int attenuation;
  95.  
  96.         float alpha, beta;
  97.  
  98.         vec3 ambient;
  99.         vec3 diffuse;
  100.         vec3 specular;
  101.       };
  102.  
  103.       uniform LightFragmentInfo LightFragment[4];
  104.  
  105.       float invPi = 0.31830988618;
  106.       float inv2Pi = 0.15915494309;
  107.  
  108.           void main(void)
  109.           {
  110.         vec3 vnLight = normalize(vLight);
  111.         float vLightDistance = length(vLightWorld);
  112.  
  113.         // Compute attenuation
  114.         float attenuation = 1.0;
  115.  
  116.         if (LightFragment[0].type == 1 || LightFragment[0].type == 2) {
  117.           if (LightFragment[0].attenuation == 1) {
  118.             attenuation = 1.0 / vLightDistance;
  119.           } else if (LightFragment[0].attenuation == 2) {
  120.             attenuation = 1.0 / (vLightDistance * vLightDistance);
  121.           }
  122.         }
  123.  
  124.         if (LightFragment[0].type == 2)
  125.         {
  126.           float coneAngle = dot(vnLight, -normalize(vLightAxis));
  127.           coneAngle = max(LightFragment[0].beta, min(LightFragment[0].alpha, coneAngle));
  128.           coneAngle = (coneAngle - LightFragment[0].beta) / (LightFragment[0].alpha - LightFragment[0].beta);
  129.           attenuation *= coneAngle;
  130.         }
  131.      
  132.         // Compute reflection vector
  133.         vec3 vReflect = reflect(vnLight, vNormal);
  134.  
  135.         // Reflectivity of components
  136.         vec3 ambient = LightFragment[0].ambient * uAmbient;
  137.         vec3 diffuse = LightFragment[0].diffuse * uDiffuse;
  138.         vec3 specular = LightFragment[0].specular * uSpecular;
  139.         vec3 rho = texture2D(uTexture_0, vTexCoords.xy).xyz;
  140.        
  141.         // Compute phong specular and lambert diffuse
  142.         float s = pow(max(dot(vReflect, -vEye), 0.0), uShininess) * (uShininess + 2.0) * inv2Pi;
  143.         float d = max(dot(vNormal, vnLight), 0.0) * invPi;
  144.  
  145.         // KB - Color blending has been changed from modulative to additive
  146.         //    - Result is saturated to prevent values outside valid range
  147.         //gl_FragColor = vec4(((ambient + d * diffuse + s * specular) * rho * vColor) * attenuation, 1.0);
  148.         gl_FragColor = vec4(
  149.           clamp(vColor + ((ambient + diffuse * d + specular * s) * rho * attenuation), vec3(0,0,0), vec3(1,1,1)),
  150.           1.0
  151.         );
  152.       }
  153.     </script>
  154.  
  155.     <script type="text/javascript" src="textures.js"></script>
  156.     <script type="text/javascript" src="matrix.js"></script>
  157.     <script type="text/javascript" src="light.js"></script>
  158.     <script type="text/javascript" src="material.js"></script>
  159.     <script type="text/javascript" src="model.js"></script>
  160.     <script type="text/javascript" src="scene.js"></script>
  161.     <script type="text/javascript" src="script.js"></script>
  162.   </head>
  163.   <body style='margin:0px' onload='main()'>
  164.     <canvas id='canvas-cg-lab'
  165.            style='position: absolute; background-color: black;'>
  166.       </canvas>
  167.   </body>
  168. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!