THREE.EquirectangularReflectionMapping은 Three.js에서 **환경 맵(Environment Map)**을 처리할 때 사용되는 매핑 유형입니다.1. Equirectangular Mapping이란?Equirectangular는 360도 이미지를 **구체(Sphere)**에 맞게 펼쳐서 매핑하는 방식입니다.이 이미지 형태는 수평 방향으로 360도, 수직 방향으로 180도의 시야를 담습니다.반사나 굴절 효과를 표현할 때 사용됩니다.2. Equirectangular Reflection Mapping이 매핑 유형은 Equirectangular 텍스처를 사용하여 반사광을 표현합니다.THREE.EquirectangularReflectionMapping은 반사광이 카메라 시점에서 주변 ..
Equirectangular는 360도 이미지 또는 구형 환경을 표현하는 특별한 이미지 투영 방식을 의미합니다.간단히 말해 구면을 평면에 펼친 이미지라고 이해하면 됩니다.이 방식을 사용하면 360도 수평, 180도 수직 시야를 하나의 직사각형 이미지로 담을 수 있습니다.Equirectangular의 원리구면(Spherical):우리가 세상을 바라볼 때 수평으로 360도, 수직으로 180도 시야를 가질 수 있습니다.이러한 시야를 표현하는 이미지는 구형에 해당합니다.직사각형으로 펼치기:이 구형 이미지를 평면으로 펼친 것을 Equirectangular Projection이라고 합니다.이때 이미지의 비율은 일반적으로 2:1입니다.예: 이미지가 4000px 너비라면 높이는 2000px입니다.결과:이렇게 만들어진 ..
멋쟁이사자처럼 프론트엔드 5기에 참여하며 위니브와 멋쟁이사자처럼 측의 도움을 받아 진행되었던 책 집필에 대한 회고 글입니다.Canvas, SVG에 대한 내용보다는 책 집필에 대한 내용을 중점적으로 작성하였습니다.리디북스에서 보실 수 있습니다. 클릭 클릭 - I CAN VAS SVG노션으로도 보실 수 있습니다.2023.04 - 집필 팀 모집 시작멋쟁이사자처럼 프론트엔드 스쿨 5기 교육을 진행하였던 위니브 측에서는 수강생들에게 좋은 이력으로 남을만한 경험을 제공하고자 노력하셨는데 그 중 하나가 바로 프로그래밍 전자책 집필이었다.3월 달에 공지를 하고 한 달 정도가 지난 4월 상반기 책 집필 팀 모집이 시작되었다.책의 주제는 프로그래밍과 관련만 있다면 자유였고 인터랙티브와 Three.js 염불을 외우고 다니던..
들어가며컴퓨터 그래픽에서 빛은 어떻게 구현하는걸까 라는 궁금증에서 시작하는 글입니다.빛의 반사, 확산, 굴절, 투과는 어떻게 컴퓨터상에서 렌더링되는걸까요? ? ? 빛이란 무엇일까우리는 매일 태양이 떠오를 때 눈부신 햇빛을 받으며 하루를 시작하고, 밤이 되면 형광등이나 LED 조명을 켜며 일상생활을 이어갑니다. 빛은 우리 생활에 필수적입니다. 그러나 우리가 매일 접하는 이 빛, 과연 무엇일까요? 빛을 과학적으로 정의하면, 이는 전자기파의 한 형태입니다. 우리가 눈으로 인식하는 가시광선뿐만 아니라, 자외선(UV), 적외선(IR), 그리고 X선과 같은 빛도 모두 전자기파에 속합니다. 빛은 특별한 성질을 가지고 있는데, 바로 파동성과 입자성을 동시에 가진다는 것입니다. 이 특성을 파동-입자 이중성이라고 부르며,..
실행 예시우측 드래그로 카메라 이동 -> 왼쪽에 가까울수록 색상값이 낮게 변함 Custom_shader.jsDevice 해상도 width, height 값 -> u_resolution 변수로 넘김마우스 좌표: 마우스 이벤트 리스너 추가 -> u_mouse 변수로 넘김// ex_02에서 사용하는 방식 _ uniform 변수에 화면 해상도 제공 this.material.setParameter('u_resolution' , [app.graphicsDevice.width, app.graphicsDevice.height]); // ex_02 에서 마우스 좌표 this.material.setParameter('u_mouse', [0.0, 0.0]); // 마우스 이벤트 리스너 추가 con..
Playcanvas에서 띄우는 방법배포 사이트 | Shader 동작 확인용 | (https://playcanv.as/p/GnoWE25J/)프로젝트 링크 | 로그인 필요 | (https://playcanvas.com/project/1235947/overview/shader-study)Editor: 프로젝트 세팅 + Scene 구성 + Script 파일 확인 가능 Play: Playcanvas 자헤 배포 사이트Fork: 프로젝트 떠가기 프로젝트 설명 Shader가 그려질 Plane entity 1,2,3 존재각각 Script 부착: GLSL Shader코드 -> Material 에 입혀서 렌더링 시켜줄 코드 Sample Custom Shader Code출처 | Playcanvas 공식 문서 | https:..