X Motion: 수묵 (Sumi)은(는) 무엇을 하나요?

먹, 종이, 숨. 이 테마는 수묵화의 재료적 논리를 시간 위에 옮깁니다: 여러 회색으로 희석된 카본 잉크, 따뜻한 섬유질 종이, 번지며 스며드는 젖은 가장자리, 종이를 걸러 날리는 마른 붓털, 그리고 주요 재료로서의 공허함. 이 파일은 x-motion을 확장합니다. 먼저 해당 메서드(브리핑, 시놉시스, 스토리보드, 비평 루프)를 실행한 후, 이 파일을 아트 디렉션과 레시피에 사용하십시오.

비주얼 테제

조용한 종이의 넓은 바탕 위에서 먹이 먹처럼 (확산되고, 번지고, 마르며) 행동함으로써 하나의 제스처가 필연적으로 느껴지게 하여, 보는 이가 결정적 순간 전후의 정적을 느끼게 하라.

비트당 하나의 제스처. 한 방울, 한 획, 하나의 능선, 한 마리 새. 두 개의 초점 사건을 동시에 두지 마십시오.
공허함은 무게를 가진다. 프레임의 60~80%는 손대지 않은 종이, 안개, 또는 물로 남겨둡니다. 빈 공간은 남겨진 것이 아니라 구성된 것입니다.
재료적 진실이 그림 묘사보다 우선한다. 외관은 잉크가 빛을 흡수하고 종이가 잉크를 흡수하는 방식을 시뮬레이션하여 얻어지며, 외곽선이나 단색 채움에서 비롯되지 않습니다.
존중과 독창성. 서예, 유사 문자, 실제 또는 가짜 한자, 의상, 사찰 또는 등불 소품, 붉은 태양과 두루미 문양은 사용하지 마십시오. 낙관(도장)은 추상적인 기하학적 표시로 한정합니다.

팔레트

선형 광원(linear light)에서 작업하십시오. 아래는 sRGB 16진수 앵커 값입니다.

역할	16진수	참고
종이 (밝은 부분)	`#f1e9d8`	따뜻한 와시(일본 종이); 순수 흰색 사용 금지
종이 (그늘)	`#e0d3ba`	비네트, 빛의 접힘, 얼룩
종이 (깊은 곳)	`#cbbb9c`	프레임 가장자리 또는 안개 그림자에만 사용
먹, 진한 농도	`#14120f`	따뜻한 카본 블랙; `#000` 사용 금지
먹, 중간 묽음	`#5d5b57`	따뜻한 종이에 비해 약간 차갑게
먹, 연한 묽음	`#a9a69f`	먼 산, 확산된 구름
주홍	`#c8372d`	유일한 색상. 최대 한 번 표시, 최대 전체 픽셀의 약 1.5%
안개 속 주홍	`#d7735f`	대기에 의해 종이 쪽으로 섞인 주홍

먹은 칠하는 색이 아니라 흡수입니다. Beer-Lambert 법칙으로 합성하십시오: rgb = paper * exp(-density * absorb), 여기서 absorb는 청색에서 약간 더 큽니다 (예: vec3(1.0, 1.04, 1.1)). 이렇게 하면 얇은 묽음은 약간 차갑게, 진한 먹은 따뜻한 검정으로 읽힙니다.

빛과 재료

종이는 한쪽에서 부드럽게 빛을 받습니다: 저주파 얼룩(±3%), 눈에 보이는 코조 섬유(가늘고 긴 반투명 가닥, 폭 1~2픽셀), 그리고 마른 먹이 걸리는 세밀한 표면 결(톱니). 한 번 구워서(bake) 정적으로 유지하십시오.
젖은 먹은 안료가 가장자리로 이동하여 생긴 더 어두운 테두리, 섬유 속으로 스며든 깃털 모양 번짐, 그리고 마르면서 사라지는 희미한 광택이 있습니다.
마른 먹은 평행한 붓털 자국으로 갈라지고 종이의 낮은 부분을 건너뜁니다(톱니를 임계값 처리).
물속의 먹은 역광을 받은 볼륨입니다: 밀도 높은 중심부, 가장자리에서 가는 어두운 선으로 보이는 층상 시트, 그리고 모든 것을 감싸는 부드러운 베일.
대기는 종이 색입니다. 거리와 안개는 값을 종이 쪽으로 올리며, 절대 파란색이나 흰색 쪽으로 올리지 않습니다.

구성

피사체를 비대칭 3분할 지점에 배치하고, 하나의 넓고 고요한 영역(상단 또는 한쪽)을 균형추로 남겨둡니다.
명확한 명도 위계를 유지하십시오: 거의 검정 하나, 중간 회색 몇 개, 나머지는 종이색.
프레임 가장자리는 조용하게 유지합니다. #e0d3ba 쪽으로 부드러운 비네트가 시선을 내부에 가둡니다.
주홍 악센트는 주요 덩어리에서 멀리 떨어져, 작고 낮게, 늦게 위치합니다. 제스처에 응답할 뿐 경쟁하지 않습니다.
썸네일을 확인하십시오: 하나의 제스처 실루엣이 320픽셀 너비에서 읽혀야 합니다.

모션 어휘와 타이밍

동사	특성	일반적인 곡선
숨쉬기 (멈춤)	빛이나 안개 외에는 아무것도 움직이지 않음	제스처 전 0.8~1.5초 정지
떨어짐 / 충돌	결정적이고, 빠르며, 오버슈트 없음	ease-in, 0.3~0.6초
긋기	붓이 가속하다가 풀림	느린 누름, 빠른 중간, 가벼운 들어올림
피어남 / 확산	빠르다가 지수적으로 느려짐	`1 - exp(-t / tau)`, tau 1~2초
번짐 / 안정됨	사건 후 미세한 성장	접촉 이후 시간의 `sqrt`, 상한 있음
표류	카메라 또는 안개, 일정하고 느림	선형 또는 매우 긴 ease, 초당 프레임의 2% 미만
용해	대비 하강, 가장자리 확장	마지막에 2~3초, 절대 검정으로 컷하지 않음

리듬은 호흡입니다: 정지, 하나의 결정적 사건, 긴 안정. 안정 구간을 새로운 사건으로 채우지 마십시오.
카메라는 제스처를 따라가기 위해서만 움직입니다(먹과 함께 가라앉거나, 안개 속을 미끄러지듯). 푸시인은 8% 미만으로 유지하십시오.
시드와 노이즈 필드는 천천히 진화합니다: 초당 0.05 유닛 미만의 필드 오프셋, 그렇지 않으면 끓어오르는 것처럼 보입니다.

사운드 팔레트와 믹스

사운드는 이미지만큼 드물어야 합니다. 침묵이 하나의 큐입니다.

재료: 숨결(느린 필터 스윕이 있는 대역통과 노이즈), 물(방울을 위한 상승하는 사인 처프, 뭉툭한 거품 소리), 종이와 붓(대역통과 노이즈와 붓이 마를수록 커지는 드문드문한 알갱이 클릭 소리), 바람(시드가 있는 돌풍 곡선으로 장식된 두 개의 상관관계 없는 노이즈 베드).
악기: 숨결 섞인 끝부분 취주 관악기(사인파에 약간의 2, 3차 배음, 아래에서 위로 휘어 오르는 피치, 음에 밴드락된 숨결 노이즈), 튕긴 현(버퍼로 렌더링된 Karplus-Strong, 튕긴 후 선택적 피치 슬라이드), 낮은 징(비조화 배음열, 박자 쌍, 낮은 배음이 가장 오래 울림).
화성: 열린 음정(4도, 5도, 9도)의 몇 음. 흔한 "동양적" 오음계(펜타토닉) 리프를 피하고, 단일 음이 말하게 하십시오.
공간: 하나의 긴 합성 리버브(3~~5초, 어두워지는 테일, 20~~40ms 프리딜레이). 악기는 젖게, 텍스처는 더 마르게.
싱크: 떨어지는 소리는 충격과 만나고; 숨결은 제스처보다 0.3~~0.8초 먼저 시작하며; 징은 도장과 만나고; 멜로디 음은 시각적 사건보다 0.1~~0.3초 늦게 따릅니다.
목표: 약 -18 LUFS 통합, 트루 피크 -1.5 dBFS 이하, 마지막 프레임까지 테일 -60 dBFS 미만, 클릭 없음(모든 게인 변경은 최소 5ms 동안 램프업/다운).

기술 레시피

1. 노이즈와 종이를 한 번 구워라. 타일 가능한 256x256 RGBA16F 텍스처를 업로드하십시오: RG는 컬 필드를 보유하고(주기적 구배 노이즈의 회전된 기울기), BA는 두 개의 독립적인 노이즈를 보유합니다. 시드된 JS(입자 + Canvas 2D 섬유 스트로크)로 종이를 RGBA8 텍스처(밉맵 포함)로 구워서, 프레임마다 픽셀당 fbm을 계산하는 대신 매 프레임마다 샘플링하십시오.

2. 먹 합성 (선형 광원).

vec3 lin(vec3 c){ return pow(c, vec3(2.2)); }
vec3 inkOver(vec3 paperLin, float density){
  return paperLin * exp(-density * vec3(3.4, 3.55, 3.75));
}

3. 역류(Inverse Advection)를 이용한 물속 먹. 시뮬레이션하지 마십시오. 먹을 몇 가지 해석적 기본 요소(방울, 줄기, 와류 고리, 꽃잎 엽)로 표현하고, 이들의 위치는 시간의 닫힌 형태 함수이며, 뒤틀린 좌표에서 평가합니다. 뒤틀림은 충격 이후 시간과 함께 진폭이 증가하는 컬 필드를 따른 몇 단계로서, 기본 요소를 구불구불한 덩굴손으로 늘립니다.

vec2 q = p;
for (int i = 0; i < 4; i++) {
  vec2 c = texture(uNoise, q * freq[i] + drift * t).rg;   // 컬 필드
  q += amp[i] * growth * c;
}
float dens = primitives(q, t);              // 가우시안 코어 + 넓은 베일
dens += sheet(q) * veil;                     // 융기 노이즈: 가장자리에서 바라본 시트

뒤틀림을 저주파로 유지하십시오(기본 스케일은 프레임 높이당 1~3 사이클, 약한 3옥타브). 고주파 뒤틀림은 먹을 꿈틀거리는 벌레로 만듭니다.
말림 현상은 국부 소용돌이에서 비롯됩니다(각 와류 코어 주위로 q를 가우시안으로 감쇠하는 각도만큼 회전). 더 많은 노이즈가 아닙니다.
꽃잎, 엽 및 베일은 부드러운 테두리가 필요합니다(가우시안, 너비는 반지름의 0.2~0.3). 형태 내부의 얇고 어두운 등고선은 지형도처럼 읽힙니다.
실루엣을 판단하고 디테일이 아닙니다: 정면에서 본 방사형 5엽 형태는 해파리나 불가사리로 읽힙니다. 꽃으로 읽히기 전에 기울이십시오(약 30도 아래를 보는 카메라를 위해 3D 엽을 투영).
가늘고 날카로우며 불투명한 궤적은 끈이나 줄기로 읽힙니다. 이를 항적으로 처리하십시오: 넓히고, 부드럽게 하고, 구부린 다음 약 1초 이내에 꼭대기부터 먼저 희미해지게 하여 형태가 단독으로 서게 하십시오.
먹 코어는 따뜻한 계수(예: vec3(3.2, 3.6, 4.2)로 적색보다 청색이 더 큼)로 흡수하고, 희석된 가장자리는 중성 계수로 흡수하십시오. 그러면 코어는 평평한 회색이 아닌 수묵 검정으로 읽힙니다.

4. 극좌표 필드로서의 붓질. 원(ensō)의 경우 r(theta) = R + wobble(theta)를 사용하십시오. 픽셀당 각도를 취하여 스트로크 진행도 u와 스트로크를 가로지르는 부호 있는 거리 d / width(u)로 변환합니다. u < brushHead(t)인 곳을 드러냅니다. 젖음, 너비 및 마름은 u의 함수이고, 번짐은 t - timeTheBrushPassed(u)의 함수입니다.

float lanes = texture(uNoise, vec2(across * 5.0, u * 0.35)).b;   // 붓털 자국
float dryInk = step(dryness(u), lanes * 0.6 + tooth * 0.5);         // 낮은 종이 부분 건너뛰기
float rim = smoothstep(0.75, 1.0, abs(across)) * wet(u);            // 가장자리 어두워짐

5. 풍경을 위한 중첩 깊이(Layered depth). 각 능선은 깊이 z에서의 1D 높이 프로파일입니다. 픽셀당 월드 x로 투영하고, 높이를 조회하며, 해당 높이를 원근 하에서 화면 y와 비교합니다. 먹은 능선에서 가장 강하고 아래쪽으로 안개 속으로 감쇠합니다. 먼 곳에서 가까운 곳으로 합성하고, 1 - exp(-depth * k)만큼 종이 쪽으로 혼합합니다. 안개 시트는 능선 사이 계곡에 위치하며 시간에 따라 표류합니다. 카메라가 통과하려고 할 때 능선을 페이드아웃하십시오.

먼 곳에서 가까운 곳으로 투과율과 함께 합성하십시오(acc += T * a * layer; T *= 1.0 - a;). T가 거의 0이 되면 중단하십시오. 이는 정확하며, 아래쪽 프레임이 한두 레이어 후에 멈추기 때문에 비용을 절반으로 줄입니다.
능선을 해석적 1D 구배 노이즈(해시 + 5차 페이드)로 계산하고 텍스처 조회를 사용하지 마십시오: 이중선형 텍셀은 긴 능선을 따라 꺾인 지점으로 나타납니다.
대기는 급격한 곡선(exp(-0.45 * depth))이 필요하여, 가장 먼 범위가 또 다른 회색이 아닌 창백한 유령으로 읽히도록 합니다.

6. 작은 실루엣(예: 새, 도장) 을 경계 상자 테스트 내에서 SDF 캡슐과 박스로 표현하고, 1.5px의 안티앨리어싱된 가장자리를 적용합니다. 날개를 물리학이 아닌 위상 함수로 애니메이션합니다.

7. 오디오 빌딩 블록.

// 선택적 글라이드가 있는 Karplus-Strong 튕김, 결정론적으로 버퍼에 렌더링
for (let n = 0; n < len; n++) {
  const d = sr / freqAt(n) - 0.5, r = w - d;
  const a = read(r), b = read(r - 1);
  y = exc[n] + g * 0.5 * (a + b); write(y); out[n] = y;
}

리버브 임펄스: 시드된 스테레오 노이즈에 exp(-t / decay)를 곱하고, 차단 주파수가 시간에 따라 떨어지는 단극 저역통과 필터를 통과시킵니다. 마스터 체인: 부드러운 컴프레서(비율 2~3), 이어서 리미터 역할의 빠른 고비율 컴프레서, 측정된 메이크업 게인, 그리고 종료 약 0.15초 전에 0에 도달하는 선형 마스터 페이드(리버브 테일이 사라지도록).

비트 정확 믹싱. Chromium은 노드의 입력을 지정되지 않은 순서로 합산합니다. 부동 소수점 덧셈은 두 피연산자에 대해서만 동일한 비트를 제공하며, 컴프레서는 1e-7 반올림을 호출 간에 가청 수준의 차이로 증폭합니다. 게인 노드를 연결하여 모든 믹스 포인트에 최대 두 개의 입력을 제공하십시오:

function summer(ctx, target) {        // add(node)를 반환; 각 믹스 포인트는 <= 2개 입력
  let open = target, count = 0;
  return node => { if (count === 1) { const j = ctx.createGain(); j.connect(open); open = j; count = 0; } node.connect(open); count++; };
}

DynamicsCompressorNode는 자체적인 자동 메이크업 게인을 적용하므로, 임계값을 낮추면 믹스가 더 커집니다. 대신 출력 게인으로 음량을 설정하십시오.
스템의 균형을 확인하십시오: 멜로디 없이 한 번 렌더링합니다. 베드 단독이 전체 믹스의 2dB 이내라면 멜로디가 묻힌 것입니다.

결정론적 렌더링 체크리스트

renderFrame(t)는 오직 t로부터 모든 유니폼을 설정합니다; 누적, Date, performance.now 또는 Math.random이 없습니다.
모든 무작위성은 시드된 PRNG(mulberry32) 또는 로드 시 구워진 텍스처 해시에서 비롯됩니다.
종이, 노이즈 및 IR(Impulse Response)은 로드 시 동기적으로 구축되며 절대 변경되지 않습니다.
이전 프레임으로 되감아도 동일한 픽셀을 생성합니다; 늦은 프레임 이후 t = 0을 테스트하십시오.
프레임 비용은 소프트웨어 WebGL에서 1920x1080으로 측정하며, 1.5초 미만으로 유지하십시오. 작은 디테일에는 경계 상자를 사용하고 워프 루프는 4단계로 유지하십시오.
그레인은 정적이며 2% 미만입니다; 프레임 전체 노이즈가 없습니다.
선과 필라멘트는 최소 1.5px의 부드러운 감쇠를 가집니다.
오디오는 시드된 노이즈 버퍼를 사용하며, 모든 믹스 포인트는 최대 두 개의 입력을 가집니다; 두 번의 호출은 바이트가 동일한 버퍼를 반환해야 합니다.
미리보기 모드는 requestAnimationFrame으로 반복하며; 렌더 모드는 자체적으로 아무것도 그리지 않습니다.

피해야 할 것

순수 흰색 종이, 순수 검정 먹, 단일 주홍 표시를 제외한 채도 높은 색상.
문자 같은 획, 한자, 유사 서예, 서명, 재고 문화적 소품.
여러 제스처의 경쟁; 복잡한 배경; 같은 속도로 계속 움직이는 먹.
광선, 렌즈 플레어, 색수차, 보케; 먹은 무광택입니다.
확산인 척하는 균일한 흐림; 실제 확산은 날카로운 코어와 부드러운 베일을 동시에 가집니다.
풍경 소리, 모든 컷에 딸랑이, 지속적인 패드, 휙 소리, 재고 오음계 리프.
검정으로 컷하여 끝내기; 이미지가 안정되거나 종이 또는 회색으로 용해되도록 하십시오.

X Motion: 수묵 (Sumi)