Help In Shader Urgently Please

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

Code (CSharp):

1. Shader "3DGraph/Michelson"
2. {
3.     Properties
4.     {
5.         [Header(3D or 2D)]
6.         [Toggle(_2D)] _2d("2D", Float) = 0
7.  
8.         [Header(Main Texture Color Gradient)]
9.         _Color("Color for Texture", Color) = (1,1,1,1)
10.         _MainTex("Albedo Script", 2D) = "white" {}
11.         _UVtiling("UV Vertex Tiling",float) = 1.0
12.         _Glossiness("Smoothness", Range(0,1)) = 0.5
13.         _Metallic("Metallic", Range(0,1)) = 0.0
14.  
15.  
16.         [Header(Graph XY Ranges)]
17.         _xMax("X Max",Range(-10,10)) = 5.0
18.         _xMin("X Min",Range(-10,10)) = 1.0
19.         _yMax("Y Max",Range(-10,10)) = 5.0
20.         _yMin("Y Min",Range(-10,10)) = 1.0
21.         Power("Power",float) = 1000
22.  
23.         [Header(Graph Function Index)]
24.         _functionIndex("Function Index",int) = 0
25.  
26.         [Header(Function Values)]
27.         lamda("Lamda",float) = 600
28.         _m1("m1",float) = 12.0
29.         _m2("m2",float) = 2.0
30.        _Magnification("Magnification", float) = 50.0
31.  
32.         [Header(Slide1 Parameters)]
33.         _thikness1("Thikness",float) = 0.0
34.         _refIndex1("ref.Index",float) = 0.0
35.         _theta1("Theta",Range(0.0,360.0)) = 0.0
36.  
37.         [Header(Slide2 Parameters)]
38.         _thikness2("Thikness",float) = 0.0
39.         _refIndex2("ref.Index",float) = 0.0
40.         _theta2("Theta",Range(0.0,360.0)) = 0.0
41.  
42.  
43.         [Header(Colors Lerp Range)]
44.         _MinMax("elevation Color MinMax XY",vector) = (0,10,0,0)
45.  
46.         [Header(Wire Frame Effect)]
47.         _WireThickness("Wire Thicness",Range(0.01,1.0)) = 0.9
48.         _WireUVTiling("Wire UV Tiling",float) = 20.0
49.  
50.             /* [Header(Wire frame Settings)]
51.             _WireframeColor ("Wireframe Color", Color) = (0, 0, 0)
52.             _WireframeSmoothing ("Wireframe Smoothing", Range(0, 10)) = 1
53.             _WireframeThickness ("Wireframe Thickness", Range(0, 10)) = 1*/
54.     }
55.         SubShader
56.         {
57.             Tags { "RenderType" = "Opaque" }
58.             LOD 200     // for double sided
59.             Cull off
60.  
61.             CGPROGRAM
62.             // Physically based Standard lighting model, and enable shadows on all light types
63.             #pragma surface surf Standard fullforwardshadows vertex:vert
64.             //#pragma geometry MyGeometryProgram
65.  
66.             #pragma shader_feature _2D
67.  
68.             // Use shader model 3.0 target, to get nicer looking lighting
69.             #pragma target 3.0
70.  
71.             sampler2D _MainTex;
72.             sampler2D _ColorTexture;
73.  
74.             //SamplerState sampler_MainTex;
75.  
76.             struct Input
77.             {
78.                 float2 uv_MainTex;
79.                 float3 worldPos;
80.             };
81.  
82.             half _Glossiness;
83.             half _Metallic;
84.             fixed4 _Color;
85.  
86.             // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
87.             // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
88.             // #pragma instancing_options assumeuniformscaling
89.             UNITY_INSTANCING_BUFFER_START(Props)
90.                 // put more per-instance properties here
91.                 UNITY_INSTANCING_BUFFER_END(Props)
92.  
93.             fixed _xMax, _xMin, _yMax, _yMin, _UVtiling;
94.             fixed _thikness1, _refIndex1, _theta1, _thikness2, _refIndex2, _theta2;
95.             fixed Power, lamda, _m1, _m2, _Magnification;
96.             fixed _WireThickness, _WireUVTiling;
97.  
98.             int _functionIndex;
99.  
100.             fixed2 _MinMax;
101.  
102.             static float Pi = 3.1415; // 3.14159265359
103.  
104.             /*float3 _WireframeColor;
105.             float _WireframeSmoothing;
106.             float _WireframeThickness;*/
107.  
108.             #include "Assets/Scripts/3D Graph/Nano/MichelsonGraph/ScriptsAndShaders/MichelsonGraphFunctions.cginc"
109.  
110.             float GetZValue(float x, float y)
111.             {
112.                 /*switch(_functionIndex)
113.                 {
114.                     case 1:
115.                     {return zFunctioncircleNone(x,y);}
116.                     case 2:
117.                     {return zFunctioncircleSilde1(x,y);}
118.                     case 3:
119.                     {return zFunctioncircleSilde2(x,y);}
120.                     case 4:
121.                     {return zFunctioncircleSilde1AndSlide2(x,y);}
122.                     case 5:
123.                     {return zFunctioncircle3(x,y);}
124.                 }*/
125.  
126.                 return zFunctioncircle4(x,y);
127.                 //return zFunctioncircle3(x,y);
128.             }
129.  
130.             fixed4  SpectralColor(float r,float g, float b) // RGB <- lambda l = < 380,780 > [nm]
131.             {
132.  
133.                 if (lamda < 380.0) { r = 0.00; }
134.                 else if (lamda < 400.0) { r = 0.05 - 0.05 * sin(Pi * (lamda - 366.0) / 33.0); }
135.                 else if (lamda < 435.0) { r = 0.31 * sin(Pi * (lamda - 395.0) / 81.0); }
136.                 else if (lamda < 460.0) { r = 0.31 * sin(Pi * (lamda - 412.0) / 48.0); }
137.                 else if (lamda < 540.0) { r = 0.00; }
138.                 else if (lamda < 670.0) { r = 1.00 * sin(Pi * (lamda - 507.0) / 182.0); }
139.                 else if (lamda < 590.0) { r = 0.99 * sin(Pi * (lamda - 540.0) / 104.0); }
140.                 else if (lamda < 730.0) { r = 0.32 - 0.32 * sin(Pi * (lamda - 670.0) / 128.0); }
141.                 else { r = 0.00; }
142.                 if (lamda < 454.0) { g = 0.00; }
143.                 else if (lamda < 617.0) { g = 0.78 * sin(Pi * (lamda - 454.0) / 163.0); }
144.                 else { g = 0.00; }
145.                 if (lamda < 380.0) { b = 0.00; }
146.                 else if (lamda < 400.0) { b = 0.14 - 0.14 * sin(Pi * (lamda - 364.0) / 35.0); }
147.                 else if (lamda < 445.0) { b = 0.96 * sin(Pi * (lamda - 395.0) / 104.0); }
148.                 else if (lamda < 510.0) { b = 0.96 * sin(Pi * (lamda - 377.0) / 133.0); }
149.                 else { b = 0.00; }
150.                 return  fixed4(r,g,b,0.0);
151.             }
152.  
153.             void Unity_IsNan_float(float In, out float Out)
154.             {
155.                 Out = (In < 0.0 || In > 0.0 || In == 0.0) ? In : 0.5;
156.             }
157.  
158.             void vert(inout appdata_full vertexData)
159.             {
160.                 #ifdef _2D
161.  
162.                 #else
163.                     float3 p = vertexData.vertex.xyz;
164.                     float2 uv = vertexData.texcoord.xy - 0.5;
165.                     uv *= _UVtiling;
166.  
167.                     float xRange = _xMax - _xMin;
168.                     float yRange = _yMax - _yMin;
169.  
170.                     float x = xRange * uv.x + _xMin;
171.                     float y = yRange * uv.y + _yMin;
172.  
173.                     float z = GetZValue(x,y);
174.                     float z2 = 0;
175.                     Unity_IsNan_float(z, z2);
176.  
177.                     p.z = z2 * Power * -1;
178.  
179.                     vertexData.vertex.xyz = p;
180.                 #endif
181.             }
182.  
183.             void RectangleLines(fixed2 UV, out fixed Out) // for wireframe effect
184.             {
185.                 float2 d = abs(UV * 2 - 1) - fixed2(_WireThickness, _WireThickness);
186.                 d = 1 - d / max(fwidth(d), 0.0001);
187.                 Out = saturate(min(d.x, d.y));
188.             }
189.  
190.             void surf(Input IN, inout SurfaceOutputStandard o)
191.             {
192.                 #ifdef _2D
193.                     float2 uv = IN.uv_MainTex - 0.5;
194.                     float xRange = _xMax - _xMin;
195.                     float yRange = _yMax - _yMin;
196.  
197.                     float x = xRange * uv.x + _xMin;
198.                     float y = yRange * uv.y + _yMin;
199.  
200.                     float z = GetZValue(x,y);
201.                     float z2 = 0;
202.                     Unity_IsNan_float(z, z2);
203.  
204.                     fixed h = 1.0 - z2;//(_MinMax.y+ z) / (_MinMax.y-_MinMax.x);
205.                     fixed4 c = tex2D(_MainTex, fixed2(h, h)) * _Color;
206.                 #else
207.  
208.                     half4 colorA = SpectralColor(_Color.r, _Color.g, _Color.b);
209.  
210.                     // rescale the range 0.2 .. 0.5 to 0.0 .. 1.0
211.                     fixed desaturation = saturate((IN.worldPos.y * 0.7));
212.  
213.                     // change 0.0 .. 0.5 .. 1.0 to 1.0 .. 0.0 .. 1.0
214.                     //desaturation = abs(desaturation +0.5);       //abs(1-desaturation) this will revese colors
215.  
216.                     // lerp between grey and colorized grey
217.                     fixed3 col = lerp(0.7, colorA.rgb, desaturation);
218.                     if (!IsGammaSpace())
219.                         col = GammaToLinearSpace(col);
220.  
221.                     _Color.rgb = col.rgb;
222.  
223.                     fixed h = (_MinMax.y - IN.worldPos.y) / (_MinMax.y - _MinMax.x);
224.                     fixed4  c = tex2D(_MainTex, fixed2(h,h)) * _Color;
225.                 #endif
226.  
227.                     //_MainTex.sample(samplr_linear_repeat , fixed2(h, h));
228.  
229.  
230.                     fixed result;
231.                     RectangleLines(frac(IN.uv_MainTex * _WireUVTiling), result);
232.  
233.                     //c += tex2D(_ColorTexture, IN.uv_MainTex);
234.                     //lerp(fixed3(1,1,1), fixed3(1,0,0), h);
235.                     o.Albedo = c.rgb * result;
236.                     //o.Albedo = fixed3(h,h,h);
237.  
238.                     o.Metallic = _Metallic;
239.                     o.Smoothness = _Glossiness;
240.                     o.Alpha = c.a;
241.             }
242.  
243.                 ENDCG
244.         } // sub shader
245.             FallBack "Diffuse"
246. } // shader

 

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!

 

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

 

?

 

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?

 

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.