dom/canvas/test/webgl-conf/checkout/conformance2/vertex_arrays/vertex-array-object-and-disabled-attributes.html

   1 <!--
   2 Copyright (c) 2019 The Khronos Group Inc.
   3 Use of this source code is governed by an MIT-style license that can be
   4 found in the LICENSE.txt file.
   5 -->
   6
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>WebGL 2 Disabled Vertex Array Object and Disabled Attributes Test</title>
  12 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  13 <script src="../../js/js-test-pre.js"></script>
  14 <script src="../../js/webgl-test-utils.js"> </script>
  15 </head>
  16 <body>
  17 <canvas id="example" width="50" height="50">
  18 </canvas>
  19 <div id="description"></div>
  20 <div id="console"></div>
  21 <script id="singlevshader" type="x-shader/x-vertex">
  22 attribute vec4 position;
  23 void main() {
  24   gl_Position = position;
  25 }
  26 </script>
  27
  28 <script id="singlefshader" type="x-shader/x-fragment">
  29 void main() {
  30   gl_FragColor = vec4(1, 0, 0, 1);
  31 }
  32 </script>
  33 <script id="dualvshader" type="x-shader/x-vertex">#version 300 es
  34 in vec4 position;
  35 in vec4 color;
  36 out vec4 varyColor;
  37 void main() {
  38   gl_Position = position;
  39   varyColor = color;
  40 }
  41 </script>
  42 <script id="dualfshader" type="x-shader/x-fragment">#version 300 es
  43 precision mediump float;
  44 in vec4 varyColor;
  45 out vec4 colorOut;
  46 void main() {
  47   colorOut = varyColor;
  48 }
  49 </script>
  50
  51 <script>
  52 // Test that switching VAOs keeps the disabled "current value" attributes up-to-date.
  53 // Based on ANGLE test (StateChangeTestES3, VertexArrayObjectAndDisabledAttributes) from https://github.com/google/angle/blob/f7f0b8c3ab21c52cc2915048959361cf628d95f0/src/tests/gl_tests/StateChangeTest.cpp
  54 "use strict";
  55 var wtu = WebGLTestUtils;
  56 description();
  57
  58 var gl = wtu.create3DContext("example", undefined, 2);
  59
  60 // Location of "position" attribute must match between shaders.
  61 var singleProgram = wtu.setupProgram(gl, ['singlevshader', 'singlefshader'], ['position'], [0]);
  62 var dualProgram = wtu.setupProgram(gl, ['dualvshader', 'dualfshader'], ['position'], [0]);
  63
  64 var positionLocation = gl.getAttribLocation(dualProgram, "position");
  65 var colorLocation = gl.getAttribLocation(dualProgram, "color");
  66 var singlePositionLocation = gl.getAttribLocation(singleProgram, "position");
  67
  68
  69 gl.useProgram(singleProgram);
  70
  71 var positions = new Float32Array([
  72     -1, 1,
  73     -1, -1,
  74     1, -1,
  75     -1, 1,
  76     1, -1,
  77     1, 1
  78 ]);
  79
  80 var positionBuffer = gl.createBuffer();
  81 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  82 gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  83
  84 var vertexArray = gl.createVertexArray();
  85 gl.bindVertexArray(vertexArray);
  86
  87 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  88 gl.vertexAttribPointer(singlePositionLocation, 2, gl.FLOAT, false, 0, 0);
  89 gl.enableVertexAttribArray(singlePositionLocation);
  90
  91 gl.drawArrays(gl.TRIANGLES, 0, 6);
  92 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
  93 wtu.checkCanvas(gl, [255, 0, 0, 255], "should be red");
  94
  95 gl.bindVertexArray(null);
  96 gl.useProgram(dualProgram);
  97 gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  98 gl.enableVertexAttribArray(positionLocation);
  99
 100 var greenBuffer = gl.createBuffer();
 101 var green = new Uint8Array(4 * 6);
 102
 103 for (var i = 0; i < 6; ++i) {
 104   var ci = i * 4;
 105
 106   green[ci] = 0;
 107   green[ci + 1] = 255;
 108   green[ci + 2] = 0;
 109   green[ci + 3] = 255;
 110 }
 111
 112 gl.bindBuffer(gl.ARRAY_BUFFER, greenBuffer);
 113 gl.bufferData(gl.ARRAY_BUFFER, green, gl.STATIC_DRAW);
 114 gl.vertexAttribPointer(colorLocation, 4, gl.UNSIGNED_BYTE, true, 0, 0);
 115 gl.enableVertexAttribArray(colorLocation);
 116
 117 gl.drawArrays(gl.TRIANGLES, 0, 6);
 118 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
 119 wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green");
 120
 121 gl.bindVertexArray(vertexArray);
 122 gl.drawArrays(gl.TRIANGLES, 0, 6);
 123 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
 124 wtu.checkCanvas(gl, [0, 0, 0, 255], "should be black");
 125
 126 var successfullyParsed = true;
 127 </script>
 128 <script src="../../js/js-test-post.js"></script>
 129
 130 </body>
 131 </html>
 132