Is it possible to use 2 textures in shader using CC 2.0.X?

Cocos Creator
#1

Hi!

We wanted to use custom shaders for the purpose of creating certain VFX’s on our project. But currently, we didn’t manage to understand if it’s possible to render the sprite with the custom shader that uses two textures (the main texture of the sprite and a some “mask”).

Now we are using CC 2.0.4 and going to use 2.0.9 in the near future. Out investigations are based on this project:


Here’s the example of the shader that we wanted to use:

var shader = {
    name: "MaskLerp",
    defines:[],
    start(sprite) {
        sprite.node.color = cc.color('#FBC00C');
    },

    vert: `uniform mat4 viewProj;
        attribute vec3 a_position;
        attribute vec2 a_uv0;
        varying vec2 uv0;
        void main () {
            vec4 pos = viewProj * vec4(a_position, 1);
            gl_Position = pos;
            uv0 = a_uv0;
        }
        `,

    frag: `uniform sampler2D texture;
        uniform sampler2D mask;
        varying vec2 uv0;
        uniform vec4 color;
        void main() 
        { 
            vec4 texColor = texture2D(texture, uv0);
            vec m = texture2D(mask, uv0);
            gl_FragColor = mix(texColor, color, m);
        }`,
}

let CustomMaterial = require('CustomMaterial');
CustomMaterial.addShader(shader);
#2

Let us ask @Big_Bear for his thoughts.

#3

Oh, never mind! We already had found this project: https://github.com/ShawnZhang2015/ShaderHelper and figured out this question. Sorry )

#4

Could you please tell how u implemented the lerp mask ? I’m looking for exact same thing.

#5

in 2.1.1 version, we have a material system (beta version) to implemented effects and shaders easily, it could implement your requirement

1 Like
#6

It looks something like this:

var shader = {
   name: "LerpTwoTextures",
   defines:[],
   start(sprite) {
       sprite.node.color = cc.color('#FBC00C');

   },

   vert: `uniform mat4 viewProj;
       attribute vec3 a_position;
       attribute vec2 a_uv0;
       varying vec2 uv0;
       void main () {
           vec4 pos = viewProj * vec4(a_position, 1);
           gl_Position = pos;
           uv0 = a_uv0;
       }
       `,

   frag: `uniform sampler2D textureA;
       uniform sampler2D textureB;
       uniform sampler2D textureM;
       varying vec2 uv0;
       uniform vec4 color;
       void main()
       {
           vec4 texA = texture2D(textureA, uv0);
           vec4 texB = texture2D(textureB, uv0);
           float texM = texture2D(textureM, uv0).a;
           gl_FragColor = mix(texA, texB, texM);
       }`,
}

let CustomMaterial = require('CustomMaterial');
CustomMaterial.addShader(shader); (edited)

We mix textures A and B using alpha channel from textureM. Or you can use alpha channel from one of the A or B texture

1 Like
#7

Is it possible to achieve similar results in Cocos Creator 1.9.3?
I want to apply alpha channel to jpg like this topic: