Rev. 2.73

Felix Woitzel씨가 만든 놀라운 WebGL 데모입니다. 그는 쉐이더를 이용하여 l-시스템, 프랙탈 끌어당기기와 같은 데모들을 만들어 내고 있습니다. 아래의 데모역시 그가 최근 작업한 것이며, 그래픽 카드에서 실행되는 WebGL 픽셀 쉐이더 언어인 GLSL을 이용하여 만들어진 것입니다. 이방법은 화면에 출력되는 비트맵의 모든 픽셀을 매우 빠르게 처리할 수 있게 합니다. 그는 Fine-tuned 8Bit Reaction-Diffusion 시스템에 순회하는 물결들과 서브픽셀 붕괴(subpixel decay)효과를 추가하고, 광원의 변위 매핑을 위해서 그라디언트로 생성한 텍스처를 사용했다고 합니다. 참고로, 그는 독일인이며 윈엠프의 쉐이더기반 플러그인인 MilkDrop를 만든 경험이 있습니다.

fps

x-shader/x-fragment :

#ifdef GL_ES
precision highp float;
#endif
 
  uniform sampler2D sampler_prev;
  uniform sampler2D sampler_prev_n;
  uniform sampler2D sampler_blur;
  uniform sampler2D sampler_noise;
  uniform sampler2D sampler_noise_n;
 
  varying vec2 pixel;
  uniform vec2 pixelSize;
  uniform vec2 aspect;
  uniform vec4 rnd;
  uniform vec2 mouse;
  uniform float time;
 
void main(void) {
 
  vec2 lightSize=vec2(4.);
 
  // grabbing the blurred gradients
  vec2 d = pixelSize*2.;
  vec4 dx = (texture2D(sampler_blur, pixel + vec2(1,0)*d) - texture2D(sampler_blur, pixel - vec2(1,0)*d))*0.5;
  vec4 dy = (texture2D(sampler_blur, pixel + vec2(0,1)*d) - texture2D(sampler_blur, pixel - vec2(0,1)*d))*0.5;
 
  // adding the pixel gradients
  d = pixelSize*1.;
  dx += texture2D(sampler_prev, pixel + vec2(1,0)*d) - texture2D(sampler_prev, pixel - vec2(1,0)*d);
  dy += texture2D(sampler_prev, pixel + vec2(0,1)*d) - texture2D(sampler_prev, pixel - vec2(0,1)*d);
 
  vec2 displacement = vec2(dx.x,dy.x)*lightSize; // using only the red gradient as displacement vector
  float light = pow(max(1.-distance(0.5+(pixel-0.5)*aspect*lightSize + displacement,0.5+(mouse-0.5)*aspect*lightSize),0.),4.);
 
  // recoloring the lit up red channel
  vec4 rd = vec4(texture2D(sampler_prev,pixel+vec2(dx.x,dy.x)*pixelSize*8.).x)*vec4(0.7,1.5,2.0,1.0)-vec4(0.3,1.0,1.0,1.0);
  gl_FragColor = mix(rd,vec4(8.0,6.,2.,1.), light*0.75*vec4(1.-texture2D(sampler_prev,pixel+vec2(dx.x,dy.x)*pixelSize*8.).x));
  
  //gl_FragColor = texture2D(sampler_prev, pixel); // bypass
  gl_FragColor.a = 1.;
}

Comments

Got something to add? You can just leave a comment.

  • id4tweet id4tweet

    id4tweet: 쉐이더 데모 - 순회하는 물결들: Felix Woitzel씨가 만든 놀라운 WebGL 데모입니다. 그는 쉐이더를 이용하여 l-시스템, 프랙탈 끌어당기기와 같은 데모들을 만들어 내고 있습니다. 아... http://t.co/BIGxQHp

    from twitterfeed

  • Outsideris Outsideris

    Outsideris: RT @firejune: 쉐이더 데모 - 순회하는 물결들 http://t.co/ogl3LiE

    from Firejune.com

  • All_IT_News All_IT_News

    All_IT_News: [경준호] WebGL 쉐이더 데모 - 순회하는 물결들: Felix Woitzel씨가 만든 놀라운 WebGL 데모입니다. 그는 쉐이더를 이용하여 l-시스템, 프랙탈 끌어당기기와 같은 데모들을 만들... http://t.co/T12E9AA

    from twitterfeed

Your Reaction Time!

captcha

avatar