Merge pull request #477 from cedricpinson/improve-normal-display-anim…

…ated

Adds animated debug normal and tangent display debugging

sources/osgAnimation/MorphGeometry.js

@@ -36,12 +36,14 @@ define( [
             this.getStateSetAnimation().setAttributeAndModes( animAttrib, StateAttribute.ON );
             animAttrib.setTargetWeights( this.getTargetsWeight() );
 
-            this._morphTargetNames = Object.keys( this._targets[ 0 ].getVertexAttributeList() );
 
-            if ( this._targets[ 0 ] )
+            if ( this._targets[ 0 ] ) {
+                this._morphTargetNames = Object.keys( this._targets[ 0 ].getVertexAttributeList() );
                 animAttrib.copyTargetNames( this._morphTargetNames );
-            else
+            } else {
+                this._morphTargetNames = [];
                 Notify.error( 'No Targets in the MorphGeometry !' );
+            }
 
             this._isInitialized = true;
             return true;

sources/osgShader/Compiler.js

@@ -458,6 +458,22 @@ define( [
             return v;
         },
 
+        getOrCreateInputTangent: function () {
+            return this.getOrCreateVarying( 'vec4', 'FragTangent' );
+        },
+
+        getOrCreateFrontTangent: function () {
+            var frontTangent = this.createVariable( 'vec4', 'frontTangent' );
+
+            this.getNode( 'FrontNormal' ).inputs( {
+                normal: this.getOrCreateInputTangent()
+            } ).outputs( {
+                normal: frontTangent
+            } );
+
+            return frontTangent;
+        },
+
         getOrCreateInputNormal: function () {
             return this.getOrCreateVarying( 'vec3', 'FragNormal' );
         },
@@ -1165,9 +1181,44 @@ define( [
             return doMorph;
         },
         getTarget: function ( name, i ) {
-            return this.getOrCreateAttribute( 'vec3', name + '_' + i );
+            var type = name.indexOf( 'Tangent' ) !== -1 ? 'vec4' : 'vec3';
+            return this.getOrCreateAttribute( type, name + '_' + i );
+        },
+        morphTangentApproximation: function ( inputVertex, outputVertex ) {
+            var normalizedMorph;
+            // kind of tricky, here we retrieve the normalized normal after morphing
+            // if there is no rigging we do not recompute it
+            if ( this._skinningAttribute ) {
+
+                normalizedMorph = this.createVariable( 'vec3' );
+                this.getNode( 'Normalize' ).inputs( {
+                    vec: this.getVariable( 'normalMorph' )
+                } ).outputs( {
+                    vec: normalizedMorph
+                } );
+
+            } else {
+                normalizedMorph = this.getVariable( 'normalAttribute' );
+            }
+
+            this.getNode( 'InlineCode' ).code( '%out = %tangent.rgb - dot(%tangent.rgb, %normal) * %normal;' ).inputs( {
+                tangent: inputVertex,
+                normal: normalizedMorph
+            } ).outputs( {
+                out: outputVertex
+            } );
+
+            return outputVertex;
         },
         morphTransformVec3: function ( inputVertex, outputVertex, targetName ) {
+
+            var approx = false; // on mobile ?
+            var morph = this._morphAttribute;
+            // compute morph tangent (getOrCreateNormalAttribute will create the 'normalMorph' variable)
+            if ( approx && targetName === 'Tangent' && this.getOrCreateNormalAttribute() && morph && morph.hasTarget( 'Normal' ) ) {
+                return this.morphTangentApproximation( inputVertex, outputVertex );
+            }
+
             var inputs = {
                 doMorph: this.getOrCreateDoMorph(),
                 vertex: inputVertex,
@@ -1252,6 +1303,47 @@ define( [
 
             return vecOut;
         },
+        getOrCreateTangentAttribute: function () {
+            var vecOut = this.getVariable( 'tangentAttribute' );
+            if ( vecOut ) return vecOut;
+
+            var hasMorph = this._morphAttribute && this._morphAttribute.hasTarget( 'Tangent' );
+
+            var inputTangent = this.getOrCreateAttribute( 'vec4', 'Tangent' );
+            if ( !this._skinningAttribute && !hasMorph ) return inputTangent;
+
+            var tmpAnim;
+
+            if ( hasMorph && !this._skinningAttribute ) {
+                tmpAnim = this.morphTransformVec3( inputTangent, this.createVariable( 'vec3', 'tangentMorph' ) );
+            } else if ( !hasMorph && this._skinningAttribute ) {
+                tmpAnim = this.skinTransformNormal( inputTangent, this.createVariable( 'vec3', 'tangentSkin' ) );
+            } else {
+
+                tmpAnim = this.morphTransformVec3( inputTangent, this.createVariable( 'vec3', 'tangentMorph' ), 'Tangent' );
+                tmpAnim = this.skinTransformNormal( tmpAnim, this.createVariable( 'vec3', 'tangentSkin' ) );
+
+            }
+
+            // normalize
+            var tangNorm = this.createVariable( 'vec3' );
+            this.getNode( 'Normalize' ).inputs( {
+                vec: tmpAnim
+            } ).outputs( {
+                vec: tangNorm
+            } );
+
+            // apply back the alpha
+            vecOut = this.createVariable( 'vec4', 'tangentAttribute' );
+            this.getNode( 'SetAlpha' ).inputs( {
+                color: tangNorm,
+                alpha: inputTangent
+            } ).outputs( {
+                color: vecOut
+            } );
+
+            return vecOut;
+        },
         declareVertexTransformShadeless: function ( glPosition ) {
             // No light
             var tempViewSpace = this.createVariable( 'vec4' );
@@ -1286,6 +1378,10 @@ define( [
             } );
         },
 
+        needTangent: function () {
+            // the application choose whether or not to use tangent
+            return false;
+        },
         declareVertexTransformLighted: function ( glPosition ) {
             // FragNormal
             this.getNode( 'MatrixMultDirection' ).inputs( {
@@ -1295,6 +1391,15 @@ define( [
                 vec: this.getOrCreateInputNormal()
             } );
 
+            if ( this.needTangent() ) {
+                this.getNode( 'MatrixMultDirection' ).setForceComplement( false ).inputs( {
+                    matrix: this.getOrCreateUniform( 'mat4', 'NormalMatrix' ),
+                    vec: this.getOrCreateTangentAttribute()
+                } ).outputs( {
+                    vec: this.getOrCreateVarying( 'vec4', 'FragTangent' )
+                } );
+            }
+
             if ( this._isBillboard )
                 this.declareVertexTransformBillboard( glPosition );
             else

sources/osgShader/ShaderGeneratorProxy.js

@@ -1,8 +1,9 @@
 define( [
     'osgShader/ShaderGenerator',
-    'osgShadow/ShadowCastShaderGenerator'
+    'osgShadow/ShadowCastShaderGenerator',
+    'osgUtil/DisplayNormalVisitor'
 
-], function ( ShaderGenerator, ShadowCastShaderGenerator ) {
+], function ( ShaderGenerator, ShadowCastShaderGenerator, DisplayNormalVisitor ) {
     'use strict';
 
     var ShaderGeneratorProxy = function () {
@@ -11,6 +12,8 @@ define( [
         this._generators = new Map();
         this.addShaderGenerator( 'default', new ShaderGenerator() );
         this.addShaderGenerator( 'ShadowCast', new ShadowCastShaderGenerator() );
+        this.addShaderGenerator( 'debugNormal', new DisplayNormalVisitor.ShaderGeneratorCompilerOffsetNormal() );
+        this.addShaderGenerator( 'debugTangent', new DisplayNormalVisitor.ShaderGeneratorCompilerOffsetTangent() );
 
         return this;
     };

sources/osgUtil/DisplayNodeGraphVisitor.js

@@ -94,6 +94,7 @@ define( [
                 return;
 
             if ( this._fullNodeList[ node.getInstanceID() ] !== node ) {
+                this._fullNodeList[ node.getInstanceID() ] = node;
                 this._nodeList.push( node );
             }
 
@@ -237,22 +238,22 @@ define( [
             var identifier = $( target.getAttribute( 'title' ) )[ 0 ].innerHTML;
             var fnl = this._fullNodeList;
 
-            if ( this.lastStateSet )
-                this.lastStateSet.childNodes[ 0 ].style.fill = '#09f';
-            if ( this.lastNode )
-                this.lastNode.childNodes[ 0 ].style.fill = '#fff';
-            this.lastStateSet = this.lastNode = null;
+            // color the node back (should be handled with pure css ...)
+            if ( this.lastNode ) {
+                var last = fnl[ $( this.lastNode.getAttribute( 'title' ) )[ 0 ].innerHTML ];
+                this.lastNode.childNodes[ 0 ].style.fill = this.getColorFromClassName( last.className() );
+            }
+            this.lastNode = target;
+
             target.childNodes[ 0 ].style.fill = '#f00';
 
             var elt = fnl[ identifier ];
 
             if ( elt.className() !== 'StateSet' ) {
-                this.lastNode = target;
                 window.activeNode = elt;
                 console.log( 'window.activeNode is set.' );
                 console.log( window.activeNode );
             } else {
-                this.lastStateSet = target;
                 window.activeStateset = elt;
                 console.log( 'window.activeStateset is set.' );
                 console.log( window.activeStateset );