There are 2 specific things where we have to pay attention on the HoloLens.
1.) is to call all functions calls when the models are alreday loaded. This means it is recommended to call all shaders from a modelload event - example:
$rootScope.$on('modelLoaded', function() {
$scope.view.wdg['modelItem-1']['shader'] = "xray;";
$scope.view.wdg['modelItem-1']['shader'] = "";
$scope.render_status=0;
setInterval(function() {
$scope.$apply(function () {
if($scope.render_status==0)
{$scope.render_status=1
$scope.setWidgetProp('modelItem-1', 'shader', 'xray;');
$scope.setWidgetProp('modelItem-2', 'shader', 'Default;');
// $scope.view.wdg['modelItem-1']['shader'] = "xray;";
// $scope.view.wdg['modelItem-2']['shader'] = "";
}
else
{$scope.render_status=0
$scope.setWidgetProp('modelItem-1', 'shader', 'Default;');
$scope.setWidgetProp('modelItem-2', 'shader', 'xray;');
}
}
);
}
, 1500);
2.) the other point to use setWidgetProp method - instead of the statement:
$scope.view.wdg['modelItem-1']['shader'] = "xray;";
//use this
$scope.setWidgetProp('modelItem-1', 'shader', 'xray;');
For static shaders this seem to work fine on the HoloLens
Here is an example for the xray shader where I tested it successfully . The example code will change ever 1.5 seconds in an interval function the shader display of modelitems (from shader xray to default and vice versa) To use it we have to create a TML text widget and paste the shader devinition on it.
<script name="xray" 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);
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" 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>
So it seems that shaders will work on the HoloLens in generally and in your case we have some specific problem which needs first to be indetified.
Provides a framework for creating holographic apps using JavaScript and WebGL. - microsoft/HoloJS
Here is an example /sample project for ping shader for HoloLens. The project requires 2 definition of the same shader - one for GLSL and one for HLSL. So here we can check the current mode and if it is preview then use the pingergl shader and otherwise we can use the pingerhl shader. In the demo project the both shaders are defined in separate TMLText widgets. To check the mode called window.twx.app.isPreview()
new version of the Eyewear project attached here - it contains also implementation of the reflect shader for both preview and HoloLens device:
