topic Simulate Fluid Flow in Vuforia Studio

Simulate Fluid Flow

DenGrz — Mon, 08 Jun 2020 07:25:05 GMT

Hello,

is it possible to represent a fluid flow just like it shown in the video?

How can i achieve that? With JS or JS and the TML-Widget?

Thanks you for every tip.

Re: Simulate Fluid Flow

RolandRaytchev — Mon, 08 Jun 2020 07:50:54 GMT

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

Re: Simulate Fluid Flow

RolandRaytchev — Mon, 08 Jun 2020 08:04:13 GMT

I want to mention that shaders with GLSL , so far I know , are working only on mobile platforms - IOS and Android. I did not manage yet to get it working on HoloLens. But I believe this could change.

Currently shaders are possible on the HoloLens but with another tool / MRTK - API https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/GettingStartedWithTheMRTK.html

Which is not supported in Studio yet. Therefore, for HoloLens device I have no idea how to implement such shader. I see that dev team is considering and working on such solution but have no information about the implementation.

If somebody have idea for the HoloLens it will be nice to share it here. Thanks!

Re: Simulate Fluid Flow

RolandRaytchev — Mon, 08 Jun 2020 14:10:40 GMT

Hi @DenGrz ,

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

(view in My Videos)

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:

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:

Re: Simulate Fluid Flow

DenGrz — Tue, 09 Jun 2020 07:14:11 GMT

Yes thats looks very good!

And is it also possible to have an red flow and a blue flow e.g for the hot and cold water ?

You use an jpg. for the texture ? There do you find this jpg ?

Thanks in advance.

Re: Simulate Fluid Flow

DenGrz — Tue, 09 Jun 2020 08:15:38 GMT

Hi @RolandRaytchev ,

I tested it on my model. But in this moment it doesn´t work.

I have a model with several pipelines and they have different x,y and z coord.

I have to change definitely the js code and/ or the tml text ?

Thanks in advance.

Re: Simulate Fluid Flow

RolandRaytchev — Tue, 09 Jun 2020 10:33:42 GMT

Hi @DenGrz ,

no Idea what could be the problem.

As mentioned it should work only on mobile platform (preview, ios and android) but not on HoloLens device.

Here attached the sample project. May be you can test if it works in your environment and if it works then see what is the difference. Then ,please , let me know if you have success with it. Thanks!

Re: Simulate Fluid Flow

DenGrz — Tue, 09 Jun 2020 12:07:49 GMT

Hi @RolandRaytchev ,

I tested it with the sample project and it works perferctly. Thanks for it!

Now i would like to include one thing.

I would like to bring more modelIteams with an other jpg.

I copy and paste the same code but with the new modelIteams and the other jpg.

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<13;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=250;

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)



}







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<13;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/Fluid_Blau.png?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=250;

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-6', 0.0,-1.0,2000,15000)
$scope.app.setShaderNew('modelItem-7', 0.0,-1.0,2000,15000)
$scope.app.setShaderNew('modelItem-8', 0.0,-1.0,2000,15000)
$scope.app.setShaderNew('modelItem-9', 0.0,-1.0,2000,15000)
$scope.app.setShaderNew('modelItem-10', 0.0,-1.0,2000,15000)
$scope.app.setShaderNew('modelItem-11', 0.0,-1.0,2000,15000)
$scope.app.setShaderNew('modelItem-12', 0.0,-1.0,2000,15000)



}

In the modelIteam 6-12 i see the flow, but modelIteam 1-5 is nothing.

There can be my mistake?

Thanks in advance.

Re: Simulate Fluid Flow

RolandRaytchev — Tue, 09 Jun 2020 13:33:52 GMT

I am not sure, but it seems that you copied the whole code 2 times / when I interperted correctly you message. In this case you will override partially the code from modelItem 1-5 by the second code and the initialization of item 1- 5 were lost.

You need to use the same code but for more items e.g.:

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) $scope.app.setShaderNew('modelItem-6', 0.0,-1.0,2000,15000) $scope.app.setShaderNew('modelItem-7', 0.0,-1.0,2000,15000) $scope.app.setShaderNew('modelItem-8', 0.0,-1.0,2000,15000) $scope.app.setShaderNew('modelItem-9', 0.0,-1.0,2000,15000) $scope.app.setShaderNew('modelItem-10', 0.0,-1.0,2000,15000) $scope.app.setShaderNew('modelItem-11', 0.0,-1.0,2000,15000) $scope.app.setShaderNew('modelItem-12', 0.0,-1.0,2000,15000) }

Also it depends on the size of the picture and also on the creation of the model , how is the position of the texture uv coordinates. But this to be tested more detailed on the test project.

Re: Simulate Fluid Flow

DenGrz — Wed, 10 Jun 2020 09:40:26 GMT

OK. With the same jpg file for alle modelIteams it work perfect.

And if i would like to have for the different modelIteams use other jpg´s.

How would be the js code ?

E.g i tested it like the following code. But it doesn´t work so.

 

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

$scope.view.wdg['modelItem-2']['texture'] = "app/resources/Uploaded/Fluid_Blau.png?name=Texture0&edge=repeat"; 
$scope.view.wdg['modelItem-2']['opacity'] =0.5; 
$scope.setWidgetProp('modelItem-2', 'shader', $scope.app.shaderString);}

$scope.view.wdg['modelItem-3']['texture'] = "app/resources/Uploaded/Fluid_Blau.png?name=Texture0&edge=repeat"; 
$scope.view.wdg['modelItem-3']['opacity'] =0.5; 
$scope.setWidgetProp('modelItem-3', 'shader', $scope.app.shaderString);}



$scope.$applyAsync()

})
////////////

In this example the modelIteam 2 and 3 had a other jpg file.

How can be the right code looks like?

Thanks in advance.

Re: Simulate Fluid Flow

RolandRaytchev — Wed, 10 Jun 2020 10:01:59 GMT

I did simple searcheon google water pictures

https://www.google.com/search?safe=active&rlz=1C1GCEV_en&sxsrf=ALeKk00FTusUGWuvU0F77nJr3rERfvsbxQ:1591782882975&q=water+pictures&tbm=isch&chips=q:water+pictures,g_1:wallpaper&sa=X&ved=2ahUKEwiP-bGq_fbpAhUPTxUIHVQvDXkQgIoDKAJ6BAgKEAY&biw=914&bih=582&dpr=1.75

So if you search for "red water pictures" - you can find some pictures 2-3 pictures which could be used- need to have a wave texture to see beter the flow when you move the texture in x or y direction.

Re: Simulate Fluid Flow

RolandRaytchev — Wed, 10 Jun 2020 10:08:30 GMT

sorry I did answer only for the first part of your question. Need to check more detailed.

I think it depends on the size an on the texture structure. Could you privde the files/ textures where it does not work

In generally the same code should work for all - mapping from 0-1 but may it requires for different sizes of the pictures which is used as texture different ratio for the mapping parameter in the texture. So I need to check it more detailed on the sample picutures wher it does not work

Re: Simulate Fluid Flow

RolandRaytchev — Wed, 10 Jun 2020 16:22:30 GMT

Hi @DenGrz ,

today I tested the issue further with a pipe in z-direction and see there - then the " shader did not work. And this seems to be a problem of the shader implementation it self. Because when I rotate the pipe in the Y direction then was working fine. It works only flat in the x,y plane. So , this required to check the shader implementation more detailed. The solution is some kind of rotation of the shader along the Y -axis:

(view in My Videos)

So changed the shader defintion (for the red pipes) to this - added addtional argument for Z-roation:

And here the usage in the code:

... $scope.app.shaderString1="texture_test1;scale f .5;moveX f 0;moveY f 0;rotZ f 90.0;lightscale f 1.0"; ... //in init function for(var j=6;j<8;j++){ $scope.view.wdg['modelItem-'+j]['texture'] = "app/resources/Uploaded/waterred.jpg?name=Texture0&edge=repeat"; $scope.setWidgetProp('modelItem-'+j, 'shader', $scope.app.shaderString1);} $scope.$applyAsync() ... //======================================================== $scope.app.setShaderNew1= function(widgetName,scalepar,xDir,yDir,zRot,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= parseFloat(scalepar); var moveX= $scope.val/500*xDir; var moveY= $scope.val/500*yDir; var rotZ= zRot; var transp= 0.75+0.25*(Math.sin(12.0*Math.PI*$scope.val/500));//6 waves $scope.app.shaderString = "texture_test1;scale f "+scale+";moveX f "+moveX+";moveY f "+moveY+ ";rotZ f "+rotZ+ ";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, 1.0, 0.0,2000,15000) $scope.app.setShaderNew('modelItem-2', 1.0, 1.0, 0.0,2000,15000) $scope.app.setShaderNew('modelItem-3', 1.0, 0.0, 1.0,2000,15000) $scope.app.setShaderNew('modelItem-4', 1.0,-1.0, 0.0,2000,15000) $scope.app.setShaderNew('modelItem-5', 1.0, 0.0,-1.0,2000,15000) // here the new call $scope.app.setShaderNew1('modelItem-6', 1.0, 1.0, 0.3, 90.0,2000,15000) $scope.app.setShaderNew1('modelItem-7', 1.0, 1.0, 0.3,-90.0,2000,15000) }

So now it will works with a fluid flow in all directions:

Re: Simulate Fluid Flow

DenGrz — Thu, 11 Jun 2020 07:06:36 GMT

Yes that´s looks very good.

Could you please send me the updated sample project ?

Thanks!

Re: Simulate Fluid Flow

DenGrz — Fri, 12 Jun 2020 06:54:52 GMT

Hi @RolandRaytchev ,

yes. It looks exactly like I've imagined.

If you could send the updated sample project ?

It would be very helpful.

Thanks in advance !

Re: Simulate Fluid Flow

RolandRaytchev — Mon, 15 Jun 2020 07:58:30 GMT

Sure, here I attached the updated project (Studio ) . If required I could provide the Creo (7.0) assembly- in this case , please, let me know.

Re: Simulate Fluid Flow

RK_9229814 — Tue, 03 Aug 2021 12:31:39 GMT

Hi Roland,

We have tried this fantastic fluid flow in our experience.

However we are not able to reset the shader.

can you please help us in it?