1. Diego Cantor
  2. WebGL Beginner's Guide - Code

Commits

Brandon Jones  committed c840bf5

Updated for Chapter 10 rewrite

  • Participants
  • Parent commits e735292
  • Branches master

Comments (0)

Files changed (5)

File 1727_10/ch10_NormalMap.html

View file
 </script>
 
 <script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 //geometry
 uniform vec4 uMaterialDiffuse;

File 1727_10/ch10_PointSprites.html

View file
 </script>
 
 <script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 uniform sampler2D uSampler;
 

File 1727_10/ch10_PostProcessing.html

View file
 </script>
 
 <script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 uniform bool uWireframe;
 uniform bool uUseTextures; 
 </script>
 
 <script id="post-common-vs" type="x-shader/x-vertex">
-attribute vec3 aVertexPosition;
+attribute vec2 aVertexPosition;
 attribute vec2 aVertexTextureCoords;
 
 varying vec2 vTextureCoord;
 
 void main(void) {
     vTextureCoord = aVertexTextureCoords;
-    gl_Position = vec4(aVertexPosition, 1.0);
+    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
+}
+</script>
+
+<script id="post-normal" type="x-shader/x-fragment">
+precision highp float;
+
+uniform sampler2D uSampler;
+
+varying vec2 vTextureCoord;
+
+void main(void)
+{
+    vec4 frameColor = texture2D(uSampler, vTextureCoord);
+    gl_FragColor = frameColor;
 }
 </script>
 
 <script id="post-greyscale" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 uniform sampler2D uSampler;
 
 void main(void)
 {
     vec4 frameColor = texture2D(uSampler, vTextureCoord);
-    float brightness = (frameColor.r + frameColor.g + frameColor.b)/3.0;
-    gl_FragColor = vec4(brightness, brightness, brightness, frameColor.a);
+    float luminance = frameColor.r * 0.3 + frameColor.g * 0.59 + frameColor.b * 0.11;
+    gl_FragColor = vec4(luminance, luminance, luminance, frameColor.a);
 }
 </script>
 
 <script id="post-invert" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 uniform sampler2D uSampler;
 
 </script>
 
 <script id="post-blur" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 uniform sampler2D uSampler;
 uniform vec2 uInverseTextureSize;
 
 void main(void)
 {
-    vec4 frameColor;
-
-    frameColor += offsetLookup(-4.0, 0.0) * 0.05;
+    vec4 frameColor = offsetLookup(-4.0, 0.0) * 0.05;
     frameColor += offsetLookup(-3.0, 0.0) * 0.09;
     frameColor += offsetLookup(-2.0, 0.0) * 0.12;
     frameColor += offsetLookup(-1.0, 0.0) * 0.15;
 </script>
 
 <script id="post-wavy" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 uniform sampler2D uSampler;
 uniform float uTime;
 
 varying vec2 vTextureCoord;
 
+const float speed = 15.0;
+const float magnitude = 0.015;
+
 void main(void)
 {
-    float speed = 15.0;
-    float magnitude = 0.015;
     vec2 wavyCoord;
     wavyCoord.s = vTextureCoord.s + (sin(uTime+vTextureCoord.t*speed) * magnitude);
     wavyCoord.t = vTextureCoord.t + (cos(uTime+vTextureCoord.s*speed) * magnitude);
 </script>
 
 <script id="post-filmgrain" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision highp float;
-#endif
 
 uniform sampler2D uSampler;
 uniform sampler2D uNoiseSampler;
 
 varying vec2 vTextureCoord;
 
+const float grainIntensity = 0.1;
+const float scrollSpeed = 4000.0;
+
 void main(void)
 {
-    float grainIntensity = 0.1;
     vec4 frameColor = texture2D(uSampler, vTextureCoord);
-    vec4 grain = texture2D(uNoiseSampler, vTextureCoord * 2.0 + uTime * 4082.0 * uInverseTextureSize);
+    vec4 grain = texture2D(uNoiseSampler, vTextureCoord * 2.0 + uTime * scrollSpeed * uInverseTextureSize);
     gl_FragColor = frameColor - (grain * grainIntensity);
 }
 </script>
     var canvas  = document.getElementById('canvas-element-id');
     
     //Post Process
-    post = new PostProcess(canvas, "post-greyscale");
+    post = new PostProcess(canvas, "post-normal");
 
     // Noise texture, for use in the "film grain" post process effect
     noiseTexture = new Texture();
             <td>Filter:</td>
             <td>
             <div id='opt-filter' align='center'>
-                <input type='radio' id='filter-greyscale' name='filter' checked='checked'/><label for='filter-greyscale'>Greyscale</label>
+                <input type='radio' id='filter-normal' name='filter' checked='checked'/><label for='filter-normal'>Normal</label>
+                <input type='radio' id='filter-greyscale' name='filter'/><label for='filter-greyscale'>Greyscale</label>
                 <input type='radio' id='filter-invert' name='filter' /><label for='filter-invert'>Invert</label>
                 <input type='radio' id='filter-wavy' name='filter' /><label for='filter-wavy'>Wavy</label>
                 <input type='radio' id='filter-blur' name='filter' /><label for='filter-blur'>Blur</label>
 
 $('#opt-filter').buttonset();
 
+$('#filter-normal').click(function(){
+    post.configureShader("post-normal");
+});
+
 $('#filter-greyscale').click(function(){
     post.configureShader("post-greyscale");
 });

File 1727_10/ch10_Raytracing.html

View file
 <script type='text/javascript' src='js/webgl/PostProcess.js'></script>
 
 <script id="post-common-vs" type="x-shader/x-vertex">
-attribute vec3 aVertexPosition;
+attribute vec2 aVertexPosition;
 attribute vec2 aVertexTextureCoords;
 
 varying vec2 vTextureCoord;
 
 void main(void) {
     vTextureCoord = aVertexTextureCoords;
-    gl_Position = vec4(aVertexPosition, 1.0);
+    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
 }   
 </script>
 
 <!--http://glsl.heroku.com/e#1686.0-->
 <script id="raytrace-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
 precision mediump float;
-#endif
 
 uniform float uTime;
 uniform vec2 uInverseTextureSize;
 }
 
 float intersect( vec3 ro, vec3 rd, out vec3 norm, out vec3 color ) {
-    float t = maxDist;
+    float dist = maxDist;
 
     // If we wanted multiple objects in the scene you would loop through them here
-    // and return the normal and color with the closest intersection point (lowest t)
+    // and return the normal and color with the closest intersection point (lowest dist)
 
-    float ot = sphereInter( ro, rd, sphere1 ); 
+    float interDist = sphereInter( ro, rd, sphere1 ); 
     
-    if ( ot > 0.0 && ot < t ) {
-        t = ot;
+    if ( interDist > 0.0 && interDist < dist ) {
+        dist = interDist;
 
-        vec3 pt = ro + t * rd; // Point of intersection
+        vec3 pt = ro + dist * rd; // Point of intersection
         norm = sphereNorm(pt, sphere1); // Get normal for that point
         color = sphere1Color; // Get color for the sphere
     }
 
-    return t;
+    return dist;
 }
 
 void main( void ) {

File 1727_10/js/webgl/PostProcess.js

View file
 PostProcess.prototype.configureGeometry = function(){
     //1. Define the geometry for the fullscreen quad
     var vertices = [
-        -1.0,-1.0, 0.0,
-         1.0,-1.0, 0.0,
-        -1.0, 1.0, 0.0,
+        -1.0,-1.0,
+         1.0,-1.0,
+        -1.0, 1.0,
 
-        -1.0, 1.0, 0.0,
-         1.0,-1.0, 0.0,
-         1.0, 1.0, 0.0
+        -1.0, 1.0,
+         1.0,-1.0,
+         1.0, 1.0
     ];
 
-    var texture_coords = [
+    var textureCoords = [
          0.0, 0.0,
          1.0, 0.0,
          0.0, 1.0,
       
     this.textureBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texture_coords), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
 
     //3. Clean up
     gl.bindBuffer(gl.ARRAY_BUFFER, null);
     // Bind the quad geometry
     gl.enableVertexAttribArray(this.attrib.aVertexPosition);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.vertexAttribPointer(this.attrib.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribPointer(this.attrib.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
 
     gl.enableVertexAttribArray(this.attrib.aVertexTextureCoords);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);