point-with-gl-pointcoord-in-fragment-shader.html

Enable keyboard shortcuts

<!--

Copyright (c) 2019 The Khronos Group Inc.

Use of this source code is governed by an MIT-style license that can be

found in the LICENSE.txt file.

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>WebGL Point with gl_PointCoord in Fragment Shader Test</title>

<link rel="stylesheet" href="../../resources/js-test-style.css"/>

<script src="../../js/js-test-pre.js"></script>

<script src="../../js/webgl-test-utils.js"></script>

</head>

<body>

<div id="description"></div>

<canvas id="canvas" width="64" height="64"> </canvas>

<div id="console"></div>

<script id="vs" type="x-shader/x-vertex">

varying vec4 v_color;

// The X and Y coordinates of the center of the point.

attribute vec2 a_vertex;

uniform float u_pointSize;

void main(void) {

  gl_PointSize = u_pointSize;

  gl_Position = vec4(a_vertex, 0.0, 1.0);

  // The color of the point.

  v_color = vec4(0.0, 1.0, 0.0, 1.0);

</script>

<script id="fs" type="x-shader/x-fragment">

precision mediump float;

varying vec4 v_color;

void main(void) {

  // It seems as long as this mathematical expression references

  // gl_PointCoord, the fragment's color is incorrect.

  vec2 diff = gl_PointCoord - vec2(.5, .5);

  if (length(diff) > 0.5)

    discard;

  // The point should be a solid color.

  gl_FragColor = v_color;

</script>

<script>

"use strict";

// Radar 13239314

description("This is a regression test for a graphics driver bug affecting end caps on roads in MapsGL.");

debug("");

var wtu = WebGLTestUtils;

var canvas = document.getElementById("canvas");

var canvasWidth = canvas.width;

var canvasHeight = canvas.height;

var output = document.getElementById("console");

var gl = wtu.create3DContext(canvas);

function runTest() {

  var pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);

  // This test can't really run without a maximum point size of at least 2

  if (pointSizeRange[1] < 2.0) {

    debug("This test needs a maximum ALIASED_POINT_SIZE_RANGE of at least 2");

    return;

  var vs = wtu.loadShaderFromScript(gl, "vs", gl.VERTEX_SHADER);

  var fs = wtu.loadShaderFromScript(gl, "fs", gl.FRAGMENT_SHADER);

  if (!vs || !fs) {

    testFailed("Loading shaders failed");

    return;

  var program = wtu.setupProgram(gl, [vs, fs], ['a_vertex']);

  if (!program) {

    testFailed("Loading program failed");

    return;

  gl.useProgram(program);

  gl.clearColor(0, 0, 0, 1.0);

  gl.disable(gl.DEPTH_TEST);

  gl.clear(gl.COLOR_BUFFER_BIT);

  // uniform float u_pointSize;

  var uni = gl.getUniformLocation(program, 'u_pointSize');

  gl.uniform1f(uni, Math.min(20.0, pointSizeRange[1]));

  // vertex

  var buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  var vertexData = new Float32Array([

    0, 0,

]);

  gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

  gl.enableVertexAttribArray(0);

  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  gl.drawArrays(gl.POINTS, 0, 1);

  wtu.checkCanvasRect(gl, canvasWidth / 2, canvasHeight / 2, 1, 1,

      [0, 255, 0, 255], "Center pixel should be green", 2);

runTest();

debug("");

var successfullyParsed = true;

</script>

<script src="../../js/js-test-post.js"></script>

</body>

</html>