Help In Shader Urgently Please

[m-y]

Hello , I believe someone Can do it !
The problem is blow my mind about 7 Days right now trying to Achieve something
the problem is the Shader doesn’t work the same on All WebGl PCs
I mean
if we are 10 Persons
8 Persons will get some values
2 Persons will get little bit different values
Any one can Give me a magic line to work the same on all kind of webgl Devices PC’s
that is my Shader

The problem is that some Devices have
this Result

And others Have this

when you increase the ref index

some WebGL pcs get this result

But others Are not At all

Shader "3DGraph/Michelson"
{
    Properties
    {
        [Header(3D or 2D)]
        [Toggle(_2D)] _2d("2D", Float) = 0

        [Header(Main Texture Color Gradient)]
        _Color("Color for Texture", Color) = (1,1,1,1)
        _MainTex("Albedo Script", 2D) = "white" {}
        _UVtiling("UV Vertex Tiling",float) = 1.0
        _Glossiness("Smoothness", Range(0,1)) = 0.5
        _Metallic("Metallic", Range(0,1)) = 0.0


        [Header(Graph XY Ranges)]
        _xMax("X Max",Range(-10,10)) = 5.0
        _xMin("X Min",Range(-10,10)) = 1.0
        _yMax("Y Max",Range(-10,10)) = 5.0
        _yMin("Y Min",Range(-10,10)) = 1.0
        Power("Power",float) = 1000

        [Header(Graph Function Index)]
        _functionIndex("Function Index",int) = 0

        [Header(Function Values)]
        lamda("Lamda",float) = 600
        _m1("m1",float) = 12.0
        _m2("m2",float) = 2.0
       _Magnification("Magnification", float) = 50.0

        [Header(Slide1 Parameters)]
        _thikness1("Thikness",float) = 0.0
        _refIndex1("ref.Index",float) = 0.0
        _theta1("Theta",Range(0.0,360.0)) = 0.0

        [Header(Slide2 Parameters)]
        _thikness2("Thikness",float) = 0.0
        _refIndex2("ref.Index",float) = 0.0
        _theta2("Theta",Range(0.0,360.0)) = 0.0


        [Header(Colors Lerp Range)]
        _MinMax("elevation Color MinMax XY",vector) = (0,10,0,0)

        [Header(Wire Frame Effect)]
        _WireThickness("Wire Thicness",Range(0.01,1.0)) = 0.9
        _WireUVTiling("Wire UV Tiling",float) = 20.0

            /* [Header(Wire frame Settings)]
            _WireframeColor ("Wireframe Color", Color) = (0, 0, 0)
            _WireframeSmoothing ("Wireframe Smoothing", Range(0, 10)) = 1
            _WireframeThickness ("Wireframe Thickness", Range(0, 10)) = 1*/
    }
        SubShader
        {
            Tags { "RenderType" = "Opaque" }
            LOD 200     // for double sided
            Cull off

            CGPROGRAM
            // Physically based Standard lighting model, and enable shadows on all light types
            #pragma surface surf Standard fullforwardshadows vertex:vert
            //#pragma geometry MyGeometryProgram

            #pragma shader_feature _2D

            // Use shader model 3.0 target, to get nicer looking lighting
            #pragma target 3.0

            sampler2D _MainTex;
            sampler2D _ColorTexture;

            //SamplerState sampler_MainTex;

            struct Input
            {
                float2 uv_MainTex;
                float3 worldPos;
            };

            half _Glossiness;
            half _Metallic;
            fixed4 _Color;

            // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
            // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
            // #pragma instancing_options assumeuniformscaling
            UNITY_INSTANCING_BUFFER_START(Props)
                // put more per-instance properties here
                UNITY_INSTANCING_BUFFER_END(Props)

            fixed _xMax, _xMin, _yMax, _yMin, _UVtiling;
            fixed _thikness1, _refIndex1, _theta1, _thikness2, _refIndex2, _theta2;
            fixed Power, lamda, _m1, _m2, _Magnification;
            fixed _WireThickness, _WireUVTiling;

            int _functionIndex;

            fixed2 _MinMax;

            static float Pi = 3.1415; // 3.14159265359

            /*float3 _WireframeColor;
            float _WireframeSmoothing;
            float _WireframeThickness;*/

            #include "Assets/Scripts/3D Graph/Nano/MichelsonGraph/ScriptsAndShaders/MichelsonGraphFunctions.cginc"

            float GetZValue(float x, float y)
            {
                /*switch(_functionIndex)
                {
                    case 1:
                    {return zFunctioncircleNone(x,y);}
                    case 2:
                    {return zFunctioncircleSilde1(x,y);}
                    case 3:
                    {return zFunctioncircleSilde2(x,y);}
                    case 4:
                    {return zFunctioncircleSilde1AndSlide2(x,y);}
                    case 5:
                    {return zFunctioncircle3(x,y);}
                }*/

                return zFunctioncircle4(x,y);
                //return zFunctioncircle3(x,y);
            }

            fixed4  SpectralColor(float r,float g, float b) // RGB <- lambda l = < 380,780 > [nm]
            {

                if (lamda < 380.0) { r = 0.00; }
                else if (lamda < 400.0) { r = 0.05 - 0.05 * sin(Pi * (lamda - 366.0) / 33.0); }
                else if (lamda < 435.0) { r = 0.31 * sin(Pi * (lamda - 395.0) / 81.0); }
                else if (lamda < 460.0) { r = 0.31 * sin(Pi * (lamda - 412.0) / 48.0); }
                else if (lamda < 540.0) { r = 0.00; }
                else if (lamda < 670.0) { r = 1.00 * sin(Pi * (lamda - 507.0) / 182.0); }
                else if (lamda < 590.0) { r = 0.99 * sin(Pi * (lamda - 540.0) / 104.0); }
                else if (lamda < 730.0) { r = 0.32 - 0.32 * sin(Pi * (lamda - 670.0) / 128.0); }
                else { r = 0.00; }
                if (lamda < 454.0) { g = 0.00; }
                else if (lamda < 617.0) { g = 0.78 * sin(Pi * (lamda - 454.0) / 163.0); }
                else { g = 0.00; }
                if (lamda < 380.0) { b = 0.00; }
                else if (lamda < 400.0) { b = 0.14 - 0.14 * sin(Pi * (lamda - 364.0) / 35.0); }
                else if (lamda < 445.0) { b = 0.96 * sin(Pi * (lamda - 395.0) / 104.0); }
                else if (lamda < 510.0) { b = 0.96 * sin(Pi * (lamda - 377.0) / 133.0); }
                else { b = 0.00; }
                return  fixed4(r,g,b,0.0);
            }

            void Unity_IsNan_float(float In, out float Out)
            {
                Out = (In < 0.0 || In > 0.0 || In == 0.0) ? In : 0.5;
            }

            void vert(inout appdata_full vertexData)
            {
                #ifdef _2D

                #else
                    float3 p = vertexData.vertex.xyz;
                    float2 uv = vertexData.texcoord.xy - 0.5;
                    uv *= _UVtiling;

                    float xRange = _xMax - _xMin;
                    float yRange = _yMax - _yMin;

                    float x = xRange * uv.x + _xMin;
                    float y = yRange * uv.y + _yMin;

                    float z = GetZValue(x,y);
                    float z2 = 0;
                    Unity_IsNan_float(z, z2);

                    p.z = z2 * Power * -1;

                    vertexData.vertex.xyz = p;
                #endif
            }

            void RectangleLines(fixed2 UV, out fixed Out) // for wireframe effect
            {
                float2 d = abs(UV * 2 - 1) - fixed2(_WireThickness, _WireThickness);
                d = 1 - d / max(fwidth(d), 0.0001);
                Out = saturate(min(d.x, d.y));
            }

            void surf(Input IN, inout SurfaceOutputStandard o)
            {
                #ifdef _2D
                    float2 uv = IN.uv_MainTex - 0.5;
                    float xRange = _xMax - _xMin;
                    float yRange = _yMax - _yMin;

                    float x = xRange * uv.x + _xMin;
                    float y = yRange * uv.y + _yMin;

                    float z = GetZValue(x,y);
                    float z2 = 0;
                    Unity_IsNan_float(z, z2);

                    fixed h = 1.0 - z2;//(_MinMax.y+ z) / (_MinMax.y-_MinMax.x);
                    fixed4 c = tex2D(_MainTex, fixed2(h, h)) * _Color;
                #else

                    half4 colorA = SpectralColor(_Color.r, _Color.g, _Color.b);

                    // rescale the range 0.2 .. 0.5 to 0.0 .. 1.0
                    fixed desaturation = saturate((IN.worldPos.y * 0.7));

                    // change 0.0 .. 0.5 .. 1.0 to 1.0 .. 0.0 .. 1.0
                    //desaturation = abs(desaturation +0.5);       //abs(1-desaturation) this will revese colors

                    // lerp between grey and colorized grey
                    fixed3 col = lerp(0.7, colorA.rgb, desaturation);
                    if (!IsGammaSpace())
                        col = GammaToLinearSpace(col);

                    _Color.rgb = col.rgb;

                    fixed h = (_MinMax.y - IN.worldPos.y) / (_MinMax.y - _MinMax.x);
                    fixed4  c = tex2D(_MainTex, fixed2(h,h)) * _Color;
                #endif

                    //_MainTex.sample(samplr_linear_repeat , fixed2(h, h));


                    fixed result;
                    RectangleLines(frac(IN.uv_MainTex * _WireUVTiling), result);

                    //c += tex2D(_ColorTexture, IN.uv_MainTex);
                    //lerp(fixed3(1,1,1), fixed3(1,0,0), h);
                    o.Albedo = c.rgb * result;
                    //o.Albedo = fixed3(h,h,h);

                    o.Metallic = _Metallic;
                    o.Smoothness = _Glossiness;
                    o.Alpha = c.a;
            }

                ENDCG
        } // sub shader
            FallBack "Diffuse"
} // shader

[jamespaterson]

Are these screenshots from different pcs? Do they have different graphics cards in them? Perhaps the issue is variation in floating point accuracy? As an aside you seem to have a bit of a mix of half, fixed and float variable types in that code. Have you tried turning them all to float? Good luck!

[m-y]

They All Test on Browsers using integrated Graphic Card
Intel Graphic Card

[m-y]

?

[jamespaterson]

Tbh not sure there is that much more i can suggest. Did you try changing the variable types to all float? Perhaps @bgolus might have some ideas please?

[bgolus]

Is it the same Intel Integrated GPU, or are they different generations? Trig functions (like sin() or atan()) are often slightly different between different GPUs, even from the same manufacturer, and sometimes even between the same generation.

On top of that WebGL is going to be highly dependent on the browser it’s running in. WebGL, like most variants of OpenGL, have their shaders compiled at runtime, which means the “platform” can change how it gets compiled. In WebGL’s case, that’s the browser, OS, and GPU hardware. Different versions of the same browser may have different behaviors due to changes in how it treats WebGL. This may come in the form of cross compilers that convert the GLSL of the WebGL shaders into HLSL for Direct3D, or wrappers that convert the WebGL rendering calls into Direct3D or desktop OpenGL, or it may just pass the WebGL shaders and rendering calls straight on.

However all of that may not be the problem at all. The above looks like moire interference patterns. I suspect by slightly adjusting the camera angle & window resolution you could produce all of the above results on the same system.