챗지피티취미독학

Three.js에서 셰이더는 정적인 효과만을 위한 도구가 아닙니다. 이번 13차시에서는 uniform을 통해 JavaScript에서 GLSL 셰이더로 시간(Time) 을 전달하고, 이를 기반으로 움직이는 색상 변화, 퍼지는 패턴 같은 애니메이션을 구현합니다. 직접 GLSL에서 sin(), cos() 함수를 조합해 시각적 효과를 연출하며, 인터랙티브한 3D 콘텐츠의 기본기를 다집니다. 📁 프로젝트 구조three-shader-animate/├── index.html└── main.js💡 핵심 개념: uniform이란?uniform: JavaScript에서 셰이더로 값을 전달하는 전역 변수.ShaderMaterial에서 uniforms 객체로 정의.시간, 색상, 마우스 위치 등을 실시간 반영 가능.🧪 전..

Three.js를 이용한 3D 웹 개발의 진정한 매력은 커스터마이징된 표현입니다. 이번 12차시에서는 ShaderMaterial을 사용하여 나만의 셰이더를 직접 작성하고 적용하는 방법을 배웁니다. GLSL을 활용해 정점(Vertex)과 픽셀(Fragment)을 다루는 기본 구조부터, 그라데이션이나 특수 효과를 구현하는 예제까지 단계적으로 실습합니다. Three.js의 기본 재질을 넘어서, 창의적인 3D 시각 효과의 세계로 함께 나아가 봅시다! 🟣 목차셰이더란?VertexShader & FragmentShader 구조ShaderMaterial 사용법커스텀 GLSL 셰이더 예제전체 예제 코드주요 개념 요약✨ 1. 셰이더란?셰이더(Shader)는 GPU에서 동작하는 작은 프로그램으로,모델의 정점(vertex..