shader 纹理填充问题

使用版本: cocos2d-js 3.16

想要实现的效果很简单,假设有一个 cc.Sprite,加载一个主纹理 CC_Texture0,形象如下:

现在,想要通过编写 shader,来使用一张很小的纹理 CC_Texture1 图片填充这个形象:

主要代码如下:

// sprite
var sprite = cc.Sprite("texture0.png");

// texture1 绑定到 shader
var texture = cc.textureCache.addImage("texture1.png");
texture.setTexParameters(gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT);
cc.glBindTexture2DN(1, texture);
gl.activeTexture(gl.TEXTURE0);

shader:

void main(void)
{
    vec4 texture0 = texture2D(CC_Texture0, v_texCoord);
    vec4 texture1 = texture2D(CC_Texture1, v_texCoord);
    texture1.a = texture1.a * texture0.a;
    gl_FragColor = texture1;
}

最终显示的结果已经很接近期望的效果了:

现在唯一的问题是,我希望小纹理在填充的时候,不要有拉伸的现象,而是用重复平铺的方式去填充,因此在上面的代码里设置了 setTexParameters gl.REPEAT。但是最终的效果似乎还是有点问题。

希望有网友能指点一下,多谢了 :slightly_smiling:

1赞

最近就是在研究这个。

我的做法是传入

uniform float textureW;
//主纹理的宽
uniform float textureH;
//主纹理的高

uniform float rectW;
//次纹理的宽
uniform float rectH;
//次纹理的高

vec4 outColor1=texture2D( texture1, vec2((v_texCoord.x)/(float(rectW/textureW)),(v_texCoord.y)/(float(rectH/textureH))));

  • 其实就是把 v_texCoord 除以次理尺寸和主纹理的比值。

(刚没看仔细楼主需求)这样可以按次纹理原尺寸以左上角为锚点显示次纹理,

可以解决拉伸,但是不会平铺。

( 然后遇到图集又得重新计算,头痛 )

:no_mouth: 求指导如何绑定 CC_Texture1 到 Shader 的,之前做过一个平铺显示纹理的 Shader 但是还不会绑定第二张 Texture,如果绑上的话咱试试这样的平铺遮罩,成功的话发上来~

在shader里有没有能获取次纹理尺寸的函数啊。直接在shader里获取然后去算比值。
想知道获取次纹理尺寸的函数

你这个shader应该是挂在小人纹理上的,那拿到的uv是[0,1]就是你现在的效果,两个做法
1:把现在这两张图片绘制到一个rendertexture上,设置blendfunc混合一下
2:吧两张图片的真实宽高传进shader,用小人的uv换算出水滴图的uv,然后用水滴图的uv去第二张纹理采样