Rev. 2.73

Socket.IO는 요 며칠간 하루 간격으로 메이저, 마이너 업데이트를 정신없이 하고 있습니다. 수정/보완이 필요한 변동사항은 없다고 합니다. 조금 살펴보니 0.8.2부터는 파이어폭스 6에 실험적으로 들어가 있는 웹소켓 피처를 지원하기 위한 기반 코드들이 추가되었습니다. 하지만 여전히 플래시소켓으로 애뮬레이션되더군요. 의도된 것인지는 모르겠지만, socket.io.js 파일을 열고 2606라인을 아래처럼 수정하면 파폭의 네이티브 웹소켓을 사용할 수 있게됩니다. 적용시켜 놓고 테스트해 보니 여러 탭에서 한 서버를 바라보는 웹소켓을 사용하는 경우 약간 버벅되는 증상이 있음을 확인하였습니다.

(function() {

  if (window.MozWebSocket) window.WebSocket = window.MozWebSocket;  // fixed
  if (window.WebSocket) return;

  var console = window.console;
  ...

그리고 크롬 베타 버전인 14(현재 15)부터는 프로토콜이 변경 되어 'Sec-WebSocket-Accept' header is missing 오류가 출력되고 작동하지 않는 문제도 수정되었습니다. 이 변경된 프로토콜은 이전의 보안 문제를 해결한 안정화된 웹소켓 프로토콜(HyBi 10)이라고 합니다. HyBi 10은 바이너리 메시지와 압축 전송을 지원합니다. 클라이언트 사이드 스크립트는 손댈 필요가 없으며, 이것으로 당분간은 breaking changes는 예상되지 않는다고 그들의 블로그를 통해 밝혔습니다.

덧, 아쉽게도, RedisStore 이슈는 해결되지 않았습니다. 이런~ 뻥쟁이들...

Comments

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

CSS3를 이용하여 다양한 시도를 즐기는 Simon씨는 또다시 CSS3를 이용하여 놀라운 것을 만들었습니다. 이번에는 금속질감을 표현한 버튼들입니다. 아래에 출력된 결과물은 CSS3의 repeating-gradient 속성과 텍스트 그리고 :before, :after와 같은 몇몇 가짜 요소를 중첩해서 만들어진 것입니다. 버튼을 클릭하면 파란색으로 빛나는 효과도 있습니다. 선형으로 만들어진 금속 버튼은 브라우저 지원이 준수한 반면, 원형 버튼은 웹킷 계열 브라우저에서만 제대로 표현됩니다.

i

참, Tom Giannattasio씨가 만든 CSS3 실험도 구경해 보라는군요.

Comments