폴리프레임

톤 맵핑은 컴퓨터 그래픽스에서 고역 동적 범위(High Dynamic Range, HDR) 이미지를 저역 동적 범위(Low Dynamic Range, LDR)로 변환하는 과정을 의미합니다. 이는 주로 디스플레이 장치의 한계로 인해 발생하는 것으로, 매우 밝은 빛과 어두운 그림자를 모두 표현하는 데 도움이 됩니다.HDR 이미지의 높은 명암비를 LDR 이미지로 변환하여 디스플레이에 적합하게 표현합니다.눈부신 빛과 깊은 어둠 사이의 명암을 더 잘 표현하여 시각적인 품질을 향상시킵니다.주요 톤 맵핑 종류 NoToneMapping: 톤 맵핑을 사용하지 않습니다. 입력값 그대로 디스플레이합니다.LinearToneMapping: 선형 톤 맵핑을 사용하여 매우 간단한 변환을 수행합니다.ReinhardToneMappin..

three.js 2024. 12. 25. 18:05

setHSL()HSL 색상 모델을 사용하여 색상을 설정합니다.이 메서드는 주어진 색조(hue), 채도(saturation), 밝기(lightness) 값을 사용하여 색상을 설정합니다. 기존 색상을 대체합니다. 사용은 color.setHSL(hue, saturation, lightness) -> 색조, 채도, 밝기const color = new THREE.Color();color.setHSL(0.5, 0.7, 0.5); // 색상을 설정offsetHSL()현재 색상의 HSL 값을 기준으로 오프셋(변화)을 적용합니다.이 메서드는 현재 색상의 HSL 값을 기준으로 주어진 오프셋 값을 적용하여 색상을 변경합니다. 기존 색상에 변화를 줍니다. 사용은 color.offsetHSL(hueOffset, saturati..

three.js 2024. 12. 25. 17:30

Math.sin()주어진 각도의 사인(sine) 값을 반환합니다.라디안 단위의 각도를 인자로 받습니다. (각도를 라디안으로 변환하려면 Math.PI를 사용할 수 있습니다.)-1과 1 사이의 실수 값을 반환합니다. 사인 함수는 삼각법에서, 주어진 각도의 y좌표를 나타냅니다.즉, Math.sin()은 각도의 삼각 함수 값을 계산하며, 실수 범위의 결과를 반환합니다.console.log(Math.sin(0)); // 0console.log(Math.sin(Math.PI / 2)); // 1 (90도)console.log(Math.sin(Math.PI)); // 0 (180도)Math.sign()주어진 숫자의 부호를 반환합니다.숫자 하나를 인자로 받습니다.반환값은 양수일 경우는 1, 음수일 경..

JavaScript 2024. 12. 25. 01:26

Color Model (색 모델)색을 수학적 또는 논리적으로 표현하는 시스템으로, 색을 나타내기 위해 사용되는 구성 요소(채널)의 집합입니다.예를 들어, RGB 색 모델은 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 기본 색을 혼합하여 색을 표현합니다.색을 나타내는 구조적 개념. 즉 색의 언어와 같습니다. 예로, RGB는 "빨강, 초록, 파랑"을 사용하는 언어입니다.예시 : RGB (빨강, 초록, 파랑), CMYK (청록, 자홍, 노랑, 검정), HSB (색상, 채도, 밝기), ab (Luminance, a*, b*)Color Space (색상 공간)특정 색 모델에 기반하여, 색의 범위를 구체적으로 정의한 구현체입니다.색상 공간은 장치, 환경, 작업에 맞춘 구체적인 색상 표현 방식을 제..

IT 일반 2024. 12. 25. 00:05

mouseMove다루는 장치: 마우스지원하는 브라우저: 모든 주요 브라우저에서 지원이벤트 속성: clientX, clientY, pageX, pageY 등용도: 대부분의 마우스 이동 동작을 추적하는 데 사용됩니다.const mousePosition = new THREE.Vector2();window.addEventListener('mousemove', (e)=>{ mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1; mousePosition.y = -(e.clientY / window.innerHeight) * 2 + 1 ;})pointermove다루는 장치: 마우스, 터치, 스타일러스 펜 등 다양한 입력 장치지원하는 브라우저: 최신 브라우저에서 지..

JavaScript 2024. 12. 17. 10:20

GLSL (OpenGL Shading Language)과 WGSL (WebGPU Shading Language)는 둘 다 GPU 셰이더를 작성하는 데 사용되는 언어입니다. 그러나 몇 가지 중요한 차이점이 있습니다.GLSL (OpenGL Shading Language)기본 언어: GLSL은 OpenGL과 관련된 셰이더 언어로, 오랫동안 사용되어 왔습니다.지원 API: GLSL은 WebGL, OpenGL, Vulkan 등 다양한 그래픽 API에서 사용됩니다.글로벌 상태: GLSL은 글로벌 상태를 많이 사용하며, 이는 모든 렌더링 작업에 적용되는 설정을 의미합니다.문법: GLSL은 C++와 유사한 문법을 가지고 있으며, 그래픽 프로그래밍에 필요한 다양한 기능을 제공합니다WGSL (WebGPU Shading L..

three.js 2024. 12. 14. 10:00

OrbitControls의 target과 maxPolarAngle은 Three.js와 **react-three/drei**에서 거의 동일한 방식으로 사용됩니다. react-three/drei는 Three.js의 기능을 React 컴포넌트로 감싸서 제공하는 라이브러리이기 때문에, props의 동작은 기본적으로 Three.js의 OrbitControls와 일치합니다.target OrbitControls의 target은 카메라가 초점을 맞출 지점을 설정합니다.카메라는 target으로 지정된 위치를 중심으로 궤도를 돌며 회전합니다. maxPolarAngle 카메라의 수직(위아래) 회전 범위를 제한합니다.maxPolarAngle는 카메라의 최대 극각을 라디안 값으로 설정하며, 수직 축을 기준으로 위쪽으로 올라갈 ..

three.js 2024. 12. 6. 08:09

eslint의 효용성은 말할 필요가 없을 정도로 중요하지만, 최근의 라이브러리 사용, react-three/fibre 등을 사용시에는 거슬리는 것 중에 하나 입니다. 다음과 같은 방법으로 대처 할 수 있습니다. 1. 특정코드 라인 무시하기: 코드 라인 위에 다음과 같은 주석을 추가합니다// eslint-disable-next-lineconst myVariable = 'value'; 2. 특정 블록 무시하기: 블록 주석을 사용하여 코드 블록 전체를 무시합니다/* eslint-disable */const myVariable = 'value';console.log('This will not trigger any ESLint rules.');/* eslint-enable */ 3. 파일 전체를 무시하기: 파일 ..

JavaScript 2024. 12. 6. 07:27