WebGL 2 Conformance: primitive restart and draw_primitive_restart WebGL2 sample
[WebKit-https.git] / LayoutTests / webgl / webgl2-primitive-restart.html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5     <title>WebGL 2 Samples - draw_primitive_restart</title>
6     <meta charset="utf-8">
7     <link rel="stylesheet" href="2.0.0/resources/webgl_test_files/resources/js-test-style.css">
8     <script src="2.0.0/resources/webgl_test_files/js/js-test-pre.js"></script>
9     <script src="2.0.0/resources/webgl_test_files/js/webgl-test-utils.js"></script>
10 </head>
11
12 <body>
13     <div id="info">WebGL 2 Samples - draw_primitive_restart</div>
14     <div id="console"></div>
15
16     <script id="vs" type="x-shader/x-vertex">#version 300 es
17         precision highp float;
18         precision highp int;
19
20         layout(location = 0) in vec2 pos;
21
22         void main()
23         {
24             gl_Position = vec4(pos, 0.0, 1.0);
25         }
26     </script>
27
28     <script id="fs" type="x-shader/x-fragment">#version 300 es
29         precision highp float;
30         precision highp int;
31
32         out vec4 color;
33
34         void main()
35         {
36             color = vec4(1.0, 0.5, 0.0, 1.0);
37         }
38     </script>
39
40     <script>
41     (function () {
42         'use strict';
43         var wtu = WebGLTestUtils;
44
45         // -- Init Canvas
46         var canvas = document.createElement('canvas');
47         canvas.width = 200;
48         canvas.height = canvas.width;
49         document.body.appendChild(canvas);
50
51         // -- Init WebGL Context
52         var gl = canvas.getContext('webgl2', { antialias: false });
53         var isWebGL2 = !!gl;
54         if (!isWebGL2) {
55             testFailed("WebGL 2 context does not exist");
56             return;
57         }
58
59         testPassed("WebGL 2 context exists");
60
61         // -- Init Program
62         var program = wtu.setupProgram(gl, ["vs", "fs"]);
63         gl.useProgram(program);
64
65         // -- Init Buffer
66         var vertices = new Float32Array([
67             -1.0, -1.0,
68             -1.0,  1.0,
69              1.0, -1.0,
70              1.0,  1.0
71         ]);
72
73         var vertexPosBuffer = gl.createBuffer();
74         gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
75         gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
76         gl.bindBuffer(gl.ARRAY_BUFFER, null);
77         
78         // https://www.khronos.org/registry/webgl/specs/latest/2.0/#5.18
79         // WebGL 2.0 behaves as though PRIMITIVE_RESTART_FIXED_INDEX were always enabled. 
80         var MAX_UNSIGNED_SHORT = 65535;
81         var num_vertices = 7;
82         var indices = new Uint16Array([
83             0, 1, 2, MAX_UNSIGNED_SHORT, 2, 3, 1
84         ]);
85
86         var vertexElementBuffer = gl.createBuffer();
87         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexElementBuffer);
88         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
89         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
90
91         // -- Init Vertex Array
92         var vertexArray = gl.createVertexArray();
93         gl.bindVertexArray(vertexArray);
94
95         var vertexPosLocation = 0;
96         gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
97         gl.enableVertexAttribArray(vertexPosLocation);
98         gl.vertexAttribPointer(vertexPosLocation, 2, gl.FLOAT, false, 0, 0);
99         gl.bindBuffer(gl.ARRAY_BUFFER, null);
100         
101         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexElementBuffer);
102
103         gl.bindVertexArray(null);
104
105         // -- Render
106         gl.clearColor(0.0, 0.0, 0.0, 1.0);
107         gl.clear(gl.COLOR_BUFFER_BIT);
108
109         gl.bindVertexArray(vertexArray);
110
111         gl.drawElements(gl.TRIANGLE_STRIP, 7, gl.UNSIGNED_SHORT, 0);
112
113         // -- Delete WebGL resources
114         gl.deleteBuffer(vertexPosBuffer);
115         gl.deleteBuffer(vertexElementBuffer);
116         gl.deleteProgram(program);
117         gl.deleteVertexArray(vertexArray);
118     })();
119     </script>
120 </body>
121 </html>