color space, premultiplied alpha, export 색상

디자인 에디터에서 색은 기능입니다. 화면에서는 맞아 보이는데 PNG export가 다르거나, WebGL blend와 CSS preview가 다르면 사용자는 renderer를 믿기 어렵습니다.

alpha가 섞이는 방식을 명시한다

일반적인 WebGL alpha blending은 source alpha를 기준으로 source와 destination을 섞습니다.

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

texture가 premultiplied alpha라면 blend 식이 달라집니다.

gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

두 방식을 섞어 쓰면 반투명 이미지 가장자리에 어두운 테두리나 밝은 테두리가 생길 수 있습니다.

색 정책을 renderer 설정으로 둔다

renderer를 만들 때 alpha와 color space 정책을 한곳에 모읍니다.

const rendererConfig = {
  clearColor: [1, 1, 1, 1],
  premultipliedAlpha: true,
  workingColorSpace: "srgb",
  exportColorSpace: "srgb"
};

const gl = canvas.getContext("webgl2", {
  alpha: true,
  premultipliedAlpha: rendererConfig.premultipliedAlpha
});

export path도 같은 설정을 공유해야 합니다. 화면 렌더링과 export 렌더링이 다른 clear color나 alpha 정책을 쓰면 결과가 달라집니다.

테스트할 색 샘플을 정한다

모든 픽셀을 완벽히 맞추기보다 renderer가 깨지기 쉬운 색 샘플을 정합니다.

opaque fill
50% alpha over white
50% alpha over transparent
image edge alpha
multiply/screen blend sample

오늘의 핵심

color space와 alpha는 나중에 붙이는 옵션이 아닙니다. renderer, texture upload, blending, export가 공유해야 하는 제품 정책입니다.