Frontory

코드 편집 · 실습 · 필기 열기 →

GLSL · 16 Value noise의 구성

시리즈 목차 · 전체 기술 지도

단계: 조명과 절차적 표면 · 편집 가능한 예제 · 저장 ID: glsl-step-16

목표와 학습 후 역량

선수 지식

15단위 결과물과 기록을 이어 사용합니다. Value noise의 구성 실험에 앞서 이전 입력과 기준 출력을 보관합니다.

핵심 개념과 설명

격자 값

value noise는 셀 꼭짓점의 값을 보간해 연속적인 변화를 만듭니다. 셀 id용 의사난수와 셀 내부 보간을 별도 함수로 나눕니다.

보간 곡선

선형 보간과 완만한 보간은 셀 경계의 미분 특성이 다릅니다. 거친 경계가 보이는지 확대해서 확인합니다.

실습 준비

예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 localhost 프로젝트에서 WebGL2와 GLSL ES 3.00으로 직접 구현하는 문서 안내 실습입니다. 기존 예제의 GLSL 버전을 먼저 확인하고 1.00 문법을 혼용하지 않습니다.

연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.

실습 과제

  1. noise.glsl에 결정적인 hash와 네 꼭짓점 보간 함수를 작성하세요.
  2. 같은 seed 상수로 선형 보간과 smooth 곡선 보간을 나란히 출력하세요.
  3. 셀 경계 확대 보기와 고정 좌표 5개의 값을 기록하세요.

관찰할 변수

변수기준 조건바꿀 조건예상할 변화·검증 가설
보간선형완만한 다항 곡선셀 경계의 기울기 변화가 덜 두드러질 것으로 예상합니다.

표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.

완료 조건

자가 점검

  1. 화면용 hash를 암호학적 난수로 써도 되나요?
  2. 시간을 seed에 바로 넣으면 어떤 깜빡임이 생기나요?

공식 참고

연결된 예제와 실행 범위

예제 원본 · 실행 환경과 제한

브라우저 WebGL ShaderMaterial 실행. 고정 640×360 비교이며 프레임 간격은 GPU 시간과 다릅니다.

원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.

다음 학습

이전: 2D 거리장 도형 · 다음: 옥타브와 대역 제한

실험 기록 — 직접 작성

목표

핵심 개념

바꾼 변수와 예상

실제 결과

배운 점

남은 질문

코드 편집 · 실습 · 필기 열기 →