6 Replies Latest reply on Mar 15, 2017 2:56 AM by sselvaraju RSS
    sselvaraju 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

      • Re: Shader concepts in Thingworx Studio
        giri Communicator

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

         

        Giri

          • Re: Shader concepts in Thingworx Studio
            sselvaraju Newbie

            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

              • Re: Shader concepts in Thingworx Studio
                giri Communicator

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

                 

                Giri

                  • Re: Shader concepts in Thingworx Studio
                    sselvaraju Newbie

                    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

                      • Re: Shader concepts in Thingworx Studio
                        placatus Newbie

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

                          • Re: Shader concepts in Thingworx Studio
                            sselvaraju Newbie

                            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