使用GLSL着色器將X，Z坐標轉換為RGB

Question

我有一個三js場景，其中包含一個以原點為中心的100x100平面（即，最小坐標：（-50，-50），最大坐標：（50,50））。 我試圖通過在自定義glsl着色器中使用x和z坐標將平面顯示為色輪。 使用本指南 （請參閱極坐標中的HSB，朝頁面底部），我已經使用Three.js場景獲取了着色器代碼，但這並不完全正確。

我已經對所有對我有意義的變量進行了調整，但是正如您在屏幕截圖中所看到的，顏色變化的頻率是其應有的兩倍。 我的數學直覺是將角度除以2，但是當我嘗試將其完全錯誤時。

我知道解決方案非常簡單，但是我已經嘗試了幾個小時，但還沒有。

如何將我目前擁有的着色器變成一種可以2pi弧度精確旋轉1次全彩色的着色器？

編輯：這是純文本格式的相關着色器代碼

varying vec3 vColor;
                const float PI = 3.1415926535897932384626433832795;
                uniform float delta;
                uniform float scale;
                uniform float size;

                vec3 hsb2rgb( in vec3 c ){
                    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                                             6.0)-3.0)-1.0,
                                     0.0,
                                     1.0 );
                    rgb = rgb*rgb*(3.0-2.0*rgb);
                    return c.z * mix( vec3(1.0), rgb, c.y);
                }

                void main()
                {
                    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
                    float r = 0.875;
                    float g = 0.875;
                    float b = 0.875;
                    if (worldPosition.y > 0.06 || worldPosition.y < -0.06) {
                        vec2 toCenter = vec2(0.5) - vec2((worldPosition.z+50.0)/100.0, (worldPosition.x+50.0)/100.0);
                        float angle = atan(worldPosition.z/worldPosition.x);
                        float radius = length(toCenter) * 2.0;
                        vColor = hsb2rgb(vec3((angle/(PI))+0.5,radius,1.0));
                    } else {
                        vColor = vec3(r,g,b);
                    }
                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
                    gl_PointSize = size * (scale/length(mvPosition.xyz));
                    gl_Position = projectionMatrix * mvPosition;
                }

Answer 1

我發現我遵循的指南不正確。 我沒有正確考慮數學，但現在知道了問題所在。

atan的范圍是-PI / 2到PI / 2，僅占一個半圈。 當worldPosition.x為負數時，atan將不會返回正確的角度，因為它超出了函數范圍。 需要根據平面中的象限調整角度。

Q1：什么都不做Q2：將PI添加到角度Q3：將PI添加到角度Q4：將2PI添加到角度

之后，將角度歸一化（除以2PI），然后將其傳遞給hsb2rgb函數。