Skip to main content
1-Visitor
September 4, 2018
Question

Shader for effects

  • September 4, 2018
  • 0 replies
  • 1529 views

I would like to create a custom shader to create a simple effect where a texture is "scrolling". adding an offset to the texture UV coordinates over time.

 

right now, I created a shader with a <TML> object

$scope.setWidgetProp('MainFuelPipe-1','texture','app/resources/Images/water_animated.png?name=tex0&edge=repeat'); 
$scope.setWidgetProp('MainFuelPipe-1','shader','reflect;u_time f '+offset+'');

I currently have troubles changing the UV coordinates in my shader.  Basically, i don't know how to get my texture coordinates in my fragment shader

 

The idea would be something like: 

<script name="reflect" type="x-shader/x-fragment">
precision mediump float;
// Passed in from the vertex shader.
varying vec2 v_texcoord;
// The texture.
uniform sampler2D tex0;
uniform float u_time;

void main() { 
gl_FragColor = texture2D(tex0, vec2(gl_FragCoord.x + u_time, gl_FragCoord.y)); } </script>

but I have troubles getting my shader to work and changing the UV coordinates.

 

Is there also some kind of documentation or a set of examples on shaders for Vuforia Studio? 

 

Bonus question: is there a way i can access the shader program in my Home.js?