DJ's WebGL Tutorial 004--带贴图的矩形

最新推荐文章于 2023-04-12 18:19:45 发布

原创最新推荐文章于 2023-04-12 18:19:45 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WebGL

HTML5 WebGL 专栏收录该内容

6 篇文章

订阅专栏

1.用2个三角形组成矩形，增加3个顶点，
添加uv用于纹理映射，并创建buffer：

function create_buffer() {
    var vertices = [
        -0.5, 0.5, 0.0,
        -0.5, -0.5, 0.0,
        0.5, -0.5, 0.0,

        -0.5, 0.5, 0.0,
        0.5, -0.5, 0.0,
        0.5, 0.5, 0.0,
    ];

    var uvs = [
        0.0, 0.0,
        0.0, 1.0,
        1.0, 1.0,

        0.0, 0.0,
        1.0, 1.0,
        1.0, 0.0
    ];

    vertex_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    uv_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvs), gl.STATIC_DRAW);
}

2.加载纹理：

function create_texture() {
    var tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    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);

    var img = new Image();
    img.onload = function () {
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
        texture = tex;
    }
    img.src = "car.jpg";
}

3.修改shader以支持纹理映射：

var shader_src_vs = "\
    attribute vec4 a_position;\
    attribute vec2 a_uv;\
    varying vec2 v_uv;\
    void main()\
    {\
        v_uv = a_uv;\
        gl_Position = a_position;\
    }\
";
var shader_src_ps = "\
    precision highp float;\
    uniform sampler2D u_tex;\
    varying vec2 v_uv;\
    void main()\
    {\
        gl_FragColor = texture2D(u_tex, v_uv);\
    }\
";

4.渲染：

function render() {
    update_fps();

    gl.clear(gl.COLOR_BUFFER_BIT);

    if (texture != null) {
        gl.useProgram(program);

        var index_pos = gl.getAttribLocation(program, "a_position");
        var index_uv = gl.getAttribLocation(program, "a_uv");
        var index_tex = gl.getUniformLocation(program, "u_tex");

        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        gl.enableVertexAttribArray(index_pos);
        gl.vertexAttribPointer(index_pos, 3, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer);
        gl.enableVertexAttribArray(index_uv);
        gl.vertexAttribPointer(index_uv, 2, gl.FLOAT, false, 0, 0);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.uniform1i(index_tex, 0);

        gl.drawArrays(gl.TRIANGLES, 0, 6);
    }

    window.requestAnimationFrame(render);
}

运行结果：

注意：用Chrome浏览器直接打开html会报错，这是由于本地页面加载图片引发了跨域安全错误，如果网页发布到web服务器上是不会有问题的，
解决办法：在Chrome的快捷方式属性里增加--allow-file-access-from-files，在地址栏输入html地址来运行测试页面。
另外，用其它浏览器（IE、Firefox）没有发现这个问题。

代码下载