效果图:(方框从左到右进行显示)
图片资源:
原理介绍:
第一步:将三张图片按位置放好。此时图片资源是全部显示。(目的是坚持位置的正确性)
第二步:编写 shader。通过纹理s坐标进行判断,大于某个值时discard。当值为0时,全部不显示,当值为1时全部显示,中间显示的分段由值得大小决定。
顶点着色器:
uniform mat4 uMVPMatrix; attribute vec3 aPosition; attribute vec2 aTexCoor; varying vec2 vTextureCoord; void main() { gl_Position=uMVPMatrix*vec4(aPosition,1); vTextureCoord=aTexCoor; }
片元着色器:
precision mediump float; varying vec2 vTextureCoord; uniform sampler2D sTexture; uniform float uSpan; void main() { vec4 finalColor=texture2D(sTexture,vTextureCoord); if(vTextureCoord.x>uSpan){ finalColor.a=0.0; } gl_FragColor=finalColor; }
注:使用方法很简单,这里就不题了。
时间: 2024-10-07 20:49:07