Three.js Shaders작성자 CloudAI-X

Three.js Shaders 스킬.

머티리얼 프리셋으로 표현할 수 없는 효과에는 커스텀 버텍스 또는 픽셀 동작을 사용하세요.

3D
Three.js

소스 검토 · Three.js ShadersSKILL.md

작업 3D 결과물 • 셰이더 쌍 또는 범위가 한정된 머티리얼 확장 • 문서화된 유니폼 업데이트 규약 • 컴파일 점검 및 진단용 시각화 시작하기 전에 동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞게 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

Three.js Shaders: 커스텀 GPU 효과 제작

GLSL 머티리얼 구조, 유니폼, 바잉, 절차적 효과, 훅, 디버깅.

소스 기반 워크플로실행 벤치마크가 아님

작업 방식

Three.js Shaders는 JavaScript 매개변수와 GPU 셰이딩 사이의 연결을 설명합니다. 유니폼은 공유 값을 전달하고, 어트리뷰트는 지오메트리를 설명하며, 바잉은 셰이더 단계 사이에서 정보를 전달합니다. ShaderMaterial과 더 명시적인 RawShaderMaterial의 차이도 구분합니다.

예시로는 그라데이션, 디스플레이스먼트, 림 효과, 노이즈, 디졸브 처리와 내장 머티리얼을 확장하는 훅이 있습니다. 좌표 공간, 셰이더 청크, GLSL 버전은 중요한 세부 사항입니다. 이는 점검을 거치는 셰이더 작업을 위한 안내이며, 복사한 예제가 프로덕션에서 검증되었다는 보장은 아닙니다.

예상 결과물

셰이더 쌍 또는 범위가 한정된 머티리얼 확장
문서화된 유니폼 업데이트 규약
컴파일 점검 및 진단용 시각화

예시 브리프 보기

브리프에서 검토까지

01
효과 위치 파악
변경이 버텍스, 표면 셰이딩, 스크린 스페이스 패스 중 어디에 속하는지 결정합니다.
02
머티리얼 경로 선택
커스텀 셰이더를 쓰거나, 대상이 분명한 확장으로 내장 셰이딩을 유지합니다.
03
데이터 흐름 디버그
최종 외관을 조정하기 전에 선언, 공간, 입력, 컴파일 결과를 확인합니다.

02 활용 상황

사용 시점

동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞게 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

적합한 경우

절차적 표면시간 기반 패턴, 그라데이션, 디스플레이스먼트, 디졸브 마스크에 유용합니다.
머티리얼 확장셰이더 훅으로 기존 셰이딩 동작을 유지하면서 한 단계만 수정할 수 있습니다.

확인할 한계

버전 독립적이지 않음문법과 Three.js 청크는 설치된 구성과 일치해야 합니다.
메시 디테일이 중요함버텍스 디스플레이스먼트는 기존 버텍스를 활용하며, 없는 디테일을 임의로 만들어 내지 않습니다.

준비할 입력

효과 레퍼런스원하는 시각적 동작을 설명하세요.
지오메트리 맥락어트리뷰트와 좌표 공간 가정을 제공하세요.
런타임 컨트롤시간, 진행도, 색상, 텍스처 매개변수를 나열하세요.

03 핵심 결정

중요한 결정

명시적 매개변수
유니폼 규약은 인터페이스 컨트롤과 GPU 출력을 연결합니다.
진단 뷰
UV, 노멀, 마스크 뷰로 시각적 마감 전에 잘못된 입력을 찾아냅니다.

04 예시 브리프

구체적인 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

관련 threejs-skills 디렉터리를 에이전트 가이드로 사용하세요. Three.js 런타임이 아니며 씬 에셋을 설치하지 않습니다.

업스트림 소스 파일

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-shaders/SKILL.md

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프

threejs-shaders를 사용해 이 메시에 제어 가능한 디졸브를 프로토타입으로 만들어 주세요. 진행도, 노이즈, 가장자리 처리, 깊이 동작을 설명하세요. 최종 효과 전에 진단용 마스크를 보여 주고, 우리 Three.js 구성에 맞게 셰이더 문법을 확인하세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

컴파일 시 해결되지 않은 입력이 보고되지 않습니다.
진단 결과가 의도한 마스크와 좌표를 확인해 줍니다.
컨트롤을 조작하면 원치 않는 아티팩트 없이 효과가 업데이트됩니다.

OpenDesign은(는) 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

OpenDesign 다운로드 퀵스타트 읽기

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 변경될 수 있습니다.

소스 소유자: CloudAI-X
저장소: CloudAI-X/threejs-skills
스킬 파일: skills/threejs-shaders/SKILL.md
라이선스: 확인되지 않음 — 재사용 전에 업스트림 약관을 검토하세요.
검토한 스냅샷: 2026-10-07 · b1c623076c66

편집 소스 요약

GLSL 머티리얼 구조, 유니폼, 바잉, 절차적 효과, 훅, 디버깅.

링크된 소스를 바탕으로 OpenDesign이(가) 직접 작성한 요약입니다. 저장소 스타는 날짜 기준의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

RawShaderMaterial은 무엇이 다른가요?

소스에서는 주입되는 셰이더 설정에 의존하지 않고 명시적으로 선언한다고 설명합니다.

기존 머티리얼을 확장할 수 있나요?

예. 문서화된 셰이더 훅 패턴으로 가능하지만 릴리스별 확인이 필요합니다.

포스트 프로세싱인가요?

주로 메시 셰이딩을 다루며, 전체 화면 효과는 관련 포스트 프로세싱 주제에 속합니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

OpenDesign 다운로드 디자인 스킬 둘러보기