标签：贴花 WebGL TEXTURE 纹理 2D 玩转 texParameteri gl 单元
纹理单元
上节中通过采样器(Sampler)将纹理对象传给片段着色器
uniform sampler2D u_Sampler;
GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。输出的是纹理的（插值）纹理坐标上的(过滤后的)颜色。
sampler2D是个uniform变量，为了片段着色器中可以设置多个纹理，给纹理采样器分配的是一个位置值。一个纹理的位置值通常称为一个纹理单元(Texture Unit)。默认纹理单元是0，它是默认的激活纹理单元。
let texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);// 绑定纹理对象到激活的纹理单元
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);// 纹理放大方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);// 纹理缩小方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);// 纹理水平填充方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);// 纹理垂直填充方式
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this._image);
gl.uniform1i(sampler, 0);
let texture2 = gl.createTexture();
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture2);// 绑定纹理对象到激活的纹理单元
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);// 纹理放大方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);// 纹理缩小方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);// 纹理水平填充方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);// 纹理垂直填充方式
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image2);
gl.uniform1i(sampler2, 1);
我们可以一次绑定多个纹理，首先激活对应的纹理单元，WebGL总共有32个纹理单元可以使用（从gl.TEXTURE0到gl.TEXTURE31），接下来的使用glBindTexture函数绑定这个纹理到当前激活的纹理单元。
位置偏移
例如贴花的位置是要在方块的中央并缩小展示出来。可以在原UV的基础上进行缩放偏移。
v_TexCoord1.x = (a_TexCoord.x - 0.5 * (1.0-0.25) ) * 4.0;
v_TexCoord1.y = (a_TexCoord.y - 0.5 * (1.0-0.25) ) * 4.0;
表示缩小4倍在（0.5，0.5）区域显示。
颜色混合
混合模式的公式
片段着色器中
vec4 acolor = texture2D(u_Sampler, v_TexCoord);
vec4 bcolor = texture2D(u_Sampler2, v_TexCoord1);
gl_FragColor = vec4(bcolor.a * bcolor.rgb + (1.0 - bcolor.a) * acolor.rgb ,1.0);
u_Sampler为底图的采样器相当于目标颜色（它会先进入颜色缓冲），u_Sampler2为贴花纹理的采样器相当于源颜色向量。
标签：贴花,WebGL,TEXTURE,纹理,2D,玩转,texParameteri,gl,单元 来源： https://blog.csdn.net/q641187432/article/details/122848688
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。