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

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

Shader concepts in Thingworx Studio

sselvaraju
1-Newbie

Shader concepts in Thingworx Studio

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

8 REPLIES 8

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

Giri

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

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

Giri

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
5-Regular Member
(To:sselvaraju)

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”.

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

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

Greg

{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...

Top Tags