2014年4月30日 星期三

[GLSL]入門-6 把陣列轉換成材質

[shader code] ↓

uniform sampler2D tex;
uniform vec2 resolution;

float readtex(float id,vec2 uv){
 vec2 p=uv;
 
 //將索引值換算成座標
 p.x=(mod(id,12.0))/ 12.0 + 0.0415;
 p.y=1.0-((float(floor(id/12.0))/ 12.0) + 0.0415);
 
 //把座標上的色彩,轉換成灰階值。
 float cc= dot(texture2D(tex, p).rgb, vec3(0.2126, 0.7152, 0.0722));
 
 return cc;
}

float rectangle(vec2 uv, vec2 pos, vec2 size) {
 float t = 0.0;
 if ((uv.x > pos.x - size.x / 2.0) && (uv.x < pos.x + size.x / 2.0)
  && (uv.y > pos.y - size.y / 2.0) && (uv.y < pos.y + size.y / 2.0)) {
 t = 0.3;
 }
 return t;
}

void main(void)
{ vec4 color;
 vec2 uv = (gl_FragCoord.xy/resolution.xy);
        
 //讓材質只畫在左下角
 if(uv.x<0.25 && uv.y<0.25){
  color = texture2D(tex, fract(uv*4.0)).rgba;
 }else{
  color =vec4(0.0);
 }
 
 float rect=0.0;
 
 for(float i=0.0;i<36.0;i++){
  float a=readtex(i*4.0    ,uv);
  float b=readtex(i*4.0+1.0,uv);
  float c=readtex(i*4.0+2.0,uv);
  float d=readtex(i*4.0+3.0,uv);
         rect += rectangle(uv,vec2(a,b),vec2(c,d));
 }
        
 //把換算出來的紫色矩形加上原本外部的材質陣列
 color=color+vec4(rect,0.0,rect,0.7);
 
 
 gl_FragColor = vec4(color);
}



雖然glsl裡面有陣列,但我們並無法從外部給批次浮點數到陣列中。
因此在這個實驗中把外部值,轉換成材質後,再丟進gpu裡面去讀取轉化。

首先在gem裡的繪製矩型,並把它的位置跟長寬轉換成灰階圖
(示意圖左下角),一個矩形就會有四個參數,到gpu後我在去讀取這四個參數,把它轉換繪製成矩形(紫色方塊)。