[WebGL入门]二十七，多纹理

>第二张

下面就使用这两张图片来实现多纹理渲染。

着色器的修改首先来看一下着色器的修改吧。

为了渲染多纹理，，着色器一侧需要准备多个uniform变量，用来接收多个纹理单位，但是，这次多边形的纹理坐标只需要一个，无论第一个纹理还是第二个纹理都一样，需要变更的代码如下。

>片段着色器的代码修改

precision mediump float;uniform sampler2D texture0;uniform sampler2D texture1;varying vec4vColor;varying vec2vTextureCoord;void main(void){vec4 smpColor0 = texture2D(texture0, vTextureCoord);vec4 smpColor1 = texture2D(texture1, vTextureCoord);gl_FragColor = vColor * smpColor0 * smpColor1;}如上，接收纹理情报的sampler2D型uniform变量一共有两个，所做的处理和之前类似或者说一样。使用GLSL的内置函数texture2D来获取纹理的情报，使用顶点颜色和两个纹理颜色计算出最终的输出的颜色。

这次只需要修改片段着色器，顶点着色器没有做任何改动。

javascript的修改

接着是javascript的代码修改，在这里需要向新追加的uniform变量中传入正确的纹理数据。

首先，固定的，uniformLocation的获取。

>uniformLocation的获取部分

// uniformLocationを配列に取得var uniLocation = new Array();uniLocation[0] = gl.getUniformLocation(prg, ‘mvpMatrix’);uniLocation[1] = gl.getUniformLocation(prg, ‘texture0’);uniLocation[2] = gl.getUniformLocation(prg, ‘texture1’);这里很简单，纯粹的从着色器中获取uniformLocation。接着，准备纹理对象，这个还是使用自制的create_texture函数。

>纹理对象的生成部分

// テクスチャ用変数の宣言と生成var texture0 = null, texture1 = null;create_texture(‘texture0.png’, 0);create_texture(‘texture1.png’, 1);为了使用多个纹理，需要修改一下create_texture函数，来接收纹理单位的编号。>create_texture函数function create_texture(source, number){// イメージオブジェクトの生成var img = new Image();// データのオンロードをトリガーにするimg.onload = function(){// テクスチャオブジェクトの生成var tex = gl.createTexture();// テクスチャをバインドするgl.bindTexture(gl.TEXTURE_2D, tex);// テクスチャへイメージを適用gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);// ミップマップを生成gl.generateMipmap(gl.TEXTURE_2D);// テクスチャのバインドを無効化gl.bindTexture(gl.TEXTURE_2D, null);// 生成したテクスチャを変数に代入switch(number){case 0:texture0 = tex;break;case 1:texture1 = tex;break;default:break;};}// イメージオブジェクトのソースを指定img.src = source;第二个参数用来接收纹理单位的编号，来确定生成的纹理对象要赋值给谁。其他地方和之前一样，没有变化。那么，持续循环部分的地方要添加向着色器中添加纹理的处理。

>持续循环中的处理

// テクスチャユニットを指定してバインドし登録するgl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, texture0);gl.uniform1i(uniLocation[1], 0);// テクスチャユニットを指定してバインドし登録するgl.activeTexture(gl.TEXTURE1);gl.bindTexture(gl.TEXTURE_2D, texture1);gl.uniform1i(uniLocation[2], 1);

有时不但是必要的，而且是很有必要的。