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

10 · Uniform·Attribute·Varying와 시간

2주 차 / 원문 Day 10 · 문서·예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.

전체 로드맵 · 학습 화면 사용법

목표

JavaScript와 shader 사이 데이터 경로를 설명하고 시간 변화를 만든다.

선수 지식

08~09, 경과 시간과 delta.

핵심 개념과 설명

uniform은 한 draw의 shader 호출들이 공유하는 입력이고 attribute는 정점별 입력입니다. varying은 vertex에서 fragment로 전달되어 삼각형 내부에서 보간되는 값입니다. GLSL3에서는 해당 단계의 in/out 문법을 사용합니다.

uniforms.uTime.value를 초 단위로 갱신합니다. sin(uTimeuSpeed)의 -1~1 범위를 0.5+0.5sin(...)으로 0~1에 매핑할 수 있습니다. 매 프레임 material을 새로 만들지 않고 기존 value를 바꿉니다.

학습 후 얻을 역량

• JavaScript와 shader 사이 데이터 경로를 설명하고 시간 변화를 만든다.
• 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.

실습 과제

1. uTime과 uSpeed를 JavaScript와 GLSL 양쪽에 정의합니다.
2. 한 색 채널을 시간에 따라 바꾸고 uSpeed=0,1,3을 같은 관찰 시간으로 비교합니다.
3. 정지/재개 시 누적 시간을 멈출지 실제 시각을 사용할지 결정해 기록합니다.

관찰할 변수

uTime, uSpeed, 진폭·오프셋. 카메라·geometry는 고정합니다.

완료 조건

• 세 데이터 종류의 차이를 설명한다.
• 시간 단위를 명시하고 애니메이션을 만들었다.
• 재개 시 시간 정책을 적었다.

자가 점검 질문

1. 모든 정점에 같은 uniform을 줘도 화면이 다른 색일 수 있나요?
2. 밀리초와 초를 섞으면 어떤 문제가 생기나요?

공식 참고

• WebGL 데이터
• Uniform

실험 기록 — 직접 작성

목표

핵심 개념

바꾼 변수와 예상

실제 결과

배운 점

남은 질문

이전: GLSL 문법과 색상 · 다음: UV와 Texture Sampling

연결된 예제와 실행 범위

원본 실행 코드 · 화면 단위 ID: 10-shader-data

연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.

기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.

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