How to associate my image texture UV on my 3D Model

For OBJ files with textures to work reliably, all files should be combined into a ZIP archive before uploading to Vuforia Studio. Add the OBJ, MTL, and and texture graphics into a single zip file, and use the Upload Resource operation to load it into Vuforia Studio.

If that doesn't solve the problem, it may be something about the OBJ or MTL file that isn't right. Can you load the OBJ into other software (e.g. Blender) and see it with the texture applied correctly?

Hi @vincentdesign ,

I think the pointed document by @ClayHelberg  is a helpful info.

I want here to add an addtional information to the issue.

So currently the workflow is the following:

1.) we will create the CAD data in any CAD tools /   Creo Parametric or any AutoDesk , Catia, Solidwors and etc. / In generally when we prepare the model for the AR usage and there /in the CAD tool/ we will also assigned the texture to a model, component or particular surfaces. So means  the native CAD data will contain already the texture/'s before we will try to use it in Vuforia Studio

2.) So to use the data in Vuforia Studio we need to import it. The import tool is a part of studio and will convert the geometry . Internal Studio used the optimizer tool (here want to refer to the post: "Optimize PVZ before")

So means that the native cad data is converted always to PTC light ware format pvz. According to rcp. setting it will  import also the textures or will not import them.

So this is the most used way to use textures in Vuforia Studio.  Also UV setting are something what should be set in the CAD tool - e.g. in Creo Parametric:

3.) In case that we have a texture file  and want to assigned it to a model or modelItem  using some U V parameters in Vuforia Studio  this will make it more difficult. It is possible but you need to define an GLSL shader in the tmlText widget and assigned to the shader property. The glsl shader will used also the file refer in the texture property and could display it projected on the UV model geometry:

e.g. in Javascript;

$scope.app.shaderString="texture_test;scale f 2;moveX f 0;moveY f 0";
$rootScope.$on('modelLoaded', function() {
$scope.view.wdg['modelItem-1']['texture'] = "app/resources/Uploaded/cvc.jpg?name=Texture0&edge=repeat";
$scope.setWidgetProp('modelItem-1', 'shader', $scope.app.shaderString);
$scope.view.wdg['3DImage-1']['src'] = "app/resources/Uploaded/pinger_half.png?name=Texture0&edge=mirror";
$scope.setWidgetProp('3DImage-1', 'shader',$scope.app.shaderString);
})

Here the pictures are created in project wher I used the following tmlText defintion. Please, pay attention that it is not a solution , but more only an example which display the general usage. If you need more to optimize the display you need to do some improvements - ,please, refer to some addtional links:

https://wiki.delphigl.com/index.php/Tutorial_glsl2

https://viscircle.de/einsteigerguide-einfuehrung-in-glsl/

https://stackoverflow.com/questions/27646383/glsl-shader-for-texture-smoke-effect

or lot of other links / key words glsl  fragmet vertex shader defintion, web.gl javascipt/

So in this example I used the following test shader code:

<script name="texture_test" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D Texture0;
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(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 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 + 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>

The glsl code should be added in the text area of the tmlText widget: