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

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

3D-Guided Service Instructions shader and iphone problem

AlexK
14-Alexandrite

3D-Guided Service Instructions shader and iphone problem

Dear support team,

 

After clicking on a part like the rotor in the 3D-Guided Service Instructions demo experience, it gets highlighted green, but after that goes away it looks shinier. Why does it not go back to "normal"

 

I have tried to adapt the on click ionic popup for a customer experience, but it does not work in view app, it only works in the preview. What could be the problem there? I am using a Iphone SE 2. I can't share the experience right now because of a non disclosure contract. This is the code I'm using:

 

// $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available


// triggered when user clicks on object in the scene
$scope.$on('userpick', function (event, targetName, targetType, eventData) {

    //
    //Look at model and see if it has metadata. If it does, then execute the below code and create an object called metadata
    PTC.Metadata.fromId(targetName)
        .then((metadata) => {

            //
            // variable to pull the value for the occurrence property in the eventData JSON object from the model. Create variable for the currently selected part
            var pathId = JSON.parse(eventData).occurrence
            $scope.currentSelection = targetName + "-" + pathId

            //    
            // create variables based on attribute names from Creo Illustrate for this model. use metadata.get to obtain the data from the JSON properties for this occurrence.
            var partNumber = metadata.get(pathId, 'Display Name');

            //
            // adds an ionic popup when a part is clicked. Show the part number and name of the selected object. &nbsp;</br> adds a line break between the two variables
            var popup = $ionicPopup.show({
                template: '<div>' + partNumber + '</div>',
                scope: $scope
            }); //end of ionic popup

            //
            //highlight the chosen item and set the shader to true
            $scope.hilite([$scope.currentSelection], true);

            //
            // create a function to close the popup and turn off shading. popup is the popup, refitems is the input for the part(s) that is being highlighted 
            var closePopup = function (popup, refitems) {

                //
                //The function returns a method for removing the popup from the screen and turns off the shader
                return function () {

                    //
                    //using the input parts, set the hilite function to be false, removing the shading
                    $scope.hilite(refitems, false)

                    //
                    //apply the .close method, which removes a certain section of a selected object, to the popup variable
                    popup.close()

                } //return end

            } // closepopup function end

            //
            //call the $timeout service which will call the function for closing the popup after 3 seconds (3000 ms)
            $timeout(closePopup(popup, [$scope.currentSelection]), 3000);

        }) //end brackets for PTC API and .then

        // 
        //catch statement if the promise of having a part with metadata is not met
        .catch((err) => { console.log('metadata extraction failed with reason : ' + err) })

}) //end brackets for userpick function. Will continue to move throughout code


// highlighting function. Inputs are the selected part and a boolean for hilite
$scope.hilite = function (items, hilite) {

    //
    //iterate over each item that is used as an imported variable for the function using .forEach to look at each value that comes in the items input
    items.forEach(function (item) {

        //
        //set the properties of the TML 3D Renderer to highlight the selected item using a TML Text shader. "green" is the name of the script for the TML Text.
        tml3dRenderer.setProperties(item, hilite === true ? { shader: "green", hidden: false, opacity: 0.9, phantom: false, decal: true }
            : { shader: "Default", hidden: false, opacity: 1.0, phantom: false, decal: false });

    }) //foreach end

} //hilite function end

  Best wishes,

 

Alex

1 ACCEPTED SOLUTION

Accepted Solutions
AlexK
14-Alexandrite
(To:sdidier)

Hi Samuel,

 

Thanks for your reply. I did some digging and found the issue causing the bug.

 

If I add this piece of Java Script:

 

$scope.$on("$ionicView.afterEnter", function (event) {
    $scope.setWidgetProp('model-1', 'shader', 'Default');  	
});

 

The "Default" shader is sett in the beginning and the party look the same after clicking them. So the "Default shader is not actually the shader set as default in my version of Vuforia Studio.

 

The only problem now is that the "Default" shader looks very bad on non metallic parts. It gives everything a metallic grey shine.

 

I solved it by changing the "Default" to "" in this JS Part:

 

        //set the properties of the TML 3D Renderer to highlight the selected item using a TML Text shader. "green" is the name of the script for the TML Text.
		tml3dRenderer.setProperties(item, hilite === true ? { shader: "green", hidden: false, opacity: 0.9, phantom: false, decal: true }
                                                     	 : { shader: "", hidden: false, opacity: 1.0, phantom: false, decal: false });

 

Best wishes,

 

Alex

View solution in original post

6 REPLIES 6
sdidier
17-Peridot
(To:AlexK)

Hello Alex,

 

If it is doesn't work in Vuforia View in iOS, I would recommend at first to look in the Vuforia View log file.

It is possible to find an error or an exception who can explain the root cause.

 

To find log file, please refer to this article :

https://www.ptc.com/en/support/article?n=CS283816

 

Another thing, what have been modified between the original Javascript source code and the one provided below ?

 

Also, what do you mean by it doesn't work ?

What doesn't append as expected in Preview ?

 

Best regards,

Samuel

AlexK
14-Alexandrite
(To:sdidier)

So the problem is that if I click on a part, nothing happens.

 

I have tried my the code with the quadcopter exercise and only changed the pathID from "Display Name" to "partNumber" and the Parts can be clicked on the phone and display the partnumber.

 

It's strange that it works in the preview, but doesn't work in  view. It seems that in view it cannot recognize the parts.

 

The part of the logfile looks like this for the quadcopter exercise:

2021-06-22 10:29:40.041 ThingBrowser[13692:4375622] tap: X = 508.000000, Y = 690.000000
2021-06-22 10:29:40.058 ThingBrowser[13692:4375732] INFO: AREvent userpick called on Object quadcopter
2021-06-22 10:29:40.059 ThingBrowser[13692:4375622] event [userpick] broadcast on rootScope and dispatched against domID [quadcopter] with type [null], targetName [quadcopter] and data [{"occurrence":"/0/16/0"}]
2021-06-22 10:29:40.157 ThingBrowser[13692:4375622] setProperties/ShaderInfo: ID=quadcopter-/0/16/4, info=green

 

For my experience it looks like this:

2021-06-22 10:31:38.542 ThingBrowser[13692:4375622] Tap on twx-dt-view element at pageX = 295, pageY = 375
2021-06-22 10:31:38.572 ThingBrowser[13692:4375683] INFO: AREvent trackingacquired called on Object
2021-06-22 10:31:38.573 ThingBrowser[13692:4375622] event [trackingacquired] broadcast on rootScope and dispatched against domID [] with type [twx-dt-target], targetName [] and data []
2021-06-22 10:31:40.508 ThingBrowser[13692:4375622] Tap on twx-dt-view element at pageX = 150, pageY = 279
2021-06-22 10:31:40.508 ThingBrowser[13692:4375622] ERROR: exitSpatialPlacementMode

sdidier
17-Peridot
(To:AlexK)

Hello Alex,

 

I suppose that's the root cause is :

event [trackingacquired] broadcast on rootScope and dispatched against domID [] with type [twx-dt-target], targetName [] and data []

and

ERROR: exitSpatialPlacementMode

 

In the first verbose, no 3D Model name is displayed as in the Preview verbose and it is a trackingacquired event instead of an userpick event.

In the second verbose, we are leaving the Spatial Target placement.

It doesn't make sense from my point of view.

Normaly, we should the Spatial Target placement by an AREvent tracking acquired should be enabled.

After that, userpick event should occurs.

 

To troubleshoot a such issue, we need the example Project to reproduce the issue in house at PTC.

 

Best regards,

Samuel

AlexK
14-Alexandrite
(To:sdidier)

Hi Samuel,

 

Thank you for your help, some combination of deleting and adding the model a couple of times worked to fix the issue with the userpick.

 

The shader issue is still there, it can be viewed in the image below, the bottom right rotor on the screen has a lighter or shinier color than the other ones, after I've clicked it. 

AK_9738541_0-1628088055808.png

I've added the project file to this reply.

 

Best wishes,

 

Alex

 

sdidier
17-Peridot
(To:AlexK)

Hello Alex,

 

I have tried on my laptop the Project provided.

Please see the attached video.

I am not able to reproduce the issue in Preview.

 

So, I believe that's an issue who is specific to some computers.

 

Do you have upgraded video graphic card driver ?

 

As a shader is sent and executed in GPU on graphic card, it might be a root cause of this problem.

 

Also, do you reproduce this issue in the mobile in Vuforia View ?

 

Best regards,

Samuel

 

AlexK
14-Alexandrite
(To:sdidier)

Hi Samuel,

 

Thanks for your reply. I did some digging and found the issue causing the bug.

 

If I add this piece of Java Script:

 

$scope.$on("$ionicView.afterEnter", function (event) {
    $scope.setWidgetProp('model-1', 'shader', 'Default');  	
});

 

The "Default" shader is sett in the beginning and the party look the same after clicking them. So the "Default shader is not actually the shader set as default in my version of Vuforia Studio.

 

The only problem now is that the "Default" shader looks very bad on non metallic parts. It gives everything a metallic grey shine.

 

I solved it by changing the "Default" to "" in this JS Part:

 

        //set the properties of the TML 3D Renderer to highlight the selected item using a TML Text shader. "green" is the name of the script for the TML Text.
		tml3dRenderer.setProperties(item, hilite === true ? { shader: "green", hidden: false, opacity: 0.9, phantom: false, decal: true }
                                                     	 : { shader: "", hidden: false, opacity: 1.0, phantom: false, decal: false });

 

Best wishes,

 

Alex

Top Tags