dom/canvas/test/webgl-conf/checkout/conformance/rendering/point-with-gl-pointcoord-in-fragment-shader.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 Point with gl_PointCoord in Fragment Shader 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 <div id="description"></div>
  18 <canvas id="canvas" width="64" height="64"> </canvas>
  19 <div id="console"></div>
  20 <script id="vs" type="x-shader/x-vertex">
  21 varying vec4 v_color;
  22
  23 // The X and Y coordinates of the center of the point.
  24 attribute vec2 a_vertex;
  25
  26 uniform float u_pointSize;
  27
  28 void main(void) {
  29   gl_PointSize = u_pointSize;
  30   gl_Position = vec4(a_vertex, 0.0, 1.0);
  31
  32   // The color of the point.
  33   v_color = vec4(0.0, 1.0, 0.0, 1.0);
  34 }
  35
  36 </script>
  37 <script id="fs" type="x-shader/x-fragment">
  38 precision mediump float;
  39
  40 varying vec4 v_color;
  41
  42 void main(void) {
  43   // It seems as long as this mathematical expression references
  44   // gl_PointCoord, the fragment's color is incorrect.
  45   vec2 diff = gl_PointCoord - vec2(.5, .5);
  46   if (length(diff) > 0.5)
  47     discard;
  48
  49   // The point should be a solid color.
  50   gl_FragColor = v_color;
  51 }
  52 </script>
  53 <script>
  54 "use strict";
  55 // Radar 13239314
  56 description("This is a regression test for a graphics driver bug affecting end caps on roads in MapsGL.");
  57
  58 debug("");
  59
  60 var wtu = WebGLTestUtils;
  61 var canvas = document.getElementById("canvas");
  62 var canvasWidth = canvas.width;
  63 var canvasHeight = canvas.height;
  64 var output = document.getElementById("console");
  65 var gl = wtu.create3DContext(canvas);
  66
  67 function runTest() {
  68   var pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
  69   // This test can't really run without a maximum point size of at least 2
  70   if (pointSizeRange[1] < 2.0) {
  71     debug("This test needs a maximum ALIASED_POINT_SIZE_RANGE of at least 2");
  72     return;
  73   }
  74
  75   var vs = wtu.loadShaderFromScript(gl, "vs", gl.VERTEX_SHADER);
  76   var fs = wtu.loadShaderFromScript(gl, "fs", gl.FRAGMENT_SHADER);
  77   if (!vs || !fs) {
  78     testFailed("Loading shaders failed");
  79     return;
  80   }
  81
  82   var program = wtu.setupProgram(gl, [vs, fs], ['a_vertex']);
  83   if (!program) {
  84     testFailed("Loading program failed");
  85     return;
  86   }
  87
  88   gl.useProgram(program);
  89   gl.clearColor(0, 0, 0, 1.0);
  90   gl.disable(gl.DEPTH_TEST);
  91   gl.clear(gl.COLOR_BUFFER_BIT);
  92
  93   // uniform float u_pointSize;
  94   var uni = gl.getUniformLocation(program, 'u_pointSize');
  95   gl.uniform1f(uni, Math.min(20.0, pointSizeRange[1]));
  96
  97   // vertex
  98   var buffer = gl.createBuffer();
  99   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 100   var vertexData = new Float32Array([
 101     0, 0,
 102   ]);
 103   gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
 104   gl.enableVertexAttribArray(0);
 105   gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
 106
 107   gl.drawArrays(gl.POINTS, 0, 1);
 108   wtu.checkCanvasRect(gl, canvasWidth / 2, canvasHeight / 2, 1, 1,
 109       [0, 255, 0, 255], "Center pixel should be green", 2);
 110 }
 111
 112 runTest();
 113
 114 debug("");
 115 var successfullyParsed = true;
 116 </script>
 117 <script src="../../js/js-test-post.js"></script>
 118 </body>
 119 </html>