dom/canvas/test/webgl-conf/checkout/conformance2/rendering/draw-buffers-sparse-output-locations.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 Conformance Tests: Verify drawBuffers sparse output locations</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 <div id="description"></div>
  18 <canvas id="canvas" width="1" height="1" style="width: 4px; height: 4px;"> </canvas>
  19 <div id="console"></div>
  20
  21 <script id="vs" type="x-shader/x-vertex">#version 300 es
  22 void main() {
  23   gl_PointSize = 100.0;
  24   gl_Position = vec4(0, 0, 0, 1);
  25 }
  26 </script>
  27
  28 <script id="fs" type="x-shader/x-fragment">#version 300 es
  29 // fragment shader only outputs to attachments 1 and 3
  30 precision highp float;
  31 layout(location = 1) out vec4 output1;
  32 layout(location = 3) out vec4 output2;
  33 void main()
  34 {
  35     output1 = vec4(0.0, 1.0, 0.0, 1.0);
  36     output2 = vec4(0.0, 0.0, 1.0, 1.0);
  37 }
  38
  39 </script>
  40 <script>
  41 "use strict";
  42 description("This test verifies sparse output locations of fragment shaders render correctly");
  43
  44 debug("");
  45
  46 var wtu = WebGLTestUtils;
  47 var canvas = document.getElementById("canvas");
  48 var gl = wtu.create3DContext(canvas, null, 2);
  49
  50 if (!gl) {
  51   testFailed("WebGL context does not exist");
  52 } else {
  53   testPassed("WebGL context exists");
  54   runTests();
  55 }
  56
  57 function testAttachment(attachment, expected) {
  58   gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachment);
  59   wtu.checkCanvas(gl, expected, `check COLOR_ATTACHMENT${attachment}`, 1);
  60 }
  61
  62 function runTests() {
  63   var program = wtu.setupProgram(gl, ["vs", "fs"]);
  64   if (!program) {
  65     testFailed("Set up program failed");
  66     return;
  67   }
  68   gl.useProgram(program);
  69
  70   // create a framebuffer with 4 1x1 pixel color attachments
  71   const fb = gl.createFramebuffer();
  72   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  73
  74   for (let i = 0; i < 4; ++i) {
  75     const tex = gl.createTexture();
  76     gl.bindTexture(gl.TEXTURE_2D, tex);
  77     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  78     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.TEXTURE_2D, tex, 0);
  79   }
  80
  81   // draw only to the 1st and 3rd attachments
  82   gl.drawBuffers([
  83     gl.NONE,
  84     gl.COLOR_ATTACHMENT1,
  85     gl.NONE,
  86     gl.COLOR_ATTACHMENT3,
  87   ]);
  88
  89   // draw
  90   gl.drawArrays(gl.POINTS, 0, 1);
  91
  92   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No GL error from set up");
  93
  94   // check we got the correct values
  95   testAttachment(0, [0, 0, 0, 0]);
  96   testAttachment(1, [0, 255, 0, 255]);
  97   testAttachment(2, [0, 0, 0, 0]);
  98   testAttachment(3, [0, 0, 255, 255]);
  99
 100   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No GL error from testing");
 101 }
 102
 103 var successfullyParsed = true;
 104 </script>
 105 <script src="../../js/js-test-post.js"></script>
 106
 107 </body>
 108 </html>