webgl_13_muptiple_textures.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>multiple textures</title>
</head>
<body>

<canvas id="canvas" width="400" height="400">
    Please use a browser that supports "canvas"
</canvas>

<script>
    // vertex shader
    var VERTEX_SHADER_SOURCE =
        'attribute vec4 a_Position;\n' +
        'attribute vec2 a_TexCoord;\n' +
        'varying vec2 v_TexCoord;\n' +

        'void main() {\n' +
        '   gl_Position = a_Position;\n' +
        '   v_TexCoord = a_TexCoord;\n' +
        '}\n';

    // fragment shader
    var FRAGMENT_SHADER_SOURCE =
        'precision mediump float;\n' +
        'varying vec2 v_TexCoord;\n' +
        'uniform sampler2D u_Sampler0;\n' +
        'uniform sampler2D u_Sampler1;\n' +

        'void main() {\n' +
        '   vec4 color0 = texture2D(u_Sampler0, v_TexCoord);\n' +
        '   vec4 color1 = texture2D(u_Sampler1, v_TexCoord);\n' +
        '   gl_FragColor = color0 * color1;\n' +
        '}\n';

    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext('webgl');
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
        alert('Failed to init shaders');
    }

    var vertices = new Float32Array([
        -0.5, 0.5, 0.0, 1.0, // 前 2 位是位置坐标， 后 2 位是纹理坐标
        -0.5, -0.5, 0.0, 0.0,
        0.5, 0.5, 1.0, 1.0,
        0.5, -0.5, 1.0, 0.0
    ]);

    initVertexBuffers(gl, vertices);

    var u_Sampler0 = gl.getUniformLocation(gl.program, 'u_Sampler0');
    var u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1');

    var image0Loaded = false;
    var image1Loaded = false;

    var image0 = new Image();
    image0.onload = function () {
        image0Loaded = true;
        loadTexture(image0, 0, u_Sampler0);
    };
    image0.src = 'images/sky.jpg';

    var image1 = new Image();
    image1.onload = function () {
        image1Loaded = true;
        loadTexture(image1, 1, u_Sampler1);
    };
    image1.src = 'images/circle.gif';

    function initVertexBuffers(gl, vertices) {
        var vertexBuffer = gl.createBuffer();
        if (!vertexBuffer) {
            console.log('Failed to create buffer object');
            return -1;
        }

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var FSIZE = vertices.BYTES_PER_ELEMENT;

        var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);

        var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
        gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_TexCoord);
    }

    function loadTexture(image, textureUnit, u_Sampler) {
        var texture = gl.createTexture();
        // 翻转 Y 轴
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

        if (textureUnit == 0) {
            gl.activeTexture(gl.TEXTURE0);
        } else if (textureUnit == 1) {
            gl.activeTexture(gl.TEXTURE1);
        }

        gl.bindTexture(gl.TEXTURE_2D, texture);

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

        gl.uniform1i(u_Sampler, textureUnit);

        if (image1Loaded && image1Loaded) {
            // 两个图片都加载完毕后再绘制
            draw();
        }
    }

    function draw() {
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }

    function initShaders(gl, vertexShaderSource, fragmentShaderSource) {
        var program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
        if (!program) {
            console.log('Failed to create program');
            return false;
        }

        gl.useProgram(program);
        gl.program = program;

        return true;
    }

    function loadShader(gl, type, source) {
        // create shader object
        var shader = gl.createShader(type);
        if (shader == null) {
            console.log('unable to create shader');
            return null;
        }

        // set shader source code
        gl.shaderSource(shader, source);

        // compile the shader
        gl.compileShader(shader);

        // check compile status
        var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (!compiled) {
            var error = gl.getShaderInfoLog(shader);
            console.log('Failed to compile shader: ' + error);
            return null;
        }

        return shader;
    }

    function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
        var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
        var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
        if (!vertexShader || !fragmentShader) {
            return null;
        }

        // create a program object
        var program = gl.createProgram();
        if (!program) {
            console.log('gl.createProgram failed');
            return null;
        }

        // attach  the shader objects
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);

        // link the program object
        gl.linkProgram(program);

        // check link status
        var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (!linked) {
            var error = gl.getProgramInfoLog(program);
            console.log('Failed to link program: ' + error);
            gl.deleteProgram(program);
            gl.deleteShader(vertexShader);
            gl.deleteShader(fragmentShader);
            return null;
        }

        return program;
    }

</script>
</body>
</html>