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

실행 예시

• 우측 드래그로 카메라 이동 -> 왼쪽에 가까울수록 색상값이 낮게 변함

• 

 

Custom_shader.js

• Device 해상도 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]);

    // 마우스 이벤트 리스너 추가
    const self = this;
    window.addEventListener('mousemove', function(e) {
        let mouseX = e.clientX / window.innerWidth;
        let mouseY = 1 - e.clientY / window.innerHeight;
        self.material.setParameter('u_mouse', [mouseX, mouseY]);
    });

 

 

Vertex Shader

attribute vec3 aPosition;
attribute vec2 aUv0;

uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;

varying vec2 vUv0;

void main(void)
{
    vUv0 = aUv0;
    gl_Position = matrix_viewProjection * matrix_model * vec4(aPosition, 1.0);
}

 

fragment Shader

uniform float uTime;
uniform vec2 u_resolution;
    uniform vec2 u_mouse;

void main() 
{
    // gl_FragColor = vec4(0.2, sin(uTime), 1.0, 1.0);
        vec2 st = gl_FragCoord.xy / u_resolution;
        // gl_FragColor = vec4(0.0, st.x, 0.0, 1.0);
        // gl_FragColor = vec4(0.0, st.x, st.y, 1.0);
        gl_FragColor = vec4(0.0, u_mouse.x, u_mouse.y, 1.0);
}