I want to check only the red value in the fragment shader

Questions
,
1

I want to check only the red value in the fragment shader.
How do I detect it?
Please see my code.

#ifdef GL_ES

    precision highp float;

    #endif

    uniform sampler2D tMask;

    uniform sampler2D tOne;

    uniform sampler2D tSec;

    varying vec2 vUv;

    void main(void)

    {

        vec3 c;

        vec4 Cm = texture2D(tMask, vUv);

        vec4 Ca = texture2D(tOne, vUv);

        vec4 Cb = texture2D(tSec, vUv);

        // c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a);  // blending equation

        c = Ca.rgb * Ca.a;

        if ( Cm.r > 0 ){

            c = Cb.rgb * Cb.a;

        }

        gl_FragColor= vec4(c, 1.0);

    }
2

Hi!
Does this code work for you?
If not, then it’s better to provide a live code example, that demonstrates the problem.

3

When I read the error, it was an if statement error.

All sources are: -----------------------------------------

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<div class="container">

    <div class="row">

        <div class="col-auto">skeletone test page</div>

    </div>

</div>

<script id="vertex_shh" type="x-shader/x-vertex" role="원래 위치에 그대로 찍어 주는 쉐이더.">

    varying vec2 vUv;

    void main()

    {

        vUv = uv;

        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

        gl_Position = projectionMatrix * mvPosition;

    }

</script>

<script id="fragment_shh" type="x-shader/x-fragment" role="이건 확인해 봐야 함.">

    #ifdef GL_ES

    precision highp float;

    #endif

    uniform sampler2D tMask;

    uniform sampler2D tOne;

    uniform sampler2D tSec;

    varying vec2 vUv;

    void main(void)

    {

        vec3 c;

        vec4 Cm = texture2D(tMask, vUv);

        vec4 Ca = texture2D(tOne, vUv);

        vec4 Cb = texture2D(tSec, vUv);

        // c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a);  // blending equation

        // c = Ca.rgb * Ca.rgb * (1.0 - Cm.g) + Cb.rgb * Cb.rgb * Cm.g;

        c = Ca.rgb * Ca.a

        if ( Cm.r > 0 )

        {

            c = Cb.rgb * Cb.a

        }

        gl_FragColor= vec4(c, 1.0);

    }

</script>

<div name="three-container" style="width: 500; height: 500; background-color: red;" ></div>

<script type="module" role="main control" >

    import * as THREE from 'https://cdn.skypack.dev/three@0.130.1';

    import {FBXLoader} from 'https://cdn.skypack.dev/three@0.130.1/examples/jsm/loaders/FBXLoader.js';

    import {OrbitControls} from 'https://cdn.skypack.dev/three@0.130.1/examples/jsm/controls/OrbitControls.js';

    import {GLTFLoader} from 'https://cdn.skypack.dev/three@0.130.1/examples/jsm/loaders/GLTFLoader.js';

    // let uniforms = {

    //         time: { type: "f", value: 1.0 },

    //         resolution: { type: "v2", value: new THREE.Vector2() }

    //     };

    var vertShader = document.getElementById('vertex_shh').textContent;

    var fragShader = document.getElementById('fragment_shh').textContent;

    var attributes = {}; // custom attributes

    var uniforms = {    // custom uniforms (your textures)

        tMask: { type: "t", value: THREE.ImageUtils.loadTexture( "terrain_mask.png" ) },

        // tOne: { type: "t", value: THREE.ImageUtils.loadTexture( "ArcherA01_cut.png" ) },

        tOne: { type: "t", value: THREE.ImageUtils.loadTexture( "W_04D.png" ) },

        tSec: { type: "t", value: THREE.ImageUtils.loadTexture( "AssassinAri_01D.PNG" ) }

    };

    var material = new THREE.ShaderMaterial({

        uniforms: uniforms,

        attributes: attributes,

        vertexShader: vertShader,

        fragmentShader: fragShader

    });

    let container = document.querySelector(`[name=three-container]`);

    let scene = new THREE.Scene();

    let clock = new THREE.Clock();

    let camera = new THREE.PerspectiveCamera( 60, container.clientWidth / container.clientHeight, 0.1, 1000 );

    camera.position.y = 10;

    camera.position.z = 10;

    camera.up = new THREE.Vector3(0,1,0);

    camera.lookAt(scene.position);

    let renderer = new THREE.WebGLRenderer();

    container.appendChild(renderer.domElement);

    function animate() // loop

    {

        renderer.setSize(container.clientWidth, container.clientHeight);

        requestAnimationFrame( ()=>animate() );

        renderer.render( scene, camera ); // render

    }

    animate();

    //  --- --- --- ---     add sample object

    const geometry = new THREE.PlaneGeometry( 10, 10 );

    // const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );

    const earth = new THREE.Mesh( geometry, material );

    earth.name = "earth";

    earth.rotation.x = -0.5 * Math.PI;

    scene.add(earth);

    let cube_metry = new THREE.BoxGeometry();

    let cube_material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

    let cube = new THREE.Mesh( cube_metry, cube_material );

    cube.position.set(-3,0,0)

    cube.onBeforeRender = function()

    {

        this.rotation.x += 0.01;

        this.rotation.y += 0.01;

    }

    scene.add(cube);

    //  --- --- --- ---     test code

</script>
![--1|215x500](upload://cF0OS2ZWsvL2enwtsqjRqHI6st9.png)
4

Shouldn’t it be if ( Cm.r > 0.0 )? float instead of int.

5

error log is :

--1
--1725×1682 64.5 KB

6

Thank you very much.

1 Like