본문 바로가기

전체 글459

47 로딩 스크린과 인트로(Intro and loading progress) 로딩 스크린과 인트로강의 주제: Three.js 프로젝트에서 ShaderMaterial 기반의 오버레이와 HTML/CSS 로딩 바를 활용하여에셋이 모두 로드될 때까지 자연스럽게 장면을 가리는 방법을 배웁니다.1. 개요 및 목표기본적으로 Three.js 앱은 WebGL 캔버스만 있고, 에셋이 로드되든 말든 곧바로 장면을 렌더링합니다. 이 레슨에서는:HTML과 CSS를 활용한 로딩 바 생성ShaderMaterial을 이용한 검은색 오버레이 화면 구현모든 에셋이 로드된 후 자연스럽게 장면이 fade in되도록 구현2. 오버레이 구현 (ShaderMaterial)기본 오버레이 Plane 구성const overlayGeometry = new THREE.PlaneGeometry(2, 2, 1, 1);const ov.. 2025. 8. 6.
46 퍼포먼스 최적화 Three.js 퍼포먼스 최적화 가이드이 문서는 Three.js 프로젝트에서 퍼포먼스를 극대화하기 위해 사용할 수 있는 다양한 기법들을 구간별로 정리한 문서입니다. 특히 고사양이 아닌 기기에서도 60fps 이상을 유지하기 위한 최적화 포인트를 다루며, 로딩 속도와 GPU/CPU 자원 사용도 함께 고려합니다.✅ 목표최소 60fps 이상 유지저사양 기기 및 모바일 대응 (디양한 디바이스)GPU, CPU 부하 최소화로딩 속도 개선 (텍스처/모델 최적화)1. Monitoring (측정 도구 세팅)1.1 FPS 측정npm install stats.jsimport Stats from 'stats.js';const stats = new Stats();stats.showPanel(0); // 0: fps, 1: ms,.. 2025. 8. 6.
45 후처리(Post-Processing) Three.js Post-processing후처리는 렌더링된 이미지에 추가적인 시각 효과를 적용하는 기법으로, 영화나 게임, 고품질 시각화에 자주 사용됩니다. Three.js에서도 이 후처리를 활용할 수 있으며, 그 핵심 도구는 EffectComposer입니다.🎯 후처리로 할 수 있는 효과들피사계 심도 (Depth of Field)Bloom (꽃)God Rays (신의 광선)Motion Blur (모션 블러)Glitch (글리치 효과)Color Grading (색 보정)Anti-Aliasing (앤티앨리어싱)Reflection & Refraction (반사/굴절)📦 기본 구조와 작동 원리1. 렌더 타겟(Render Target)Three.js에서는 후처리를 위해 실제 캔버스가 아니라 RenderTar.. 2025. 8. 6.
31 MeshStandardMaterial 셰이더 확장(Modified materials) MeshStandardMaterial 셰이더 확장 및 Twist 애니메이션 적용✨ 개요Three.js의 MeshStandardMaterial은 조명, 그림자, 텍스처, PBR(물리 기반 렌더링) 등을 내장한 강력한 재질입니다. 하지만 고유 셰이더를 완전히 새로 작성하지 않고도 이 재질에 사용자 정의 애니메이션을 적용할 수 있습니다. 이 문서에서는 Three.js의 onBeforeCompile 훅을 활용하여 머리 모델을 비틀어(twist) 애니메이션을 적용하는 방법을 단계별로 설명합니다.⚖️ 셋업모델: Lee Perry-Smith의 고해상도 얼굴 모델재질: MeshStandardMaterial (map, normalMap 포함)목표: 머리 메시에 비틀림(twist) 애니메이션을 적용하고, 그림자와 노멀도 .. 2025. 8. 5.
30 Animated galaxy 🌌 Galaxy Particles Shader커스텀 셰이더로 은하 파티클을 회전시키는 과정을 설명합니다. 퍼포먼스 최적화를 위해 GPU가 직접 각 파티클의 애니메이션을 처리하도록 vertex shader를 사용하며, 다양한 크기, 색상, 형태를 표현하기 위해 shader attribute와 varying, uniforms를 적극 활용합니다.📦 1. 기초 셋업✅ 기존 PointsMaterial 제거 → ShaderMaterial 사용material = new THREE.ShaderMaterial({ depthWrite: false, blending: THREE.AdditiveBlending, vertexColors: true,});size, sizeAttenuation은 ShaderMaterial.. 2025. 8. 5.
29 Animated Water Shader 🌊 Animated Water Shader커스텀 셰이더를 사용해 바다를 표현하는 과정을 다룹니다. 큰 파도는 sin() 함수로, 작은 파도는 Perlin noise를 이용해 구현하며, 색상은 파도의 높이에 따라 보간됩니다. 이 모든 파라미터는 lil-gui로 조정할 수 있도록 구조화됩니다.🔧 1. 기초 셋업const waterGeometry = new THREE.PlaneGeometry(2, 2, 128, 128);**해상도(subdivisions)**가 충분해야 파도 디테일을 표현 가능. 부족할 경우 512 x 512로 증가 가능.const waterMaterial = new THREE.ShaderMaterial({ vertexShader: waterVertexShader, fragmentSha.. 2025. 8. 4.
28 Shader patterns ✨ Shader Patterns with GLSLGLSL을 사용하여 정해진 텍스처 없이 수학적으로 패턴을 생성하고, 다양한 형태의 그림, 변형, 왜곡, 그리고 애니메이션 가능한 모양을 만들어내는 기법들을 소개합니다.🎯 목표GLSL(Fragment Shader)에서 다양한 패턴을 그리는 수학적 기법 학습vUv 좌표를 중심으로 값을 계산하고 시각화텍스처 없이도 정확한 제어가 가능한 셰이더 패턴 구현mod, step, length, distance, mix, abs, sin, atan, cnoise, clamp 등의 함수 활용법 숙지📦 기본 셋업ShaderMaterial을 사용한 PlaneGeometry 기반 장면 구성vUv 변수를 통해 vertex shader로부터 UV 좌표 전달// vertex.gls.. 2025. 8. 4.
27 Shaders Custom ShadersGLSL 문법, RawShaderMaterial, ShaderMaterial을 직접 작성하고 이해하는 데 필요한 개념들을 보충 설명과 함께 제공합니다.Three.js의 기본 속성과 GLSL 변수 타입, 구조를 정리했습니다.1. 셰이더란?셰이더(Shader)는 GPU에서 실행되는 작은 프로그램입니다. WebGL에서는 반드시 사용되며, Three.js의 모든 Material 내부에서도 사용되고 있습니다.셰이더는 주로 두 가지 종류로 나뉩니다:- Vertex Shader각 정점(Vertex) 의 위치를 화면상의 2D 위치로 변환합니다.주입된 정점 좌표, 모델 위치, 카메라 정보 등을 바탕으로 gl_Position에 위치를 할당합니다.매번 다른 정점마다 실행되며, attribute 데이.. 2025. 8. 2.
GLSL 내장 함수 정리 모든 함수는 WebGL 1.0 / GLSL ES 1.0 기준으로, Three.js 또는 RawShaderMaterial에서 사용할 수 있는 범위로 제한GLSL 내장 함수 정리기본 전제GLSL은 벡터 기반 수학 언어입니다.대부분의 함수는 float, vec2, vec3, vec4에 대해 오버로드(overload)되어 있습니다.각 함수는 GPU 병렬 연산에 최적화되어 있습니다.1. 산술 함수 (Arithmetic)abs(x)절댓값abs(-3.2) → 3.2sign(x)부호 반환 (-1, 0, 1)sign(-5.0) → -1.0floor(x)내림floor(1.9) → 1.0ceil(x)올림ceil(1.2) → 2.0fract(x)소수점 이하만 반환fract(3.75) → 0.75mod(x, y)나머지 계산mo.. 2025. 8. 2.
GLSL에서 알아두면 좋은 규칙 GLSL에서 알아두면 좋은 중요한 규칙1. 🔁 Swizzling (벡터 요소 재조합)벡터(vec2 ~ vec4)의 구성 요소를 .xyz, .rgba, .stpq 등으로 재조합/추출/복제할 수 있음→ 위에서 설명한 것처럼 매우 강력한 문법2. 📐 Type Promotion (암시적 형변환)GLSL에서는 일부 자동 형변환이 허용됩니다.예시vec3 color = vec3(1.0); // vec3(1.0, 1.0, 1.0)vec3 mixed = vec3(1.0, 0.5, 0.2) * 0.5; // float와 vec3 연산 → OKvec * float 은 자동으로 vec * vec 로 확장됩니다.int → float 암시적 승격 가능하지만 float → int는 명시적 캐스팅이 필요합니다: int(f.. 2025. 8. 2.
26. 프로젝트 구조화(Code structuring for bigger projects) Three.js 프로젝트 구조화 수업 정리학습 목표JavaScript 클래스 및 모듈을 활용해 Three.js 프로젝트를 구조화하는 방법을 익힌다.유지보수, 확장성, 재사용성을 고려한 OOP 기반 설계 방식을 학습한다.싱글톤, 이벤트 시스템(EventEmitter), 리소스 로딩 등 복잡한 구조를 정리한다.📁 프로젝트 구조 개요/src├── Experience.js # 메인 싱글톤 클래스├── script.js # 엔트리포인트├── sources.js # 리소스 정의 배열│├── Experience/│ ├── Utils/│ │ ├── Debug.js│ │ ├── EventEmitter.js│ │ ├── Res.. 2025. 8. 2.
25 Realistic render Three.js 고품질 렌더링 가이드 (Rendering Best Practices)소개3D 모델을 Three.js로 불러올 때 원하는 결과가 나오지 않는 경우가 많습니다. 예를 들어 햄버거 모델을 처음 불러왔을 때 품질이 낮게 보였는데, 그 원인은 여러 요소들이 복합적으로 작용하기 때문입니다.이 레슨에서는 Three.js에서 사실적인 렌더링 품질을 높이기 위한 여러 기법을 다룹니다. 하지만 일부 기법은 성능에 영향을 줄 수 있으며, 모델에 따라 다르게 적용해야 하므로 상황에 맞게 조절해야 합니다.설정 (Setup)햄버거 대신 좀 더 사실적인 모델을 사용합니다. 예시는 GLTF Sample Models에 포함된 Flight Helmet 모델입니다. 해당 모델은 /static/models/에 위치하며, 이.. 2025. 7. 31.