Question

我有一个3 js场景，其中包含一个以原点为中心的100x100平面（即，最小坐标：（-50，-50），最大坐标：（50,50））。我试图通过在自定义glsl着色器中使用x和z坐标将平面显示为色轮。使用this guide（请参阅极坐标中的HSB，朝页面底部），我已经 Shader Code with Three.js Scene 但这不是很正确。

我一直在调整所有对我有意义的变量，但是正如您在屏幕截图中所看到的那样，颜色变化的频率是它们应有的两倍。我的数学直觉是将角度除以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为负数时，tan不会返回正确的角度，因为它超出了函数范围。需要根据平面上的象限调整角度。

Q1：什么都不做 Q2：将PI添加到角度问题3：将PI添加到角度 Q4：在角度上添加2PI

将角度归一化后（除以2PI），然后将其传递给hsb2rgb函数。

使用GLSL着色器将X，Z坐标转换为RGB

1 个答案: