TML widget X-ray shader

OK this info is here only as summary for people who are looking for the solution of this topic

To generate x-ray like in unity the following steps:

Create a TML Text  widget:

Edit the Text property and add the following  code:

<script name="xray_green" type="x-shader/x-fragment">
 precision mediump float;
 
 varying vec3 I;
 varying vec3 N;
 
 const float edgeFalloff = 1.0;
 const float intensity = 1.0;
 const float ambient = 0.2;
 
 void main() {
 vec4 color = vec4(1.0,0,0,1.0);
 float opacity = abs(dot(normalize(-N), normalize(-I)));
 opacity = ambient + intensity*(1.0-pow(opacity,edgeFalloff));
 gl_FragColor = opacity * color;
 gl_FragColor.a = opacity;
 }
</script>
 
<script name="xray_green" type="x-shader/x-vertex">
 attribute vec3 vertexPosition;
 attribute vec3 vertexNormal;
 
 varying vec3 I;
 varying vec3 N;
 
 uniform mat4 modelViewProjectionMatrix;
 uniform mat4 modelViewMatrix;
 uniform mat4 normalMatrix;
 
 void main() {
 vec4 vp4 = vec4(vertexPosition,1.0);
 vec4 P = modelViewMatrix * vp4;
 I = P.xyz - vec3(0);
 N = vec3(normalMatrix * vec4(vertexNormal,0.0));
 gl_Position = modelViewProjectionMatrix * vp4;
 }
</script>

Important is here in the code  e.g. the line for the color definition:

vec4 color = vec4(0,1.0,0,1.0);

Here means this for a green corlor.

If you want red color you can use

 vec4 color = vec4(1.0,0,0,1.0);

for blue color  :

vec4 color = vec4(0,0,1.0,1.0)

To use the shader  definition for a  modelitem -> define a modelitem and set in javaScript the shader property:

$rootScope.$on('modelLoaded', function() { 
//....
 $scope.view.wdg['modelItem-2']['shader'] = 'xray_green_ktm';
//....
});