PIXIJS에서 했던 이미지로 구멍 뚫기

이미지로 구멍뚫기

        const vertex = `
                            in vec2 aPosition;
                            in vec2 aUV;
                            in vec3 aColor;
                            
                            out vec3 vColor;
                            out vec2 vUV;

                            uniform mat3 uProjectionMatrix;
                            uniform mat3 uWorldTransformMatrix;
                            uniform mat3 uTransformMatrix;

                            void main() {
                                mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
                                gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
                                vColor = aColor;
                                vUV = aUV;
                            }
                        `;

        const fragment = `
                            in vec3 vColor;
                            in vec2 vUV;

                            uniform sampler2D uMaskTexture;
                            uniform vec2 texturePos;
                            uniform vec2 texturePosMin;
                            uniform vec2 texturePosMax;

                            void main() {
                                vec2 screenPos = gl_FragCoord.xy;
                                if (screenPos.x >= texturePosMin.x && screenPos.x <= texturePosMax.x && screenPos.y >= texturePosMin.y && screenPos.y <= texturePosMax.y) {
                                    vec2 relativePos = screenPos - texturePosMin;
                                    vec2 textureSize = texturePosMax - texturePosMin;
                                    vec2 scaledUV = relativePos / textureSize;
                                    scaledUV.y = 1.0 - scaledUV.y;
                                    vec4 mask = texture2D(uMaskTexture, scaledUV);
                                    if (mask.a > 0.1) {
                                        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
                                    } else {
                                        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.6);
                                    }
                                } else {
                                    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.6);
                                }
                            }
                        `;

 

 

구멍 뚫어보기

const vertex = `
                            in vec2 aPosition;
                            out vec2 vTextureCoord;

                            uniform vec4 uInputSize;
                            uniform vec4 uOutputFrame;
                            uniform vec4 uOutputTexture;

                            void main() {
                                vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
                                
                                position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
                                position.y = position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;

                                gl_Position = vec4(position, 0.0, 1.0);

                                vTextureCoord = aPosition * (uOutputFrame.zw * uInputSize.zw);
                            }
                        `;

            const fragment = `
                            in vec2 vTextureCoord;
                            out vec4 finalColor;

                            uniform sampler2D maskTexture;
                            uniform vec2 holeCenter;
                            uniform float holeRadius;

                            void main() {
                                vec2 screenPos = gl_FragCoord.xy;
                                float dist = distance(screenPos, holeCenter);

                                finalColor = vec4(0.0, 0.0, 0.0, 1.0);
                                
                                if (dist < holeRadius) {
                                    finalColor.a = 0.0; // 투명하게 만듭니다.
                                } else {
                                    finalColor.a = 0.6;
                                }
                            }
                        `;

 

 

다른 곳에서도 알맞게 수정해서 쓰면될듯

필요없는 값들도있는데 테스트 하느라 안지웠음.