Convert custom shader to MeshBasicNodeMaterial

Questions
2

I may have figured something out but it only works for webgpurenderer, the color uniform breaks with webgl. So I need duplicated code for both renderers. It would be nice if there was a clear example how to create a shader function for some of the math like in webgl. I thought the point of tslFn was to support both renderers.

material = new MeshBasicNodeMaterial({ map: videoTexture, color: new THREE.Color( 0x0066ff ), opacity: 0.5 });

       // console.log(uniform(material.color));

        const colorShaderNode = tslFn( ( input ) => {

            const tex = texture(input.texture);
            const color = uniform(input.color);
            const opacity = uniform(input.opacity);

            const sigDist = max(min(tex.r, tex.g), min(max(tex.r, tex.g), tex.b));

            const alpha = clamp(sigDist.div(fwidth(sigDist)).add(0.5), 0.0, 1.0);

            //return vec4(color.xyz, 1);
            return vec4(color.xyz, alpha.mul(opacity));

            //return vec3( 0.299, 0.587, 0.114 ).dot( input.color.xyz );

        });

        const opacityShaderNode = tslFn( ( input ) => {

            const tex = texture(input.texture);
            const color = uniform(input.color);
            const opacity = uniform(input.opacity);

            const sigDist = max(min(tex.r, tex.g), min(max(tex.r, tex.g), tex.b));

            const alpha = clamp(sigDist.div(fwidth(sigDist)).add(0.5), 0.0, 1.0);

            return alpha.mul(opacity);
            //return vec4(color.xyz, 1);
            //return vec4(color.xyz, alpha.mul(opacity));



        });

        material.colorNode = colorShaderNode( { texture: videoTexture, color: material.color, opacity: material.opacity });
        //material.opacityNode = opacityShaderNode( { texture: videoTexture, color: material.color, opacity: material.opacity });
1 Like