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

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 구현

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

출처[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