WebKit/LayoutTests/webgl/webgl-texture-image-buffer-reuse.html at main · davidquesada/WebKit · 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
<style>
    canvas {
        width: 100px;
        height: 100px;
        border: 1px green solid;
    }
</style>
<body>
    <p>Ensure if an image buffer is reused for a webgl texture, it will be cleared before drawing.</p>
    <canvas width="100" height="100"></canvas>
    <script>
        (function() {
            const canvas = document.querySelector('canvas');
            const gl = canvas.getContext("webgl");
            const program = createProgram(gl);
            gl.useProgram(program);

            createTextureBuffer(program, gl, new Float32Array([ 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), "a_texCoord");

            const images = [
                'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect width="100%" height="100%" fill="green"/></svg>',
                'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><rect x="25%" y="25%" width="50%" height="50%" fill="green"/></svg>',
            ];

            const promises = [];
            for (var index = 0; index < images.length; ++index)
                promises.push(drawTexture(program, gl, images[index]));

            if (window.testRunner) {
                testRunner.waitUntilDone();
                Promise.all(promises).then(() => {
                    testRunner.notifyDone();
                });
            }
        })();

        function createProgram(gl) {
            const vsSource = `
                attribute vec4 a_position;
                uniform vec2 u_resolution;
                attribute vec2 a_texCoord;
                varying vec2 v_texCoord;

                void main() {
                    gl_Position = a_position;
                    v_texCoord = a_texCoord;
                }
            `;

            const fsSource = `
                precision mediump float;

                uniform sampler2D u_sampler;
                varying vec2 v_texCoord;

                void main() {
                    gl_FragColor = texture2D(u_sampler, v_texCoord);
                }
            `;

            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            return program;
        }

        function loadShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        }

        function drawTexture(program, gl, url) {
            return loadTexture(gl, url).then(function() {
                createTextureBuffer(program, gl, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), "a_position");
                gl.drawArrays(gl.TRIANGLES, 0, 6);
            });
        }

        function loadTexture(gl, url) {
            return new Promise((resolve) => {
                const image = new Image();
                image.onload = function() {
                    const texture = gl.createTexture();
                    gl.bindTexture(gl.TEXTURE_2D, texture);
                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
                    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);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
                    resolve();
                };
                image.src = url;
            });
        }

        function createTextureBuffer(program, gl, bufferData, positionAttribute) {
            const buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);

            const positionLocation = gl.getAttribLocation(program, positionAttribute);
            gl.enableVertexAttribArray(positionLocation);
            gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
        }
    </script>
</body>