Three.js - Aframe , Replace a texture color with a shader

user_1244696 0
Viewed 158

This might be easy but I am totally beginner in shaders.

In Three.js - Aframe : See my codepen: https://codepen.io/jimver04/pen/XWgEvEo

I want to replace the texture color of a plane only for the texture pixels that have green above a certain threshold (chroma key green with transparent pixels). Why I am getting black values ??? Bottom left box and upper right panel

  void main () {
    float thres = 0.9;
    if (gl_FragColor.y > thres){
         gl_FragColor = vec4(gl_FragColor.x, 
                             gl_FragColor.y, 
                             gl_FragColor.z, 
                             0);
   } else {
   
         gl_FragColor = vec4(gl_FragColor.x, 
                             gl_FragColor.y, 
                             gl_FragColor.z, 
                             1);
   }

}

enter image description here

aframe three.js shader
1 Answers

Well, it took me one day but I have learned shaders. 'Book of Shaders' is good but it does not include texture shaders. I have updated the code pen also. The code below takes the pixels of the texture (texels) and if green channel is >0.5 then it makes it transparent. The photo is (was) a tiger.

<head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<script>
    AFRAME.registerShader('myshader', {
        schema: {
            uMap: {type: 'map', is: 'uniform'}
        },
        vertexShader: `
                varying vec2 vUv;

                void main() {
                    vec4 worldPosition = modelViewMatrix * vec4( position, 1.0 );
                    vec3 vWorldPosition = worldPosition.xyz;
                    vUv = uv;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                }
                `,
        fragmentShader: `
                varying vec2 vUv;
                uniform sampler2D uMap;

                void main() {
                    vec2 uv = vUv;
                    vec4 tex1 = texture2D(uMap, uv * 1.0);
                    if (tex1.g > 0.5)
                        gl_FragColor = tex1;
                    else
                        gl_FragColor = vec4(0,0,0,0);
                }`
    });
</script>

<a-scene>
    <a-assets>
        <img id="myimage" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/leopard_stalking.jpg" crossorigin="anonymous">
    </a-assets>
    <a-camera position="0 0 0"></a-camera>
    <a-plane position="0 -10 -10" width="25" height="40" rotation="-90 180 -90" material="shader:myshader; uMap: #myimage;"></a-plane>

    <a-entity light="type: directional; color: #ffffff; intensity: 2.8; castShadow:true;" position="0 2 -10"></a-entity>
    <a-light type="point" color="blue" position="0 5 0"></a-light>
    <a-light type="directional" color="blue" intensity="1.8" position="0 5 0"></a-light>
</a-scene>
</body>

enter image description here

user_12446960
Related