cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Section view or Clipping of model display in Vuforia Studio

Often, we need to display some sections, or we required to have a view of a x-section of the model.

This is in generally no part of the current functionality but there are some approaches which could be helpful.

In this article I want to mention 3 different approaches, which could be used but no one of them is really perfect:

 

1.) uploading different models -  so we can use an additional models for each cut and then we can change the model if you want to display a cut, it means you can make the one model not visible and the display the second model or vice versa.  I tested with cuts created in Creo Illustrate 5.0 and Creo View 5.0 but it seems that Vuforia Studio could not display them /neither as part of sequence or as static to the current figure:

 

2018-10-17_11-04-57.jpg2018-10-17_11-26-56.jpg

 

The only possible  way in this example is to create in Creo an assembly cut /with option cut also on part level  and  then create from there a new .pvz model. 

In this case this seems to work fine:

:

 

2018-10-17_11-14-40.jpg

2018-10-17_11-17-14.jpg2018-10-17_11-19-29.jpg2018-10-17_11-19-14.jpg

 

2.) the second approach is to remove components  step  by step,  so to see the inner components when the outer components are blanked:

2018-10-17_11-28-47.jpg2018-10-17_11-29-05.jpg2018-10-17_11-29-19.jpg

All different components, which should be displayed or blanked, need to be defined as modelItem where we can set the visible property to true or false

Is also possible to blank or display  a list of components where the list is defined in json file. This could be done with JavaScript code. In this case we do not need to define a modelItem widgets.  For more information you can check the post 

 

3.) 

The last most powerful option is to use a shader for the model Widget. So for example we can use some kind of clipping functionality of the model where we can set the x min and x max value or ymin and ymax or zmin and zmax value what should be displayed. This will create a clipping effect. So only the geometry which satisfy this criteria will be displayed.  

 

2019-07-25_18-36-38.jpg

How to achieve a clipping functionality using a shader.

3.1) define a shader - this requires creating a tmlText widget where we can define the shader Code. The code should be inserted into the text property of the tml widget

For the clipping along x axis with planes which are parallel to the  YZ plain we need to define the following javascript with GLSL:

 

<script name="slice_world_based_x" 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>

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

  // this setting is needed for a certain use of properties
  precision mediump float;

  // determine varying parameters
  varying vec3 N;
  varying vec4 vertexCoord;

  // determine shader input parameters
  uniform vec4 surfaceColor;
  uniform float slicex;
  uniform float slicewidth;

  const vec3 lightPos = vec3(1.0, 2.2, 0.5);
  const vec4 ambientColor = vec4(0.3, 0.3, 0.3, 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 current color of vertex, unless it is being clipped...
// only geometry with coordinates which satisfy the condition below
// will be displayed if ( vertexCoord.x > (slicex + slicewidth/2.0) || vertexCoord.x < (slicex - slicewidth/2.0) ) { discard; } else { // calculate the color based on light-source and shadows on model gl_FragColor = (ambientColor + vec4(dProd)) * surfaceColor; } } </script>

Save the tml Text widget .  

 

3.2) You can also define shaders for clipping along the Y and the Z axis. Here you can use the same shader javascript definition but you need to change the shader name and to modify the if  check respectively to the Y or Z coordinate:

 

<script name="slice_world_based_y" type="x-shader/x-vertex">
...
  // calculate current color of vertex, unless it is being clipped...
    if ( vertexCoord.y > (slicex + slicewidth/2.0) || 
         vertexCoord.y <  (slicex - slicewidth/2.0) )
    {    
      discard;   
    } 
    else 
...

 

To set the clipping values for different axes and to control it by   sliders we can use some code like this:

 

$scope.DIR="y";
$scope.slice = function() {
  var slicexCur = ($scope.view.wdg['slider-1']['value']/100.0)-0.5; 
  var slicewidthCur = ($scope.view.wdg['slider-2']['value']/100.0); 
  $scope.view.wdg['modelx']['shader'] = "slice_world_based_"+$scope.DIR+";slicex f "+ slicexCur + ";slicewidth f " + slicewidthCur;
}

////////////////////////////////////////////
$scope.$on('$ionicView.afterEnter', function(){
  // Anything you can think of
  $scope.clickY()
 }); 
///////////////////////////////////////
$scope.clickX=function()
{
$scope.view.wdg['toggle-X']['value'] =true
$scope.view.wdg['toggle-Y']['value'] =false
$scope.view.wdg['toggle-Z']['value'] =false
  $scope.DIR="x"

}
$scope.clickY=function()
{
$scope.view.wdg['toggle-X']['value'] =false
$scope.view.wdg['toggle-Y']['value'] =true
$scope.view.wdg['toggle-Z']['value'] =false
$scope.DIR="y"
}

$scope.clickZ=function()
{
$scope.view.wdg['toggle-X']['value'] =false
$scope.view.wdg['toggle-Y']['value'] =false
$scope.view.wdg['toggle-Z']['value'] =true
  $scope.DIR="z"
}
///////////////////////////////////////

 

Here the slice() function is called in the slider change event (for the both slider widgets).

For better understanding of the functionality you can review the attached Vuforia Studio project

Version history
Revision #:
9 of 9
Last update:
‎07-25-2019 06:12 PM
Updated by:
 
Labels (1)
Attachments
Contributors