Three.js

Question

这可能很简单，但我完全是着色器的初学者。

在 Three.js - Aframe 中：查看我的代码笔：https://codepen.io/jimver04/pen/XWgEvEo

我只想为绿色超过特定阈值的纹理像素（色键绿色和透明像素）替换平面的纹理颜色。为什么我得到黑色值？？？左下框和右上面板

  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);
   }

}

Answer 1

好吧，我花了一天时间，但我已经学会了着色器。 'Book of Shaders' 不错，但它不包括纹理着色器。我也更新了密码笔。下面的代码获取纹理的像素 (texels)，如果绿色通道 >0.5 则使其透明。照片是一只老虎。

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

Three.js - Aframe，用着色器替换纹理颜色

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

shader

aframe