Multiple texture maps for WebGL

You can add multiple problems to a surface and still make the texture move. This demo is based on texture mapping and texture animation. The modified code is as follows:

1, chip shader code

There are two textures used here, so two texture variations (u_Texture,u_Texture1) need to be created in the fragment shader. The color of the slice is obtained using the texture2D function, and the final color of the slice is obtained by vector multiplication of the multiple colors.

<script type="shader-source" id="fragmentShader">
    // Float is set to medium precision
    precision mediump float;
    // The pixel data of the corresponding texture image
    uniform sampler2D u_Texture;
    // The pixel data of the corresponding texture image
    uniform sampler2D u_Texture1;
    // Shift in x coordinate
    uniform float anim;
    varying vec2 v_Uv;
    void main(){
        // The final color of the dot.
        vec4 color0=texture2D(u_Texture,v_Uv);
        vec4 color1=texture2D(u_Texture1, vec2(v_Uv.x+anim,v_Uv.y));
        gl_FragColor = color0*color1;
    }
</script>
Copy the code

3. JavaScript code

• The data needed to build the shader interacts with the vertex shader

function assignValue(gl, program) {...const u_Texture = gl.getUniformLocation(program, "u_Texture");
    const u_Texture1 = gl.getUniformLocation(program, "u_Texture1");
    const anim = gl.getUniformLocation(program, "anim"); .// We need to load the texture image twice
    loadTexture(gl, '.. /images/1.jpg', u_Texture, 0);
    loadTexture(gl, '.. /images/2.jpg', u_Texture1, 1.() = > render(gl, anim, positions));
}
Copy the code

• Load the texture image and pass the texture data to the chip shader

function loadTexture(gl, src, attribute, index, callBack) {
    let img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function () {
        let texture = gl.createTexture();// Create a texture image buffer
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); // Invert the texture image so that the bottom left corner of the image coincides with the origin of the UV coordinates.
        gl.activeTexture(gl[`TEXTURE${index}`]);// Activate TEXTURE0,1
        
        gl.bindTexture(gl.TEXTURE_2D, texture);// Bind the texture buffer
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); // Set the pixel format, JPG format corresponds to gl.rgb, and pass the image data to the GPU.
        // Set the texture map filling method (texture map pixel size is smaller than vertex drawing area pixel size)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            // Set the texture map filling method (texture map pixel size is larger than vertex drawing area pixel size)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        // Horizontal padding
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
        // Fill vertically
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
        // Assign an integer to the global variable. The color data in the texture buffer unit TEXTURE0 is passed into the slice shader
        gl.uniform1i(attribute, 0);
        callback && callback();
    };
    img.src = src;
}
Copy the code

• WebGLApply colours to a drawing

let animate = 0;
function render(gl, anim, positions) {
    gl.uniform1f(anim, animate);
    gl.clear(gl.COLOR_BUFFER_BIT);
    if (positions.length <= 0) {
    return;
    }
    gl.drawArrays(gl.TRIANGLES, 0, positions.length / 4);
    animate += 0.002;
    requestAnimationFrame(() = > {
    render(gl, anim, positions)
    });
}
Copy the code

The final effect looks like this:

reference

Introduction to WebGL and Practice