WebGL Carousel - インタラクティブデモ

カスタムシェーダーラボ

GLSLを使って独自のトランジションエフェクトを作成

フラグメントシェーダーコード

precision mediump float;

uniform sampler2D uTexture0;
uniform sampler2D uTexture1;
uniform float uProgress;
uniform vec2 uResolution;
uniform vec2 uImageSize0;
uniform vec2 uImageSize1;

varying vec2 vTexCoord;

vec2 getCoverUV(vec2 uv, vec2 imageSize, vec2 resolution) {
  float imageAspect = imageSize.x / imageSize.y;
  float screenAspect = resolution.x / resolution.y;
  vec2 scale = vec2(1.0);
  
  if (imageAspect > screenAspect) {
    // Image is wider, scale by height
    scale.x = imageAspect / screenAspect;
  } else {
    // Image is taller, scale by width
    scale.y = screenAspect / imageAspect;
  }
  
  return (uv - 0.5) / scale + 0.5;
}

void main() {
  vec2 uv0 = getCoverUV(vTexCoord, uImageSize0, uResolution);
  vec2 uv1 = getCoverUV(vTexCoord, uImageSize1, uResolution);
  
  // Custom ripple effect
  vec2 center = vec2(0.5);
  float dist = distance(vTexCoord, center);
  float ripple = sin(dist * 20.0 - uProgress * 10.0) * 0.5 + 0.5;
  float mask = smoothstep(0.0, 1.0, (uProgress * 2.0 - dist));
  
  vec4 color0 = texture2D(uTexture0, uv0);
  vec4 color1 = texture2D(uTexture1, uv1 + ripple * 0.02 * (1.0 - mask));
  
  gl_FragColor = mix(color0, color1, mask);
}

コントロールパネル

トランジションエフェクト

カスタムシェーダーラボ