gl-mesh3d - Light position and shading fix

lib/triangle-fragment.glsl

@@ -1,9 +1,10 @@
 #extension GL_OES_standard_derivatives : enable
 
-precision highp float;
+precision mediump float;
 
 #pragma glslify: cookTorrance = require(glsl-specular-cook-torrance)
-#pragma glslify: faceNormal = require('glsl-face-normal')
+//#pragma glslify: beckmann = require(glsl-specular-beckmann) // used in gl-surface3d
+
 #pragma glslify: outOfRange = require(glsl-out-of-range)
 
 uniform vec3 clipBounds[2];
@@ -29,13 +30,13 @@ void main() {
   vec3 L = normalize(f_lightDirection);
   vec3 V = normalize(f_eyeDirection);
 
-  vec3 normal = faceNormal(f_data);
-
-  if (dot(N, normal) < 0.0) {
+  if(gl_FrontFacing) {
     N = -N;
   }
 
   float specular = cookTorrance(L, V, N, roughness, fresnel);
+  //float specular = max(beckmann(L, V, N, roughness), 0.); // used in gl-surface3d
+
   float diffuse  = min(kambient + kdiffuse * max(dot(N, L), 0.0), 1.0);
 
   vec4 surfaceColor = f_color * texture2D(texture, f_uv);

lib/triangle-vertex.glsl

@@ -1,12 +1,13 @@
-precision highp float;
+precision mediump float;
 
 attribute vec3 position, normal;
 attribute vec4 color;
 attribute vec2 uv;
 
 uniform mat4 model
            , view
-           , projection;
+           , projection
+           , inverseModel;
 uniform vec3 eyePosition
            , lightPosition;
 
@@ -17,14 +18,21 @@ varying vec3 f_normal
 varying vec4 f_color;
 varying vec2 f_uv;
 
+vec4 project(vec3 p) {
+  return projection * view * model * vec4(p, 1.0);
+}
+
 void main() {
-  vec4 m_position  = model * vec4(position, 1.0);
-  vec4 t_position  = view * m_position;
-  gl_Position      = projection * t_position;
+  gl_Position      = project(position);
+
+  //Lighting geometry parameters
+  vec4 cameraCoordinate = view * vec4(position , 1.0);
+  cameraCoordinate.xyz /= cameraCoordinate.w;
+  f_lightDirection = lightPosition - cameraCoordinate.xyz;
+  f_eyeDirection   = eyePosition - cameraCoordinate.xyz;
+  f_normal  = normalize((vec4(normal,0) * inverseModel).xyz);
+
   f_color          = color;
-  f_normal         = normal;
   f_data           = position;
-  f_eyeDirection   = eyePosition   - position;
-  f_lightDirection = lightPosition - position;
   f_uv             = uv;
 }

mesh.js

@@ -24,7 +24,7 @@ var pickShader    = shaders.pickShader
 var pointPickShader = shaders.pointPickShader
 var contourShader = shaders.contourShader
 
-var identityMatrix = [
+var IDENTITY = [
   1,0,0,0,
   0,1,0,0,
   0,0,1,0,
@@ -121,9 +121,9 @@ function SimplicialMesh(gl
 
   this.opacity       = 1.0
 
-  this._model       = identityMatrix
-  this._view        = identityMatrix
-  this._projection  = identityMatrix
+  this._model       = IDENTITY
+  this._view        = IDENTITY
+  this._projection  = IDENTITY
   this._resolution  = [1,1]
 }
 
@@ -513,7 +513,7 @@ fill_loop:
         }
 
         for(var j=0; j<3; ++j) {
-          var v = cell[j]
+          var v = cell[2 - j]
 
           var p = positions[v]
           tPos.push(p[0], p[1], p[2])
@@ -595,9 +595,9 @@ fill_loop:
 proto.drawTransparent = proto.draw = function(params) {
   params = params || {}
   var gl          = this.gl
-  var model       = params.model      || identityMatrix
-  var view        = params.view       || identityMatrix
-  var projection  = params.projection || identityMatrix
+  var model       = params.model      || IDENTITY
+  var view        = params.view       || IDENTITY
+  var projection  = params.projection || IDENTITY
 
   var clipBounds = [[-1e6,-1e6,-1e6],[1e6,1e6,1e6]]
   for(var i=0; i<3; ++i) {
@@ -609,6 +609,7 @@ proto.drawTransparent = proto.draw = function(params) {
     model:      model,
     view:       view,
     projection: projection,
+    inverseModel: IDENTITY.slice(),
 
     clipBounds: clipBounds,
 
@@ -628,6 +629,10 @@ proto.drawTransparent = proto.draw = function(params) {
     texture:    0
   }
 
+  uniforms.inverseModel = invert(uniforms.inverseModel, uniforms.model)
+
+  gl.disable(gl.CULL_FACE)
+
   this.texture.bind(0)
 
   var invCameraMatrix = new Array(16)
@@ -698,9 +703,9 @@ proto.drawPick = function(params) {
 
   var gl         = this.gl
 
-  var model      = params.model      || identityMatrix
-  var view       = params.view       || identityMatrix
-  var projection = params.projection || identityMatrix
+  var model      = params.model      || IDENTITY
+  var view       = params.view       || IDENTITY
+  var projection = params.projection || IDENTITY
 
   var clipBounds = [[-1e6,-1e6,-1e6],[1e6,1e6,1e6]]
   for(var i=0; i<3; ++i) {

package.json

@@ -14,7 +14,6 @@
     "gl-shader": "^4.2.1",
     "gl-texture2d": "^2.0.8",
     "gl-vao": "^1.1.3",
-    "glsl-face-normal": "^1.0.2",
     "glsl-out-of-range": "^1.0.4",
     "glsl-specular-cook-torrance": "^2.0.1",
     "glslify": "^7.0.0",