I've seen a couple of shader models in example Experiences. The KTM Bike demo users a nice chrome effect with texture map. Here is the shader pair:
<script name="reflect" type="x-shader/x-fragment">
precision mediump float;
varying vec3 I;
varying vec3 N;
varying mat4 M;
const float PI = 3.1415;
uniform vec4 surfaceColor;
uniform float mixer;
uniform sampler2D tex0;
void main() {
vec4 color = surfaceColor;
if (true) {
vec3 NN = normalize(N);
vec3 viewDir = vec3(0.0, 0.0, -1.0);
float nDotv = dot(NN, viewDir);
if (nDotv < 0.) {
NN = -NN;
}
vec3 II = normalize(I);
vec3 RR = normalize(reflect(II, NN));
vec3 R = normalize(vec3(M * vec4(RR,0.0)));
float tx = atan(R.x, R.z) / (2.0 * PI);
float ty = .5+(asin(-R.y) / PI);
vec2 tex = vec2(tx,ty);
// and get the reflected value from the texture
color = texture2D(tex0, tex);
}
gl_FragColor = mix(surfaceColor,vec4(color.xyz, 1.0),mixer);
}
</script>
<script name="reflect" type="x-shader/x-vertex">
attribute vec3 vertexPosition;
attribute vec3 vertexNormal;
varying vec3 N;
varying vec3 I;
varying mat4 M;
uniform mat4 inverseViewMatrix;
uniform mat4 modelMatrix;
uniform mat4 modelViewProjectionMatrix;
uniform mat4 normalMatrix;
uniform mat4 modelViewMatrix;
void main() {
vec4 vp = vec4(vertexPosition, 1.0);
gl_Position = modelViewProjectionMatrix * vp;
vec3 vertex = vec3(modelViewMatrix * vp);
// the surface normal vector
N = vec3(normalize(normalMatrix * vec4(vertexNormal,0.0)));
// the eye-vertex vector
I = vertex.xyz - vec3(0);
// transform model into view(camera) space
M = modelMatrix * inverseViewMatrix;
}
</script>
To use it you need to add a TML object into your model and cut/paste the above code as its "text" property. Then in the Home.js (or whatever it is called in your model) put something like this:
//This applies shader to certain model items. Make sure you have a model item defined!
$timeout(function() {
$scope.view.wdg['wheel']['texture'] = "app/resources/Uploaded/MyImage.jpg?name=tex0&edge=repeat";
$scope.view.wdg['wheel']['shader'] = "reflect;mixer f 0.5";
} ,50);
Make sure you have uploaded a jpg as a texture. In my example it's MyImage.jpg.
The line that calls the shader also passes a variable "mixer" that in my case has a value of 0.5. You can see from the shader code that this mixes the surface color of the part with the reflected texture. Edit to taste! Also, experiment with different textures - landscapes seem to work well...
Anyway, I have not found any other good examples, nor been able to convert stuff I've read in WebGL tutorials into anything that works in Studio. Here's hoping the community can pitch in... I'd love to create more effects and it seems it *should* be possible??
