【Unity】 곱하기 색・스크린색
[마지막 갱신일: 2020/05/19]
모델에 곱하기 색·스크린색을 적용하여 색조를 실시간으로 변화시킬 수 있습니다.
Cubism Editor상에서 설정한 곱하기 색·스크린색은 Cubism 4.2 이후의 SDK for Unity를 이용하는 것으로, 특히 추가의 코딩을 하는 일 없이 적용됩니다.
Cubism Editor에서의 곱하기 색·스크린색의 설정은 Editor 매뉴얼의 「곱하기 색・스크린색」 을 참조해 주십시오.
또한 필요에 따라 코딩을 수행하여 SDK에서 곱하기 색, 스크린색을 조작하여 다음과 같은 동작도 가능합니다.
- 인터랙티브에 곱하기 색·스크린색을 적용한다
- Cubism Editor에서 설정하지 않은 곱하기 색 · 스크린색 적용
- Cubism Editor에서 설정한 곱하기 색 및 스크린색을 비활성화
이후는 그 순서의 설명이 됩니다.
처리 절차
이하의 흐름으로 처리를 실시합니다.
- 모델 배치
- 곱하기 색·스크린색의 덮어쓰기 플래그 설정
- 곱하기 색·스크린색의 설정
모델 배치
임의의 장면에 곱하기 색·스크린색을 설정하고 싶은 모델을 배치해 주세요.
곱하기 색·스크린색의 덮어쓰기 플래그 설정
곱하기 색·스크린색의 덧쓰기 플래그를 true 로 합니다.
디폴트에서는 false 로 되어 있어 모델로부터의 색 정보를 이용하게 되어 있습니다.
덮어쓰기 플래그는 [CubismRenderController]가 가지는 모델 전체에 걸리는 플래그와 [CubismRenderer]가 가지는 각 Drawable 객체에 걸리는 플래그의 2종류가 있습니다.
코드의 예는 다음과 같습니다.
스크립트를 모델의 루트 객체에 구성 요소로 연결하는 상태를 가정합니다.
1 2 3 4 5 6 7 8 9 10 |
// Get CubismRenderController Component CubismRenderController renderController = GetComponent<CubismRenderController>(); // Manipulate flags across the entire model. renderController.OverwriteFlagForModelMultiplyColors = true; renderController.OverwriteFlagForModelScreenColors = true; // Manipulation of individual Drawable flags. renderController.Renderers[0].OverwriteFlagForMultiplyColors = true; renderController.Renderers[0].OverwriteFlagForScreenColors = true; |
모델 전체에 걸리는 덮어쓰기 플래그가 유효하게 되었을 경우는, 개별의 Drawable에 걸리는 덮어쓰기 플래그가 무효인 경우에서도 SDK로부터 곱하기 색·스크린색을 조작하는 것이 가능하게 되어 있습니다.
[CubismRenderController] 는 모델의 루트 객체에 컴퍼넌트로서 추가되고 있어 GetComponent를 이용하는 것으로 취득하는 것이 가능합니다.
[CubismRenderController] 는 맞추어 모델의 각 Drawable 객체의 [CubismRenderer] 를 배열에 확보하고 있어 [CubismRenderController] 로부터 각 [CubismRenderer] 를 참조하는 것이 가능합니다.
곱하기 색·스크린색의 설정
곱하기 색과 스크린색을 정의하고 모델로 설정합니다.
아래의 코드에서는 모든 Drawable에 대해 곱하기 색에 빨간색, 스크린색에 녹색을 설정하는 경우의 설정값입니다.
설정색은 각 [CubismRenderer] 에 각각 UnityEngine.Color 형으로 격납되고 있습니다.
다음의 예에서는 RGBA로 설정하고 있습니다만, A는 곱하기 색·스크린색의 계산에는 이용되지 않습니다.
1 2 3 4 5 6 7 8 9 10 |
var multiplyColor = new Color(1.0f, 0.5f, 0.5f, 1.0f); var screenColor = new Color(0.0f, 0.5f, 0.0f, 1.0f); for (var i = 0; i < RenderController.Renderers.Length; i++) { // MultiplyColor renderController.Renderers[i].MultiplyColor = multiplyColor; // ScreenColor renderController.Renderers[i].ScreenColor = screenColor; } |
곱하기 색·스크린색 적용 전
곱하기 색에 빨간색, 스크린색에 녹색을 적용한 후
모델의 곱하기 색·스크린색의 처리는 색 정보에 변경이 있었을 경우에 모든 Drawable로 갱신이 들어갑니다.
Tips
이번에는 모든 Drawable에 동일한 곱하기 색·스크린색을 설정하고 있습니다만, 각 Drawable마다 다른 곱하기 색·스크린색을 설정하는 것도 가능합니다.
곱하기 색·스크린색을 무효로 하는 경우는
곱하기 색(1.0, 1.0, 1.0, 1.0)
스크린색으로(0.0, 0.0, 0.0, 1.0)
를 설정하여 가능합니다.
기타 관련 기능 및 처리
모델측으로부터의 곱하기 색·스크린색의 갱신의 통지를 받는다
모델의 파라미터에 곱하기 색·스크린색의 변경이 연결되어 있는 경우, SDK측으로부터의 조작이 아니고, 모델이 애니메이션했을 때 등에 모델측으로부터 곱하기 색·스크린색이 변경되는 일이 있습니다.
이 때 곱하기 색·스크린색이 변경된 것을 받을 수 있는 프로퍼티, IsBlendColorDirty 가 [CubismDynamicDrawableData] 에 구현되고 있습니다.
이 프롭퍼티는 곱하기 색 혹은 스크린색의 어느쪽이든이 모델측에서 변경되었을 때에 서는 플래그가 되어 있어, 곱하기 색과 스크린색의 어느 것이 변경되었는지는 판별하지 않습니다.
[CubismDynamicDrawableData]의 데이터를 처리하려면 [CubismModel]의 이벤트 OnDynamicDrawableData를 사용해야 합니다.
함수 등록
1 2 3 4 5 |
// Model CubismModel model; // Register listener. model.OnDynamicDrawableData += OnDynamicDrawableData; |
등록할 함수의 예
1 2 3 4 5 6 7 8 9 10 |
private void OnDynamicDrawableData(CubismModel sender, CubismDynamicDrawableData[] data) { for (int i = 0; i < data.Length; i++) { if (data[i].IsBlendColorDirty) { Debug.Log(i + ": Did Changed."); } } } |
곱하기 색·스크린색을 셰이더에 적용
커스터마이즈 된 셰이더로 곱하기 색·스크린색을 사용하는 경우에는 몇 개의 구현을 추가할 필요가 있습니다.
[CubismRenderer] 와 [CubismRenderController] 를 이용하는 경우에는, 셰이더에 이하의 프로퍼티와 처리를 추가하는 것으로 용이하게 구현이 가능합니다.
1 2 |
[PerRendererData] cubism_MultiplyColor("Multiply Color", Color) = (1.0, 1.0, 1.0, 1.0) [PerRendererData] cubism_ScreenColor("Screen Color", Color) = (0.0, 0.0, 0.0, 1.0) |
1 2 3 4 5 |
sampler2D _MainTex; fixed4 cubism_MultiplyColor; fixed4 cubism_ScreenColor; CUBISM_SHADER_VARIABLES |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
fixed4 frag (v2f IN) : SV_Target { fixed4 textureColor = tex2D(_MainTex, IN.texcoord); // Multiply textureColor.rgb *= cubism_MultiplyColor.rgb; // Screen textureColor.rgb = (textureColor.rgb + cubism_ScreenColor.rgb) - (textureColor.rgb * cubism_ScreenColor.rgb); fixed4 OUT = textureColor * IN.color; // Apply Cubism alpha to color. CUBISM_APPLY_ALPHA(IN, OUT); return OUT; } |