parallax-mapping initial normal mapping

local-cubemap-reflections/device-orientation/index.js

@@ -0,0 +1,131 @@
+//adapted from ThreeJS
+//https://github.com/mrdoob/three.js/blob/8e2d3a8cbc8a7b85db9070b443ad4cd27c248f6f/examples/js/controls/DeviceOrientationControls.js
+
+var Vec3 = require('pex-math/Vec3');
+var Quat = require('pex-math/Quat');
+var toRadians = require('pex-math/Utils').toRadians;
+
+var degToRad = Math.PI / 180; // Degree-to-Radian conversion
+
+var isBrowser = typeof(window) != 'undefined';
+
+var DeviceOrientation = {
+  rotation: Quat.create(),
+  enabled: true,
+  deviceOrientation: {},
+  screenOrientation: isBrowser ? (window.orientation || 0) : 0
+};
+
+var onDeviceOrientationChange = function(event) {
+  DeviceOrientation.deviceOrientation = event;
+};
+
+var onScreenOrientationChange = function() {
+  DeviceOrientation.screenOrientation = window.orientation || 0;
+};
+
+
+DeviceOrientation.connect = function() {
+  if (isBrowser) {
+    window.addEventListener( 'orientationchange', onScreenOrientationChange, false );
+    window.addEventListener( 'deviceorientation', onDeviceOrientationChange, false );
+  }
+  DeviceOrientation.enabled = true;
+}
+
+DeviceOrientation.disconnect = function() {
+  if (isBrowser) {
+    window.removeEventListener( 'orientationchange', onScreenOrientationChange, false );
+    window.removeEventListener( 'deviceorientation', onDeviceOrientationChange, false );
+  }
+  DeviceOrientation.enabled = false;
+}
+
+
+// The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
+
+var setObjectQuaternion = function() {
+  var zee = [0, 0, 1];
+
+  //var euler = new THREE.Euler();
+
+  var q0 = Quat.create();
+  var qx = Quat.create();
+  var qy = Quat.create();
+  var qz = Quat.create();
+
+  var q1 = Quat.set4(Quat.create(), - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis
+
+  return function ( quaternion, alpha, beta, gamma, orient ) {
+
+    Quat.setAxisAngle(qx, beta, [1, 0, 0]);
+    Quat.setAxisAngle(qy, alpha, [0, 1, 0]);
+    Quat.setAxisAngle(qz, -gamma, [0, 0, 1]);
+    //euler.set( beta, alpha, - gamma, 'YXZ' );                       // 'ZXY' for the device, but 'YXZ' for us
+
+    //var euler = {
+    //  _x : beta,
+    //  _y : alpha,
+    //  _z : -gamma
+    //}
+//
+    //var c1 = Math.cos( euler._x / 2 );
+    //var c2 = Math.cos( euler._y / 2 );
+    //var c3 = Math.cos( euler._z / 2 );
+    //var s1 = Math.sin( euler._x / 2 );
+    //var s2 = Math.sin( euler._y / 2 );
+    //var s3 = Math.sin( euler._z / 2 );
+//
+    //if ( euler.order === 'XYZ' ) {
+//
+    //  this._x = s1 * c2 * c3 + c1 * s2 * s3;
+    //  this._y = c1 * s2 * c3 - s1 * c2 * s3;
+    //  this._z = c1 * c2 * s3 + s1 * s2 * c3;
+    //  this._w = c1 * c2 * c3 - s1 * s2 * s3;
+
+    //else if ( euler.order === 'YXZ' ) {
+//
+    //  this._x = s1 * c2 * c3 + c1 * s2 * s3;
+    //  this._y = c1 * s2 * c3 - s1 * c2 * s3;
+    //  this._z = c1 * c2 * s3 - s1 * s2 * c3;
+    //  this._w = c1 * c2 * c3 + s1 * s2 * s3;
+//
+    //} else if ( euler.order === 'ZXY' ) {
+
+    Quat.identity(quaternion);
+    Quat.mult(quaternion, qy)
+    Quat.mult(quaternion, qx)
+    Quat.mult(quaternion, qz)
+    //quaternion.identity().mul(qy).mul(qx).mul(qz); //YXZ
+    //quaternion.identity().mul(qz).mul(qx).mul(qy); //YXZ
+
+    //quaternion.setFromEuler( euler );                               // orient the device
+
+    Quat.mult(quaternion, q1)
+    //quaternion.mul( q1 );                                      // camera looks out the back of the device, not the top
+
+    Quat.setAxisAngle(q0, -orient, zee )
+    Quat.mult(quaternion,  q0);    // adjust for screen orientation
+
+    //if (alpha == gamma == beta == 0) {
+    //  quaternion.identity();
+    //}
+
+  }
+
+}();
+
+DeviceOrientation.update = function() {
+  if ( DeviceOrientation.enabled === false ) return;
+
+  var alpha  = DeviceOrientation.deviceOrientation.alpha ? ( degToRad * DeviceOrientation.deviceOrientation.alpha ) : 0; // Z
+  var beta   = DeviceOrientation.deviceOrientation.beta  ? ( degToRad * DeviceOrientation.deviceOrientation.beta  ) : 0; // X'
+  var gamma  = DeviceOrientation.deviceOrientation.gamma ? ( degToRad * DeviceOrientation.deviceOrientation.gamma ) : 0; // Y''
+  var orient = DeviceOrientation.screenOrientation       ? ( degToRad * DeviceOrientation.screenOrientation       ) : 0; // O
+
+  setObjectQuaternion( DeviceOrientation.rotation, alpha, beta, gamma, orient );
+};
+
+DeviceOrientation.connect();
+
+module.exports = DeviceOrientation;

parallax-mapping/README.md

@@ -0,0 +1,4 @@
+# Parallax Mapping
+
+http://learnopengl.com/#!Advanced-Lighting/Normal-Mapping
+http://learnopengl.com//___possible__unsafe__site__3e38efae#!Advanced-Lighting/Parallax-Mapping

parallax-mapping/assets/Flat.frag

@@ -0,0 +1,33 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
+#pragma glslify: toLinear = require('glsl-gamma/in')
+#pragma glslify: toGamma = require('glsl-gamma/out')
+#pragma glslify: blinnPhongSpec = require(glsl-specular-blinn-phong)
+
+varying vec3 vPositionView;
+varying vec3 vNormalView;
+varying vec2 vTexCoord0;
+varying vec3 vLightPositionView;
+
+uniform sampler2D uBaseColorTex;
+
+void main() {
+    vec3 N = normalize(vNormalView);
+    vec3 V = normalize(-vPositionView);
+    vec3 L = normalize(vLightPositionView - vPositionView);
+    vec3 H = normalize((V + L) / 2.0);
+    float NdotL = max(0.0, dot(N, L));
+    float VdotH = max(0.0, dot(H, V));
+
+    //fresnel
+    float F0 = 0.04;
+    float F = F0 + (1.0 - F0) * pow(1.0 - VdotH, 5.0);
+    float specular = F * blinnPhongSpec(L, V, N, 32.0);
+
+    vec3 baseColor = toLinear(texture2D(uBaseColorTex, vTexCoord0).rgb);
+    gl_FragColor.rgb = NdotL * baseColor * (1.0 - specular) + specular;
+    gl_FragColor.rgb = toGamma(gl_FragColor.rgb);
+    gl_FragColor.a = 1.0;
+}

parallax-mapping/assets/Flat.vert

@@ -0,0 +1,32 @@
+attribute vec4 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTexCoord0;
+
+uniform mat4 uProjectionMatrix;
+uniform mat4 uViewMatrix;
+uniform mat4 uModelMatrix;
+uniform mat3 uNormalMatrix;
+
+uniform vec3 uLightPosition;
+
+varying vec3 vPositionView;
+varying vec3 vNormalView;
+varying vec2 vTexCoord0;
+varying vec3 vLightPositionView;
+
+void main() {
+    vec4 positionView = uViewMatrix * uModelMatrix * aPosition;
+    vPositionView = vec3(positionView);
+
+    gl_Position = uProjectionMatrix * positionView;
+
+    vNormalView = vec3(uNormalMatrix * aNormal);
+
+    vTexCoord0 = aTexCoord0;
+
+    //proper way
+    //vLightPositionView = vec3(uViewMatrix * vec4(uLightPosition, 1.0));
+
+    //instead let's assume the light in view space so we get responsive lighting when we move arcball
+    vLightPositionView = uLightPosition;
+}

parallax-mapping/assets/NormalBump.frag

@@ -0,0 +1,46 @@
+#ifdef GL_ES
+precision highp float;
+#extension GL_OES_standard_derivatives : require
+#endif
+
+#pragma glslify: toLinear = require('glsl-gamma/in')
+#pragma glslify: toGamma = require('glsl-gamma/out')
+#pragma glslify: perturb = require('glsl-perturb-normal')
+#pragma glslify: blinnPhongSpec = require(glsl-specular-blinn-phong)
+
+varying vec3 vPositionView;
+varying vec3 vNormalView;
+varying vec2 vTexCoord0;
+varying vec3 vLightPositionView;
+
+uniform sampler2D uBaseColorTex;
+uniform sampler2D uNormalTex;
+
+void main() {
+    vec3 N = normalize(vNormalView);
+    vec3 V = normalize(-vPositionView);
+    vec3 L = normalize(vLightPositionView - vPositionView);
+    vec3 H = normalize((V + L) / 2.0);
+
+    vec3 normalMapN = texture2D(uNormalTex, vTexCoord0).rgb * 2.0 - 1.0;
+    //agree on direction of your normal maps
+    //mine needs it, the original one from tutorial doesn't
+    //normalMapN.y *= -1.0;
+    //normalMapN.x *= -1.0;
+    N = perturb(normalMapN, N, V, vTexCoord0);
+
+    float NdotL = max(0.0, dot(N, L));
+    float VdotH = max(0.0, dot(H, V));
+
+    //fresnel
+    float F0 = 0.04;
+    float F = F0 + (1.0 - F0) * pow(1.0 - VdotH, 5.0);
+    float specular = F * blinnPhongSpec(L, V, N, 32.0);
+
+    vec3 baseColor = toLinear(texture2D(uBaseColorTex, vTexCoord0).rgb);
+    gl_FragColor.rgb = NdotL * baseColor * (1.0 - specular) + specular;
+    gl_FragColor.rgb = toGamma(gl_FragColor.rgb);
+    gl_FragColor.a = 1.0;
+
+    //gl_FragColor.rgb = vec3(VdotH);
+}

parallax-mapping/assets/NormalBump.vert

@@ -0,0 +1,32 @@
+attribute vec4 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTexCoord0;
+
+uniform mat4 uProjectionMatrix;
+uniform mat4 uViewMatrix;
+uniform mat4 uModelMatrix;
+uniform mat3 uNormalMatrix;
+
+uniform vec3 uLightPosition;
+
+varying vec3 vPositionView;
+varying vec3 vNormalView;
+varying vec2 vTexCoord0;
+varying vec3 vLightPositionView;
+
+void main() {
+    vec4 positionView = uViewMatrix * uModelMatrix * aPosition;
+    vPositionView = vec3(positionView);
+
+    gl_Position = uProjectionMatrix * positionView;
+
+    vNormalView = vec3(uNormalMatrix * aNormal);
+
+    vTexCoord0 = aTexCoord0;
+
+    //proper way
+    vLightPositionView = vec3(uViewMatrix * vec4(uLightPosition, 1.0));
+
+    //instead let's assume the light in view space so we get responsive lighting when we move arcball
+    vLightPositionView = uLightPosition;
+}

parallax-mapping/assets/ParallaxBump.frag

@@ -0,0 +1,46 @@
+#ifdef GL_ES
+precision highp float;
+#extension GL_OES_standard_derivatives : require
+#endif
+
+#pragma glslify: toLinear = require('glsl-gamma/in')
+#pragma glslify: toGamma = require('glsl-gamma/out')
+#pragma glslify: perturb = require('glsl-perturb-normal')
+#pragma glslify: blinnPhongSpec = require(glsl-specular-blinn-phong)
+
+varying vec3 vPositionView;
+varying vec3 vNormalView;
+varying vec2 vTexCoord0;
+varying vec3 vLightPositionView;
+
+uniform sampler2D uBaseColorTex;
+uniform sampler2D uNormalTex;
+
+void main() {
+    vec3 N = normalize(vNormalView);
+    vec3 V = normalize(-vPositionView);
+    vec3 L = normalize(vLightPositionView - vPositionView);
+    vec3 H = normalize((V + L) / 2.0);
+
+    vec3 normalMapN = texture2D(uNormalTex, vTexCoord0).rgb * 2.0 - 1.0;
+    //agree on direction of your normal maps
+    //mine needs it, the original one from tutorial doesn't
+    //normalMapN.y *= -1.0;
+    //normalMapN.x *= -1.0;
+    N = perturb(normalMapN, N, V, vTexCoord0);
+
+    float NdotL = max(0.0, dot(N, L));
+    float VdotH = max(0.0, dot(H, V));
+
+    //fresnel
+    float F0 = 0.04;
+    float F = F0 + (1.0 - F0) * pow(1.0 - VdotH, 5.0);
+    float specular = F * blinnPhongSpec(L, V, N, 32.0);
+
+    vec3 baseColor = toLinear(texture2D(uBaseColorTex, vTexCoord0).rgb);
+    gl_FragColor.rgb = NdotL * baseColor * (1.0 - specular) + specular;
+    gl_FragColor.rgb = toGamma(gl_FragColor.rgb);
+    gl_FragColor.a = 1.0;
+
+    //gl_FragColor.rgb = vec3(VdotH);
+}

parallax-mapping/assets/ParallaxBump.vert

@@ -0,0 +1,32 @@
+attribute vec4 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTexCoord0;
+
+uniform mat4 uProjectionMatrix;
+uniform mat4 uViewMatrix;
+uniform mat4 uModelMatrix;
+uniform mat3 uNormalMatrix;
+
+uniform vec3 uLightPosition;
+
+varying vec3 vPositionView;
+varying vec3 vNormalView;
+varying vec2 vTexCoord0;
+varying vec3 vLightPositionView;
+
+void main() {
+    vec4 positionView = uViewMatrix * uModelMatrix * aPosition;
+    vPositionView = vec3(positionView);
+
+    gl_Position = uProjectionMatrix * positionView;
+
+    vNormalView = vec3(uNormalMatrix * aNormal);
+
+    vTexCoord0 = aTexCoord0;
+
+    //proper way
+    //vLightPositionView = vec3(uViewMatrix * vec4(uLightPosition, 1.0));
+
+    //instead let's assume the light in view space so we get responsive lighting when we move arcball
+    vLightPositionView = uLightPosition;
+}

parallax-mapping/assets/textures/brickwall.txt

@@ -0,0 +1 @@
+Source: http://learnopengl.com/#!Advanced-Lighting/Normal-Mapping

parallax-mapping/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <meta charset="UTF-8">
+        <title>PEX</title>
+        <script src="main.web.js"></script>
+        <style type="text/css">
+        body { padding: 0; margin: 0; overflow: hidden; }
+        </style>
+    </head>
+    <body>
+    </body>
+</html>