CIS700-Procedural-Graphics · klingerj · Feb 22, 2017 · Feb 22, 2017
diff --git a/build/assets/wahoo-1bfe66.bmp b/build/assets/wahoo-1bfe66.bmp
diff --git a/build/assets/wahoo-bfeb77.obj b/build/assets/wahoo-bfeb77.obj
diff --git a/build/bundle.js b/build/bundle.js
diff --git a/build/bundle.js.map b/build/bundle.js.map
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Shader Demos</title>
+    <style>
+      html, body {
+        margin: 0;
+        overflow: hidden;
+      }
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/src/glsl/iridiscence-frag.glsl b/src/glsl/iridiscence-frag.glsl
@@ -0,0 +1,35 @@
+
+uniform sampler2D texture;
+uniform int u_useTexture;
+uniform vec3 u_albedo;
+uniform vec3 u_ambient;
+uniform vec3 u_lightPos;
+uniform vec3 u_lightCol;
+uniform float u_lightIntensity;
+
+varying vec3 f_position;
+varying vec3 f_normal;
+varying vec2 f_uv;
+varying vec3 cameraPos;
+
+void main() {
+    // vec4 color = vec4(u_albedo, 1.0);
+
+    // if (u_useTexture == 1) {
+    //     color = texture2D(texture, f_uv);
+    // }
+
+    float d = dot(f_normal, normalize(cameraPos - f_position));
+    // d /= 2.0;
+
+    //Create a color palette using cosines
+    //http://www.iquilezles.org/www/articles/palettes/palettes.htm
+
+    float cosineRedComponent = 0.5 + 0.5 * cos(6.28318 * (2.0 * d + 0.5));
+    float cosineGreenComponent = 0.5 + 0.5 * cos(6.28318 * (d + 0.2));
+    float cosineBlueComponent = 0.5 + 0.5 * cos(6.28318 * (0.25));
+
+    vec3 color = vec3(cosineRedComponent, cosineGreenComponent, cosineBlueComponent);
+
+    gl_FragColor = vec4(d * color.rgb * u_lightCol * u_lightIntensity + u_ambient, 1.0);
+}
diff --git a/src/glsl/iridiscence-vert.glsl b/src/glsl/iridiscence-vert.glsl
@@ -0,0 +1,14 @@
+
+varying vec2 f_uv;
+varying vec3 f_normal;
+varying vec3 f_position;
+varying vec3 cameraPos;
+
+// uv, position, projectionMatrix, modelViewMatrix, normal
+void main() {
+    f_uv = uv;
+    f_normal = normal;
+    f_position = position;
+    cameraPos = cameraPosition;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
diff --git a/src/glsl/noisewarp-frag.glsl b/src/glsl/noisewarp-frag.glsl
@@ -0,0 +1,30 @@
+uniform sampler2D tDiffuse;
+uniform float u_amount;
+varying vec2 f_uv;
+
+// tDiffuse is a special uniform sampler that THREE.js will bind the previously rendered frame to
+
+void main() {
+
+	// Scale the UVs to change the "frequency" of the noise
+	vec2 scaledUVs = f_uv * 4.0;
+
+	// Sum together three sinusoid functions to imitate noise
+    // These sin functions were originally taken from: http://www.bidouille.org/prog/plasma
+    float s1 = sin((scaledUVs.x - 0.5) * 10.0);
+    float s2 = sin(10.0 * ((scaledUVs.x - 0.5) * sin(0.5) + (scaledUVs.y - 0.5) * cos(0.333)));
+
+    float s3X = (scaledUVs.x - 0.5) + 0.5 * sin(0.2);
+    float s3Y = (scaledUVs.y - 0.5) + 0.5 * cos(0.667);
+    float s3 = sin(sqrt(100.0 * (s3X * s3X + s3Y * s3Y) + 1.0));
+
+    // Sum the sinusoid functions
+    float summedSin = (s1 + s2 + s3) * u_amount * 0.333;
+
+    vec2 warpedUvOffset = vec2(summedSin, summedSin);
+
+    //To warp the image, offset the y-component of the uv of this quad.
+    vec4 col = texture2D(tDiffuse, f_uv + warpedUvOffset);
+    // vec4 col = vec4(summedSin, summedSin, summedSin, 1);
+    gl_FragColor = col;
+}
diff --git a/src/glsl/sobel-frag.glsl b/src/glsl/sobel-frag.glsl
@@ -0,0 +1,36 @@
+uniform sampler2D tDiffuse;
+uniform float u_amount;
+varying vec2 f_uv;
+
+// tDiffuse is a special uniform sampler that THREE.js will bind the previously rendered frame to
+
+void main() {
+
+    // Before performing the Sobel convolution, retrieve the 8 neighbors of this fragment
+    float epsilon = 0.001; // how close each neighbor is defined to be for edge detection
+
+    // Neighbors above (upper left/mid/right)
+    vec4 uL = texture2D(tDiffuse, vec2(f_uv.x - epsilon, f_uv.y + epsilon));
+    vec4 uM = texture2D(tDiffuse, vec2(f_uv.x, f_uv.y + epsilon));
+    vec4 uR = texture2D(tDiffuse, vec2(f_uv.x + epsilon, f_uv.y + epsilon));
+
+    // Neighbors to the left and right
+    vec4 mL = texture2D(tDiffuse, vec2(f_uv.x - epsilon, f_uv.y));
+    vec4 mR = texture2D(tDiffuse, vec2(f_uv.x + epsilon, f_uv.y));
+
+    // Neighbors below (left/mid/right)
+    vec4 lL = texture2D(tDiffuse, vec2(f_uv.x - epsilon, f_uv.y - epsilon));
+    vec4 lM = texture2D(tDiffuse, vec2(f_uv.x, f_uv.y - epsilon));
+    vec4 lR = texture2D(tDiffuse, vec2(f_uv.x + epsilon, f_uv.y - epsilon));
+
+    // Perform the convolution
+    vec4 convX = uL + uM + uM + uR - lL - lM - lM - lR;
+    vec4 convY = uR + mR + mR + lR - uL - mL - mL - lL;
+    vec4 convolution = sqrt(convX * convX + convY * convY);
+
+    // Grayscale the result
+    // float gray = dot(convolution.rgb, vec3(0.299, 0.587, 0.114)); 
+    vec4 col = texture2D(tDiffuse, f_uv);
+
+    gl_FragColor = vec4( /*vec3(gray)*/convolution.rgb, 1 ) * (u_amount) + col * (1.0 - u_amount);
+}
diff --git a/src/glsl/vignette-frag.glsl b/src/glsl/vignette-frag.glsl
@@ -0,0 +1,15 @@
+uniform sampler2D tDiffuse;
+uniform float u_amount;
+varying vec2 f_uv;
+
+// tDiffuse is a special uniform sampler that THREE.js will bind the previously rendered frame to
+
+void main() {
+    vec4 col = texture2D(tDiffuse, f_uv);
+
+    float center_uvX = f_uv.x - 0.5;
+    float center_uvY = f_uv.y - 0.5;
+    float distFromCenter = length(vec2(center_uvX, center_uvY));
+    distFromCenter = 1.0 - distFromCenter;
+    gl_FragColor = col * distFromCenter * (u_amount) + col * (1.0 - u_amount);
+}
diff --git a/src/post/index.js b/src/post/index.js
@@ -15,4 +15,7 @@ export function None(renderer, scene, camera) {
 }
 
 // follow this syntax to make your shaders available to the GUI
-export {default as Grayscale} from './grayscale'
+export {default as Grayscale} from './grayscale'
+export {default as NoiseWarp} from './noiseWarp'
+export {default as Sobel} from './sobel'
+export {default as Vignette} from './vignette'
diff --git a/src/post/noiseWarp.js b/src/post/noiseWarp.js
@@ -0,0 +1,48 @@
+const THREE = require('three');
+const EffectComposer = require('three-effectcomposer')(THREE)
+
+var options = {
+    amount: 1
+}
+
+var NoiseWarpShader = new EffectComposer.ShaderPass({
+    uniforms: {
+        tDiffuse: {
+            type: 't',
+            value: null
+        },
+        u_amount: {
+            type: 'f',
+            value: options.amount
+        }
+    },
+    vertexShader: require('../glsl/pass-vert.glsl'),
+    fragmentShader: require('../glsl/noisewarp-frag.glsl')
+});
+
+export default function NoiseWarp(renderer, scene, camera) {
+
+    // this is the THREE.js object for doing post-process effects
+    var composer = new EffectComposer(renderer);
+
+    // first render the scene normally and add that as the first pass
+    composer.addPass(new EffectComposer.RenderPass(scene, camera));
+
+    // then take the rendered result and apply the NoiseWarpShader
+    composer.addPass(NoiseWarpShader);  
+
+    // set this to true on the shader for your last pass to write to the screen
+    NoiseWarpShader.renderToScreen = true;  
+
+    return {
+        initGUI: function(gui) {
+            gui.add(options, 'amount', 0, 1).onChange(function(val) {
+                NoiseWarpShader.material.uniforms.u_amount.value = val;
+            });
+        },
+
+        render: function() {;
+            composer.render();
+        }
+    }
+}
diff --git a/src/post/sobel.js b/src/post/sobel.js
@@ -0,0 +1,48 @@
+const THREE = require('three');
+const EffectComposer = require('three-effectcomposer')(THREE)
+
+var options = {
+    amount: 1
+}
+
+var SobelShader = new EffectComposer.ShaderPass({
+    uniforms: {
+        tDiffuse: {
+            type: 't',
+            value: null
+        },
+        u_amount: {
+            type: 'f',
+            value: options.amount
+        }
+    },
+    vertexShader: require('../glsl/pass-vert.glsl'),
+    fragmentShader: require('../glsl/sobel-frag.glsl')
+});
+
+export default function Sobel(renderer, scene, camera) {
+
+    // this is the THREE.js object for doing post-process effects
+    var composer = new EffectComposer(renderer);
+
+    // first render the scene normally and add that as the first pass
+    composer.addPass(new EffectComposer.RenderPass(scene, camera));
+
+    // then take the rendered result and apply the SobelShader
+    composer.addPass(SobelShader);  
+
+    // set this to true on the shader for your last pass to write to the screen
+    SobelShader.renderToScreen = true;  
+
+    return {
+        initGUI: function(gui) {
+            gui.add(options, 'amount', 0, 1).onChange(function(val) {
+                SobelShader.material.uniforms.u_amount.value = val;
+            });
+        },
+
+        render: function() {;
+            composer.render();
+        }
+    }
+}
diff --git a/src/post/vignette.js b/src/post/vignette.js
@@ -0,0 +1,48 @@
+const THREE = require('three');
+const EffectComposer = require('three-effectcomposer')(THREE)
+
+var options = {
+    amount: 1
+}
+
+var VignetteShader = new EffectComposer.ShaderPass({
+    uniforms: {
+        tDiffuse: {
+            type: 't',
+            value: null
+        },
+        u_amount: {
+            type: 'f',
+            value: options.amount
+        }
+    },
+    vertexShader: require('../glsl/pass-vert.glsl'),
+    fragmentShader: require('../glsl/vignette-frag.glsl')
+});
+
+export default function Vignette(renderer, scene, camera) {
+
+    // this is the THREE.js object for doing post-process effects
+    var composer = new EffectComposer(renderer);
+
+    // first render the scene normally and add that as the first pass
+    composer.addPass(new EffectComposer.RenderPass(scene, camera));
+
+    // then take the rendered result and apply the VignetteShader
+    composer.addPass(VignetteShader);  
+
+    // set this to true on the shader for your last pass to write to the screen
+    VignetteShader.renderToScreen = true;  
+
+    return {
+        initGUI: function(gui) {
+            gui.add(options, 'amount', 0, 1).onChange(function(val) {
+                VignetteShader.material.uniforms.u_amount.value = val;
+            });
+        },
+
+        render: function() {;
+            composer.render();
+        }
+    }
+}
diff --git a/src/shaders/index.js b/src/shaders/index.js
@@ -1,4 +1,5 @@
 
 // This file exports available shaders to the GUI.
 // follow this syntax to make your shaders available to the GUI
-export {default as Lambert} from './lambert'
+export {default as Lambert} from './lambert'
+export {default as Iridiscence} from './iridiscence'