THREE.EquirectangularReflectionMapping;

THREE.EquirectangularReflectionMapping은 Three.js에서 **환경 맵(Environment Map)**을 처리할 때 사용되는 매핑 유형입니다.1. Equirectangular Mapping이란?Equirectangular는 360도 이미지를 **구체(Sphere)**에 맞게 펼쳐서 매핑하는 방식입니다.이 이미지 형태는 수평 방향으로 360도, 수직 방향으로 180도의 시야를 담습니다.반사나 굴절 효과를 표현할 때 사용됩니다.2. Equirectangular Reflection Mapping이 매핑 유형은 Equirectangular 텍스처를 사용하여 반사광을 표현합니다.THREE.EquirectangularReflectionMapping은 반사광이 카메라 시점에서 주변 ..

• format_list_bulleted WebGL/Three.js + R3F
• · 2024. 12. 9.
• textsms

GLSL | PlayCanvas | 화면 해상도 및 마우스 좌표에 따른 색상 변경

실행 예시우측 드래그로 카메라 이동 -> 왼쪽에 가까울수록 색상값이 낮게 변함 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..

• format_list_bulleted WebGL/GLSL
• · 2024. 9. 30.
• textsms

Custom Shader 구현

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:..

• format_list_bulleted WebGL/PlayCanvas
• · 2024. 9. 30.
• textsms

GLSL & Shaders Tutorial

출처[GLSL & Shaders Tutorial - Understanding The Syntax And The Idea Behind The Vertex & Fragment Shaders](https://www.youtube.com/watch?v=xZM8UJqN1eY&t=13s)  GLSL definition- Open**GL** **S**hading **L**anguage 의 약자 - 브라우저에 2D를 3D로 표시하기 위해 웹 응용 프로그램이 그래픽 카드와 통신할 수 있는 프로그래밍 언어   Variables and constants + Basic types데이터 타입 지정하여 선언해야 함.intfloatbool변수에 데이터 타입을 지정하면 다른 타입의 값을 설정할 수 없다.int a = 20.0; ->..

• format_list_bulleted WebGL/GLSL
• · 2024. 9. 24.
• textsms