FrontEnd45 IntersectionObserver API 보호되어 있는 글 입니다. 2023. 4. 22. 커스텀 커서 및 parallax scroll 보호되어 있는 글 입니다. 2023. 4. 22. 이미지 최적화 방식 및 Grid 반응형 구현 코드 보호되어 있는 글 입니다. 2023. 4. 20. 3D Computer Graphics (4) Three.js에서의 포스트 프로세싱을 적용하는 예제 코드를 보면 Three.js에서 제공하는 여러 객체들이 존재했다. FilePass, GlitchPass, OutlinePass 이들의 구현체를 조금 살펴보자. import { ShaderMaterial, UniformsUtils } from 'three'; import { Pass, FullScreenQuad } from './Pass.js'; import { FilmShader } from '../shaders/FilmShader.js'; class FilmPass extends Pass { constructor( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) { super(); i.. 2023. 4. 15. Post Processing https://threejs.org/docs/index.html#manual/en/introduction/How-to-use-post-processing three.js docs threejs.org 포스트 프로세싱은 렌더링 효과를 추가하는 작업이다. 이는 유티니, 영화에서도 많이 사용하는 기법이기 때문에 이 개념을 한번 숙지하면 여러모로 도움이 될 수 있다. 렌더링 된 화면에 필터효과를 입힐 때 쉐이더를 이용할 수 있지만 Three.js에는 다양한 post processor 예제들이 있어 이를 확인하면서 공부할 수 있다. Renderer는 카메라를 통해 Scene의 snapshot을 찍는데, 이를 Render Target이라고 한다. 이때 이를 Canvas에 그리기 전에 우리는 filter를 통해 몇 .. 2023. 4. 13. Setting 요즘은 vite로 모듈 번들러를 사용한다고 한다. ㄷㄷ 어떻게 사용하는지 확인해 보자. npm create vite 실행 이후 몇 가지 프로젝트 정보를 입력하면 다음과 같이 폴더들이 생긴다. 이후 의존성을 받아주어야 한다. 해당 폴더로 가서 npm install 명령어를 사용한다. 이후 동작을 확인하기 위해 npm run dev 명령어를 사용한다. 동작을 확인했으면 다음과 같이 필요한 파일만 남겨준다. 이후 index.html 파일을 수정해 준다. DOCTYPE html> Three.js Interactive Web style.css은 모두 지우고 reset.css를 받아서 사용해도 될 것 같다. 이후 vite가 변경된 index.html 파일 위치를 알 수 있도록 설정해주어야 한다. vite.confi.. 2023. 4. 11. 추적하기. 개발을 하면서 수학에 대해 중요성은 알았지만 직접 수학을 이용하는 도메인이 아니기 때문에 접할 수 있는 경험이 매우 적었다. 그래서 수학을 공부하려는데 그냥 하면 재미없으니까 이를 약간 코드로 적용시켜 시각적으로 보면서 공부하려고 한다. 이번에는 벡터을 공부하고 매우 쉬운 예제 코드를 만들어보았다. 벡터의 뺄셈을 통해 방향을 얻고 이를 방향 벡터로 만들면 렌더링 과정에서 지속적으로 target에 대한 방향을 얻을 수 있다. 만약 각 벡터 간의 거리를 얻고 싶다면 피타고라스 정리를 사용하면 된다. 이를 경찰과 도둑이라는 컨셉으로 만들어 보자. 우선 경찰을 만든다. const geometry = new THREE.BoxGeometry( 5, 5, 5 ); const police = new THREE.Mesh.. 2023. 3. 22. HSL HSL(Hue, Saturation, Lightness)은 디지털 미디어, 특히 웹 디자인 및 그래픽에서 자주 사용되는 색상 모델입니다. 가산 색상 모델인 RGB(빨강, 녹색, 파랑)와 달리 HSL은 색상을 색조, 채도 및 밝기의 세 가지 차원으로 분리하는 빼기 색상 모델입니다. 색조 색조는 픽셀의 주요 색상을 나타냅니다. 종종 색상환 주위의 각도로 표시되며 빨간색은 0°, 녹색은 120°, 파란색은 240°입니다. 색조 값의 범위는 0°에서 360°까지일 수 있으며 이 범위를 벗어나는 모든 값은 다시 둘러싸서 그 안에 속합니다. 색상환 개념을 사용하면 서로 다른 색상 간의 관계를 쉽게 이해할 수 있습니다. 채도 채도는 색상의 강도입니다. 완전히 포화된 색상은 선명하고 채도가 낮은 색상은 옅습니다. 채도.. 2023. 3. 19. 선형 보간 종종 lerp로 약칭되는 선형 보간은 주어진 두 값 사이의 중간 값을 찾는 데 사용되는 수학 함수입니다. 결과 값은 주어진 두 값 사이의 비율에 의해 결정됩니다. 간단한 1차원 예에서 수직선에 값이 10인 지점 A와 값이 20인 지점 B가 있다고 가정합니다. 특정 지점에서 두 지점 사이의 중간 값을 찾으려면 A에서 B까지의 30%로 선형 보간법을 사용합니다. 선형 보간에 대한 공식은 다음과 같습니다. 결과 = (1 - t) * A + t * B 이 공식에서 t는 두 점 사이의 비율을 나타냅니다. A에서 B까지의 30% 지점을 찾으려면 t는 0.3이 됩니다. 값을 연결하면 다음을 얻을 수 있습니다. 결과 = (1 - 0.3) * 10 + 0.3 * 20 결과 = 7 + 6 결과 = 13 따라서 중간 값은 .. 2023. 3. 19. ngIf 보호되어 있는 글 입니다. 2022. 2. 17. 이전 1 2 3 4 5 다음
