test_webgl2_alpha_luminance.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>WebGL2 test: Alpha and Luminance Textures</title>

<script src="/tests/SimpleTest/SimpleTest.js"></script>

<link rel="stylesheet" href="/tests/SimpleTest/test.css">

<script src="driver-info.js"></script>

<script src="webgl-util.js"></script>

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

>#version 300 es

in vec2 aTexCoord;

out vec2 vTexCoord;

void main() {

  vec2 pos = vec2(2.0)*aTexCoord - vec2(1.0);

  gl_Position = vec4(pos, 0.0, 1.0);

  vTexCoord = aTexCoord;

</script>

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

>#version 300 es

precision mediump float;

in vec2 vTexCoord;

uniform sampler2D uTex;

out vec4 oFragColor;

void main() {

  oFragColor = texture(uTex, vTexCoord);

</script>

<body>

<canvas id="c" width="32" height="32"></canvas>

<script>

  WebGLUtil.withWebGL2('c', function(gl) {

    function testPixel(x, y, refData, infoPrefix) {

      var pixel = new Uint8Array(4);

      gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);

      var pixelMatches = (pixel[0] == refData[0] &&

                          pixel[1] == refData[1] &&

                          pixel[2] == refData[2] &&

                          pixel[3] == refData[3]);

      var expectedStr = '[' + refData.join(', ') + ']';

      var actualStr   = '[' +   pixel.join(', ') + ']';

      if (pixelMatches) {

        ok(true, infoPrefix + 'Expected ' + expectedStr + '.');

      } else {

        ok(false, infoPrefix + 'Expected ' + expectedStr + ', was ' + actualStr + '.');

    function testTexture(details, prog) {

      prog.aTexCoord = gl.getAttribLocation(prog, "aTexCoord");

      ok(prog.aTexCoord >= 0, '`aTexCoord` should be valid.');

      var tex = gl.createTexture();

      gl.bindTexture(gl.TEXTURE_2D, tex);

      gl.texImage2D(gl.TEXTURE_2D, 0, details.format, 1, 1, 0,

                    details.format, gl.UNSIGNED_BYTE, details.texData);

      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

      gl.useProgram(prog);

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

      gl.enableVertexAttribArray(prog.aTexCoord);

      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

      testPixel(0, 0, details.result, details.info + ': ');

      return true;

    var prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');

    if (!prog) {

      ok(false, 'Program linking should succeed.');

      return;

    gl.disable(gl.DEPTH_TEST);

    var vertData = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, vertData);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0, 0, 1, 0, 0, 1, 1, 1 ]), gl.STATIC_DRAW);

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

    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

    var details = [

      { info: 'Luminance8', format: gl.LUMINANCE, texData: new Uint8Array([ 128 ]),

        result: [128, 128, 128, 255] },

      { info: 'Alpha8', format: gl.ALPHA, texData: new Uint8Array([ 128 ]),

        result: [0, 0, 0, 128] },

      { info: 'Luminance8Alpha8', format: gl.LUMINANCE_ALPHA, texData: new Uint8Array([ 128, 128 ]),

        result: [128, 128, 128, 128] },

];

    for (var i = 0; i < details.length; i++) {

      if (!testTexture(details[i], prog)) {

        return;

    ok(true, 'Test complete.');

  }, function() {

    SimpleTest.finish();

});

  SimpleTest.waitForExplicitFinish();

</script>