안녕하세요, 요병 코지마 입니다.

이번에는 WebGL을 사용하여 포스터리제이션의 구현을 했으므로 그 해설을 해 나갑니다.
WebGL이라고 하면 3D의 고리고리한 것을 만드는 이미지입니다만, 2D에서도 활용할 수 있거나 합니다. 이번에는 이미지나 동영상을 가공하는 포스터리제이션이라는 것을 소개합니다.

머리

WebGL 어드벤트 캘린더가 아니기 때문에 WebGL에 대해 간단히 해설해 둡니다.
WebGL은 자바스크립트 API 중 하나로 2D 및 3D 그래픽을 렌더링하는 데 자주 사용됩니다. 또한 three.js은 WebGL을 다루는 라이브러리 중 하나로 매우 유명합니다. 쉽게 3D 사이트를 만들 수 있습니다 (아마).

· WebGL을 사용하는 사이트

ㅡㅇㅇㅇㅜㅜㅜㅜㅜ 아니 t / #! / 엔
ぃ tp://gghtg 랏후치.ぃっぇ응. 코m/

· WebGL 참고 사이트
Three.js 입문 사이트 - ICS MEDIA
WebGL 개발 지원 사이트 wgld.org

데모

먼저 데모를 올려 둡니다. (이번 webcamera는 스마트폰으로 움직이지 않습니다.스미마센)
htps : //처럼. jp /하지만 / 포스 테리자치온 /

· GUI 설명
original -> 오리지널 표시의 ON/OFF
webcamera -> 웹캠 ON/OFF
mono -> 흑백 ON/OFF
threshold -> 계조 수를 변경하는 임계치

・이런 느낌이 됩니다

해설

포스터 라이제이션은 계조 변경이라고하는 이미지 처리입니다. WebGL로 말하면 포스트 이펙트의 하나가 됩니다.
이미지는 RGB 각각 0~255의 256계조로 나타내고 있으며, 이 256계조를 변경하는 것이 포스터리제이션입니다. 계조수를 바꾸면 일러스트 같은 표현이 생기기도 합니다.

・RGB의 R을 계조 변경한 예
256, 16, 8, 4의 순서로 계조수를 줄이고 있습니다.


이 처리를 1px 마다의 RGB에 실시하면 데모를 만들 수 있습니다.

소스 코드 해설

셰이더만 코멘트 아웃으로 해설합니다.

posterize.vs

precision highp float;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

attribute vec3 position;

varying vec2 vTexCoord;

void main() {
  // position.xy を正規化してフラグメントシェーダーに渡す
  vTexCoord = (position.xy + 1.0) / 2.0;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

posterize.fs

precision highp float;

uniform sampler2D imgTxt; // 画像テクスチャ
uniform float threshold; // しきい値

varying vec2 vTexCoord;

// 写像について
// http://twilightdve.hatenablog.com/entry/2014/06/23/142555
float map(float val, float s1, float e1, float s2, float e2) {
  return s2 + (e2 - s2) * ((val - s1) / (e1 - s1));
}

float posterize(float v) {
  // v には 0.0 ~ 255.0 の値が入っています。
  // これを 0.0 ~ threshold に写像を使って変換します。
  float m = map(v, 0.0, 255.0, 0.0, threshold);

  // floorで整数にしたあと階調数で割る
  float f = floor(m) / (threshold - 1.0);

  // 0 ~ p未満 の整数を返します。
  return f;
}

void main() {
  // テクスチャから色情報を取得
  // RGBは 0 ~ 255 で表すことが多いのですが、
  // texture2D では 0.0 ~ 1.0 の値が返されます。
  vec4 destColor = texture2D(imgTxt, vTexCoord);;

  // RGBを別々に処理します。
  // 今回はわかりやすいように * 255.0 して
  // 0.0 ~ 255.0 の値を posterize に渡します。
  destColor.r = posterize(destColor.r * 255.0);
  destColor.g = posterize(destColor.g * 255.0);
  destColor.b = posterize(destColor.b * 255.0);

  // ポスタリゼーションの処理をした色を出力
  gl_FragColor = vec4(destColor.rgb, 1.0);
}

※ web 카메라나 흑백의 판정 등 포스터리제이션에 관계가 없는 소스는 제외하고 있습니다.

후기

이번은 포스터리제이션의 소개였습니다만, 다른 포스트 이펙트를 맞추면 보다 일러스트 같은 표현을 할 수 있습니다.
htps : //처럼. jp / 지유 쵸 / 일 st 라치온 /

WebGL을 시도해보십시오.