webgl-learn/texture.html at master · KohPoll/webgl-learn · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
    <title>Web GL Demo - Texture</title>
    <meta charset="utf-8" />

    <style>
    #c { border: 2px solid red; }
    </style>

    <script src="lib/vect-mat.js"></script>
    <script src="lib/gl-util.js"></script>
</head>
<body>
    <canvas id="c" width="400" height="400"></canvas>

    <script id="shader-vs" type="x-shader/vertex">
        attribute vec2 aVertexPosition;
        attribute vec2 aTexCoord;

        varying vec2 vTexCoord;

        void main() {
            gl_Position = vec4(aVertexPosition, 0.0, 1.0);
            vTexCoord = aTexCoord;
        }
    </script>

    <script id="shader-fs" type="x-shader/fragment">
        precision mediump float;

        uniform sampler2D uSampler;

        varying vec2 vTexCoord;

        void main() {
            gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));
            //gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    </script>

    <script>
        var glu = GLU('c'), gl = glu.gl();

        //gl.clearColor(0.0, 0.0, 0.6, 1.0);
        //gl.clear(gl.COLOR_BUFFER_BIT);

        // buffer
        var vertexPosBuffer, vertices,
            texCoordBuffer, texCoord;

        /*
        2--3
        |\ |
        | \|
        0--1
        */
        vertices = [
            -0.5, -0.5,
            0.5, -0.5,
            -0.5, 0.5,
            0.5, 0.5
        ];
        // -1.0 <= x <= 1.0
        // -1.0 <= y <= 1.0
        // -1.0 <= z <= 1.0
        vertexPosBuffer = glu.createBuffer(vertices);

        texCoord = [
            0.0, 0.0,
            1.0, 0.0,
            0.0, 1.0,
            1.0, 1.0
        ];
        texCoordBuffer = glu.createBuffer(texCoord);

        var vs, fs, program;

        // shader
        vs = document.getElementById('shader-vs').textContent;
        fs = document.getElementById('shader-fs').textContent;

        // program
        program = glu.createProgram(vs, fs);
        gl.useProgram(program);

        var texture, img;

        // 加载图片
        img = new Image();
        img.onload = function () {
            // 用bind的buffer,向shader传递attribute数据(点位置)
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
            program.vertexPosAttrib = gl.getAttribLocation(program, 'aVertexPosition');
            gl.enableVertexAttribArray(program.vertexPosAttrib);
            gl.vertexAttribPointer(program.vertexPosAttrib, 2, gl.FLOAT, false, 0, 0);

            // 用bind的buffer,向shader传递attribute数据(贴图坐标)
            gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
            program.texCoordAttrib = gl.getAttribLocation(program, 'aTexCoord');
            gl.enableVertexAttribArray(program.texCoordAttrib);
            gl.vertexAttribPointer(program.texCoordAttrib, 2, gl.FLOAT, false, 0, 0);

            // 向shader传递uniform数据
            program.samplerUniform = gl.getUniformLocation(program, 'uSampler');
			      gl.uniform1i(program.samplerUniform, 0);

            // 生成texture,激活,绑定
            texture = glu.createTexture(img);
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);

            // draw
			      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

            img.onload = null;
        };
        img.src = 'texture/nehe.gif';

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