Simulate Fluid Flow

Hi @DenGrz ,

in generally case it is very difficult to display property a fluid flow.

The one possible way I know is to use a shader for the workflow with the map to texture which will move in uv direction.

IN this particular example I think we need 4 different shaders where the texture should move in + and -x and +y and -y for the different parts of the pipe system. Of course we need a picture with a proper texture.

I think in the community we have a post where we did similar techniques

https://community.ptc.com/t5/Vuforia-Studio/Water-flow-visible-after-a-time/m-p/664831#M8186

In this case we need to adapt the direction where the texture is moved according the pipe position and orientation.

The pipe could be a 3D Image /only flat but in 3d space - e.g. 4 images for the different pipes/ or a model which perisist at least of 4 pipe components

We can use  of course one shader but then nwe can set  different flow direction.

Let me check more deeply and will give you feedback /this week

Hi @DenGrz ,

so tested it  and  on a Mobile device seem to work as I suggested in the previous post:

So I used a shader definition from the post I mentioned before  in  :https://community.ptc.com/t5/Vuforia-Studio/Simulate-Fluid-Flow/m-p/670205#M8351

I created a small pipeline assembly - where some of the pipes are define as modelItems and I applied there a shader. Here the shader  uses different values for u,v depending on the pipe postion:

I tested with the follwing code:

var debug=false
$scope.val =0;
$scope.val1 =0;
$scope.app.shaderString="texture_test;scale f 2;moveX f 0;moveY f 0;lightscale f 1.0";

$scope.$on('$ionicView.afterEnter',function(){
 
 $scope.$applyAsync()
})

$rootScope.$on('modelLoaded',function(){
 
 
 for(var i=1;i<6;i++){
//$scope.view.wdg['modelItem-'+i]['texture'] = "app/resources/Uploaded/water.jpg?name=Texture0&edge=repeat";
 $scope.view.wdg['modelItem-'+i]['texture'] = "app/resources/Uploaded/wasser.jpg?name=Texture0&edge=repeat"; 
 $scope.view.wdg['modelItem-'+i]['opacity'] =0.5; 
 $scope.setWidgetProp('modelItem-'+i, 'shader', $scope.app.shaderString);}
 
 $scope.$applyAsync()
 
})
////////////

//========================================================
$scope.app.setShaderNew= function(widgetName,xDir,yDir,delay,duration)
{
var calldelay =3000; //3 seconds
var callduration=10000;//10secs
var jumpInterval=5;
 
 if(delay !=undefined) calldelay = delay;
 if(duration !=undefined) callduration = duration;
 
$timeout( () => {
 
 $interval(function() { 
 
 if($scope.val >500) $scope.val =0
 else $scope.val +=1
 
 var scale= 1.0;
 var moveX= $scope.val/500*xDir;
 var moveY= $scope.val/500*yDir;
 var transp= 0.75+0.25*(Math.sin(12.0*Math.PI*$scope.val/500));//6 waves

 
 $scope.app.shaderString = "texture_test;scale f "+scale+";moveX f "+moveX+";moveY f "+moveY+ ";lightscale f "+transp;
 $scope.setWidgetProp(widgetName, 'shader', $scope.app.shaderString);
 $scope.view.wdg[widgetName]['opacity'] =transp;
 if(debug) console.info( $scope.app.shaderString)
 $scope.$applyAsync()
 }, jumpInterval, callduration/jumpInterval)},calldelay);
$timeout( () => {$scope.setWidgetProp(widgetName,'shader',"Default")},calldelay+callduration);
};
//
$scope.app.myButtonFunction= function( ){ 
 $scope.app.setShaderNew('modelItem-1', 1.0, 0.0,2000,15000)
 $scope.app.setShaderNew('modelItem-2', 1.0, 0.0,2000,15000)
 $scope.app.setShaderNew('modelItem-3', 0.0, 1.0,2000,15000)
 $scope.app.setShaderNew('modelItem-4',-1.0, 0.0,2000,15000)
 $scope.app.setShaderNew('modelItem-5', 0.0,-1.0,2000,15000)
 
 }

The pipeline assemy was created in Creo Parametric and exported to pvz:

When assembling the pipes , I inserted the components always in the flow direction - means z-axis was in flow direction

Here the shader definition in the tml Text widget:

<script name="texture_test" type="x-shader/x-fragment">

 precision mediump float;
uniform sampler2D Texture0;
uniform float lightscale;// light intensity
uniform float scale;
uniform float moveX;
uniform float moveY;
 // determine varying parameters
 varying vec3 N;
 varying vec4 vertexCoord;

 // determine shader input parameters
 uniform vec4 surfaceColor;
 

 const vec3 lightPos = vec3(0.5, 0.5,3.0);//light postion see the pulb in model
 const vec4 ambientColor = vec4(0.5, 0.5, 0.5, 1.0);

 void main() {

 // calc the dot product and clamp based on light position
 // 0 -> 1 rather than -1 -> 1
 
 // ensure everything is normalized
 vec3 lightDir = -(normalize(lightPos)); 
 vec3 NN = normalize(N);

 // calculate the dot product of the light to the vertex normal
 float dProd = max(0.0, dot(NN, -lightDir));

 
 {
 // calculate the color based on light-source and shadows on model
	 vec2 TexCoord = vec2( vertexCoord )*scale;
 TexCoord.x=TexCoord.x+moveX;
 TexCoord.y=TexCoord.y+moveY;
	 vec4 color = texture2D(Texture0, TexCoord) ;
 gl_FragColor = (ambientColor*lightscale + vec4(dProd)) *color ;// surfaceColor;
 }
 }
</script>

<script name="texture_test" type="x-shader/x-vertex">

 attribute vec3 vertexPosition; 
 attribute vec3 vertexNormal;

 varying vec3 N;
 varying vec4 vertexCoord;

 uniform mat4 modelMatrix;
 uniform mat4 modelViewProjectionMatrix;

 void main() {

 vec4 vp = vec4(vertexPosition, 1.0);
 gl_Position = modelViewProjectionMatrix * vp;
 vertexCoord = modelMatrix*vp;

 // the surface normal vector
 N = vec3(normalize(modelMatrix* vec4(vertexNormal,0.0)));
 }


</script>