[WebGL Primer] 27, multi-texture

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.

The results of this demo run

Using multiple texturesLast described how to use textures in WebGL. Simple implementation of the texture is pasted into the quadrilateral, it is very flexible to use the image data.

So, this time, using multiple textures to synthesize images, you can use multiple textures in one polygon after learning this method.

To use multiple textures at the same time, first think about what needs to be done?

The last time has been a simple foundation, the method of managing textures in WebGL is the texture unit, flexible use of this texture unit, you can achieve multi-texture rendering.

This demo uses the following two images.

> The first one

> Second photo

The following two images are used to achieve multi-texture rendering.

Modification of shadersfirst, let's look at the shader modifications.

In order to render multiple textures, the shader side needs to prepare multiple uniform variables to receive multiple texture units, but this time the polygon's texture coordinates need only one, regardless of the first texture or the second texture, the code that needs to be changed is as follows.

Code modification of the > Fragment shader

Precision Mediump float;uniform sampler2d texture0;uniform sampler2d texture1;varying vec4      vcolor;varying vec2      vtexturecoord;void Main (void) {    Vec4 smpColor0 = texture2d (texture0, Vtexturecoord);    VEC4 SmpColor1 = texture2d (Texture1, Vtexturecoord);    Gl_fragcolor   = vcolor * smpColor0 * SMPCOLOR1;}

as above, the SAMPLER2D type uniform variable that receives texture intelligence has a total of two, and the processing is similar or the same as before.
Use GLSL's built-in function texture2d to get information about the texture, using vertex colors and two texture colors to calculate the final output color.

This time only the fragment shader needs to be modified and the vertex shader has not made any changes.

Modification of JavaScript

Then there is the JavaScript code modification, where you need to pass in the correct texture data to the newly appended uniform variable.

First, a fixed, uniformlocation acquisition.

The acquisition portion of the >uniformlocation

Uniformlocationを with column occupies get var unilocation = new Array (); unilocation[0]  = gl.getuniformlocation (PRG, ' Mvpmatrix '); UNILOCATION[1]  = gl.getuniformlocation (PRG, ' texture0 '); unilocation[2]  = gl.getuniformlocation (PRG, ' Texture1 ');

It 's easy to get uniformlocation from the shader purely.
Next, prepare the texture object, which uses the self-made create_texture function.

> The build part of the texture object

テクスチャ with Slew declaration と generate var texture0 = null, Texture1 = null;create_texture (' texture0.png ', 0); Create_texture (' Texture1.png ', 1);

in order to use multiple textures, you need to modify the Create_texture function to receive the number of the texture units.
>create_texture function

function        Create_texture (source, number) {//イメージオブジェクトの generates var img = new Image ();                データのオンロードをトリガーにするimg.onload = function () {//テクスチャオブジェクトの generates var tex = Gl.createtexture (); テクスチャをバインドするgl.bindtexture (GL.                TEXTURE_2D, Tex); テクスチャへイメージを Suitable for gl.teximage2d (GL. texture_2d, 0, GL. RGBA, GL. RGBA, GL.                Unsigned_byte, IMG); ミップマップを Generate Gl.generatemipmap (GL.                TEXTURE_2D); テクスチャのバインドを validity Gl.bindtexture (GL.                texture_2d, NULL);                Generate したテクスチャを Slew number occupies switch (numbers) {Case 0:TEXTURE0 = Tex;            Break                Case 1:texture1 = Tex;            Break        Default:break;    }; }//イメージオブジェクトのソースを Specifies img.src = source; 

The second parameter is used to receive the number of the texture unit to determine who to assign the resulting texture object to. The rest of the place, as before, has not changed.
So, the part where the loop is going to add the processing of adding textures to the shader.

> processing in a continuous cycle

テクスチャユニットを designated してバインドし Registration するgl.activetexture (GL. TEXTURE0); Gl.bindtexture (GL. texture_2d, TEXTURE0); Gl.uniform1i (Unilocation[1], 0);//テクスチャユニットを designated してバインドし registration (GL. TEXTURE1); Gl.bindtexture (GL. texture_2d, Texture1); Gl.uniform1i (unilocation[2], 1);

The emphasis here is on the effectiveness of the texture unit, the binding of the texture object, and the setting of the unit number to the shader as a combination.
In addition, the number of the texture units specified in the Activetexture function and the integer values specified in the second argument of the uniform1i function must be consistent.

The other does not change, using the appropriate coordinate transformation matrix, you can draw the texture of the composition state in the polygon, is not surprisingly simple ah?

Summarize

When multiple textures are rendered, it should be noted that specifying the correct texture units for data processing is sufficient.

Other details, mainly the Activetexture function and the use of the uniform1i function, these are not wrong, then you can use your favorite image on the side of the shader.

This time it's just a simple multiplication of two texture data in a shader, and then each texture data is processed separately to make a completely different rendering, without using a fixed rendering pipeline, but rather using the programmer's custom shader in GLSL, which is exciting.

The connection to the demo can be run at the bottom.

next time, describe in detail the parameters about the texture.

Demo with multi-texture drawing

http://wgld.org/s/sample_015/

reprint Please specify: transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend

[WebGL Primer] 27, multi-texture