Shader concepts in Thingworx Studio

[sselvaraju]

Hi

   Can someone explain me the way shader works in thingworx studio. I could see an example to create vertex and fragment shader but I am not able to find out the way to pass value.

Thanks

Sowmiya

[katte]

Sowmiya, By Shader do you mean opacity of the 3D model?

Giri

[sselvaraju]

Hi Giri

     Thanks for the reply. Yes. I mean the shader concepts used to highlight specific model item by passing r,g,b values. I just need an idea about the way it works.

Thanks

Sowmiya

[katte]

Sowmiya, we have an article on How to change the model color​  technically, I was taking a modelItem and adding filters to it.

Giri

[sselvaraju]

Hi Giri

Thanks for the reply. Think I am not clear with my questions, let me explain you clearly.

I am working on Griip Car example. In that, there is a code to give shader property and shader has been defined in TML text control.

Here is the sample one

           $scope.view.wdg[item]['shader'] = "color;r f "+r+";g f "+g+";b f "+b;

I identified that, the color in above code is shader name defined in TML Text. But I want to know the place where the values of r,g,b is defined , details about TML text like what is it purpose, when do we use that etc., and how values are passed to the inputs defined in shader.

Please let me know if I am not clear on my questions.

Thanks

Sowmiya S

[placatus]

Custom shaders only work in the old renderer (when Thingview is not selected) in Thingworx View.

In Studio, you will have to add a tml widget with the shader pair (vertex+fragment). You can find a shader example below:

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

precision mediump float;

varying vec4 vertexCoord;

uniform vec4 surfaceColor;

void main() {

float sinx = sin(1000.0 * vertexCoord.x);

          float siny = sin(1000.0* vertexCoord.y);

float alpha = 0.5 + abs(sinx*siny);

gl_FragColor = vec4(surfaceColor.x,surfaceColor.y,surfaceColor.z,alpha);

}

</script>

<script name="dots" type="x-shader/x-vertex">

attribute vec4 vertexPosition;

varying vec4 vertexCoord;

uniform mat4 modelViewProjectionMatrix;

uniform vec4 surfaceColor;

void main() {

gl_Position = modelViewProjectionMatrix * vertexPosition;

vertexCoord = gl_Position;

}

</script>

Then, set the shader property of your 3D model to “dots”.

[sselvaraju]

Hi Petrisor Lacatus

           Thanks for the response. I understood that, TML text widget is useful for adding shader. I am not clear with the way the value is passed to defined shader 'dots'. Lets say, in the above example we have attributes such as vertexCoord, surfaceColor,modelViewProjectionMatrix. It would be helpful if you explain me the way to pass value for those parameters.

Thanks

Sowmiya S

[GregBrown]

Sowmiya , did you ever make progress on this? I (and probably others) would be very interested.

Greg

[GregBrown]

{Thread resurrection}

Are there any more examples of shader pairs out there? It would be great to be able to play around with some more examples...