Apply realistic aspects to the model and the surrounding environment

[Matteo_1987]

Goodmorning everyone,

in the Studio I saw that there is the possibility to apply shader and texture models in order to have realistic effects on the components.

Moreover, in an experience made by PTC Italia for Dallara I have seen that a scene background very similar to that of Creo Parametric can be applied.

Explain in detail how to do the 2 operations?

Thank you,

Matteo.

[sdidier]

Good afternoon Matheo,

To apply a GLSL vertex and fragment shader program, you can follow the steps described in this thead.

https://community.ptc.com/t5/Studio/Shader-concepts-in-Thingworx-Studio/td-p/517129

To be honest, I didn't check it myself.

I am doing it.

By the way, shaders are small program execute on graphic card hardware.

It is very sensitive.

I mean, it depends of various versions and capabilities of 3D hardware.

So, a shader program can run perfectly on some platform and not on some other.

Something, we can have bug and crash of software.

To apply a scene background, I will use the skybox concept.

It is a big 3D box who displays 6 textures/images who are linked together.

Some example of skybox textures.

https://www.kisspng.com/png-skybox-texture-mapping-cube-mapping-sky-cloud-920475/

To manage this 3D box, in Vuforia Studio, I presume that the best is to use 6 3D Image widgets.

Create them with a very big size and linked all seams together to have a 3D box.

Orient them to have the texture inside.

Apply the correct images for each 3D image widgets.

By the way, it is necessary to be never outside the 3D box.

Another possible solution to render skybox is to use a shader. 

I have this example :

http://antongerdelan.net/opengl/cubemaps.html

It is more complex from my point of view and need an access in OpenGL API.

I don't know a way today, to have an access to OpenGL API with Javascript.

I will ask to R&D if something exist that in Vuforia Studio. 

Best regards,

Samuel

[sdidier]

Hello,

I just made some progress.

I am able to apply a shader on a 3D Model.

I have follow up the Thread Community provided to load shader program in Vuforia Project.

It is clear enough, no need to add more details.

To apply the shader to 3D model, I made that :

1. Create a javascript function in home.js of my View

$scope.applyShader = function () {
  	$scope.view.wdg['model-With-Shader']['shader'] = 'dots';
}  

The function is named applyShader();

In my 3D Model named 'model-With-Shader', in shader property (who is not displayed in Vuforia Studio), I am applying the vertex and fragment shaders named dots and uploaded in TML widget.

2. In my 3D object Propetries, I call the function applyShader(); in the Click event.

3. Run the Preview

4. 3D Model is visible

5. Click on it

6. 3D Model disappears!

7. In Console, in Chrome, I have these error messages :

WebGL: INVALID_OPERATION: drawElements: no valid shader program in use
_glDrawElements @ VM8228 libthingview_wasm.js:1

So, I suppose that the previous shader is not correct.

I am working on a more simple one.

By the way, I will try to find how to pass paramters to shaders.

GLSL Shaders can have uniform variables who need a value.

Best regards,

Samuel

[sdidier]

Hello Matheo,

I have found details in this thread too :

https://community.ptc.com/t5/Studio/Add-shaders-and-particle-system-effects-to-models-in-thingworx/m-p/537232#M3249%3F&posno=2&q=thingworx%20studio%20shader&source=search

So, in a TML widget, I have added this GLSL shader:

<script name="dots" type="x-shader/x-vertex">
uniform float v_pos;

attribute vec3 vertexPosition;
varying vec4 vertexColor;

void main(void) {
   gl_Position = vec4(vertexPosition, v_pos);
   vertexColor = (gl_Position * 0.5) + 0.5;
}
</script>
<script name="dots" type="x-shader/x-fragment">
uniform mediump float v_time;
varying lowp vec4 vertexColor;
 
void main(void) {
  gl_FragColor = vertexColor*0.75 + vertexColor * v_time;
}
</script>

More details about it works in this web site :

https://gamedevelopment.tutsplus.com/tutorials/getting-started-in-webgl-part-1-introduction-to-shaders--cms-26208

In Home.js, I have updated the function :

$scope.applyShader = function () {
  	var d = new Date();
	var n = d.getUTCMilliseconds() / 100;
  
    $scope.view.wdg['model-With-Shader']['shader'] = "dots;v_pos f 0.05;v_time f "+ n;
}  

getUTCMilliseconds is used to have millisecond between each frame and pass this value to the fragment shader into the v_time parameter.

I will try to apply a fur shader, just for fun.

Hope that's help for shader in Vuforia View.

Best regards,

Samuel