2017-05-23 35 views
0

截圖:繪製HSL的SL圈調色板

img

正如你可以看到上面的PIC,我創建了HSL調色板在iOS和我繪製的OpenGL着色器核心部分,但它是正確的,我們可以使它成爲一個圓圈,而不是作物,我們需要將所有顏色繪製成一個圓圈?我試了很久,但都失敗了。你可以幫我嗎?非常感謝!

下面是代碼:

- (void)loadShaders { 
// create shader program 
program = glCreateProgram(); 

const GLchar *vertexProgram = "precision highp float; \n\ 
\n\ 
attribute vec4 position; \n\ 
varying vec2 uv; \n\ 
\n\ 
void main() \n\ 
{ \n\ 
gl_Position = vec4(2.0 * position.x - 1.0, 2.0 * position.y - 1.0, 0.0, 1.0); \n\ 
uv = position.xy; \n\ 
}"; 

GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER); 
glShaderSource(vertexShader, 1, &vertexProgram, NULL); 
glCompileShader(vertexShader); 
glAttachShader(program, vertexShader); 

// https://gist.github.com/eieio/4109795 
const GLchar *fragmentProgram = "precision highp float; \n\ 
varying vec2 uv; \n\ 
uniform float hue; \n\ 
vec3 hsb_to_rgb(float h, float s, float l) \n\ 
{ \n\ 
float c = l * s; \n\ 
h = mod((h * 6.0), 6.0); \n\ 
float x = c * (1.0 - abs(mod(h, 2.0) - 1.0)); \n\ 
vec3 result; \n\ 
\n\ 
if (0.0 <= h && h < 1.0) { \n\ 
result = vec3(c, x, 0.0); \n\ 
} else if (1.0 <= h && h < 2.0) { \n\ 
result = vec3(x, c, 0.0); \n\ 
} else if (2.0 <= h && h < 3.0) { \n\ 
result = vec3(0.0, c, x); \n\ 
} else if (3.0 <= h && h < 4.0) { \n\ 
result = vec3(0.0, x, c); \n\ 
} else if (4.0 <= h && h < 5.0) { \n\ 
result = vec3(x, 0.0, c); \n\ 
} else if (5.0 <= h && h < 6.0) { \n\ 
result = vec3(c, 0.0, x); \n\ 
} else { \n\ 
result = vec3(0.0, 0.0, 0.0); \n\ 
} \n\ 
\n\ 
result.rgb += l - c; \n\ 
\n\ 
return result; \n\ 
} \n\ 
\n\ 
void main() \n\ 
{ \ 
gl_FragColor = vec4(hsb_to_rgb(hue, uv.x, uv.y), 1.0); \ 
}"; 

GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER); 
glShaderSource(fragmentShader, 1, &fragmentProgram, NULL); 
glCompileShader(fragmentShader); 
glAttachShader(program, fragmentShader); 

// bind attribute locations 
// this needs to be done prior to linking 
glBindAttribLocation(program, ATTRIB_VERTEX, "position"); 

glLinkProgram(program); 

glDeleteShader(vertexShader); 
glDeleteShader(fragmentShader); 

} 

回答

0

我爲你的平臺沒有代碼,但我看不出哪裏或你在渲染,但我假設單QUAD所以毫不奇怪,你所看到的矩形。如果您不想添加圓​​形網格,則可以在片段着色器中執行此操作,而無需更改渲染代碼。

因此,讓我們假設你的調色板集中在x0,y0的周圍,並且半徑在內部r0和外部r1因此r0<r1

  1. GL:渲染QUAD覆蓋你的調色板光盤
  2. 片段:片段的計算距離從調色板中心

    如果不是在內部和外部半徑discard();片段之間範圍內。

    dd=(x-x0)*(x-x0)+(y-y0)*(y-y0); 
    if ((dd<r0*r0)||(dd>r1*r1)) discard(); 
    
  3. 片段:通過atan(dy,dx)

    float ang=atan(y-y0,x-x0); // <-pi,+pi> 
    
  4. 片段計算片段的angle:轉換angle到RGB輸出片段顏色

    所以ang範圍轉換成什麼都參數你想要你的調色板(如色相和設置其他s到一些默認值),將其轉換爲RGB 輸出它......類似這些: