LayoutTests/fast/canvas/webgl/copy-tex-image-and-sub-image-2d.html

   1 <html>
   2 <head>
   3 <script src="../../js/resources/js-test-pre.js"></script>
   4 <script src="resources/webgl-test.js"></script>
   5 <script id="vshader" type="x-shader/x-vertex">
   6 attribute vec3 g_Position;
   7 attribute vec2 g_TexCoord0;
   8
   9 varying vec2 texCoord;
  10
  11 void main()
  12 {
  13     gl_Position = vec4(g_Position.x, g_Position.y, g_Position.z, 1.0);
  14     texCoord = g_TexCoord0;
  15 }
  16 </script>
  17
  18 <script id="fshader" type="x-shader/x-fragment">
  19 #ifdef GL_ES
  20 precision mediump float;
  21 #endif
  22 uniform sampler2D tex;
  23 varying vec2 texCoord;
  24 void main()
  25 {
  26     gl_FragColor = texture2D(tex, texCoord);
  27 }
  28 </script>
  29
  30 <script>
  31
  32 function init()
  33 {
  34     if (window.initNonKhronosFramework) {
  35         window.initNonKhronosFramework(true);
  36     }
  37
  38     description('Verify copyTexImage2D and copyTexSubImage2D');
  39
  40     runTest();
  41 }
  42
  43 // These two declarations need to be global for "shouldBe" to see them
  44 var pixel = [0, 0, 0];
  45 var correctColor = null;
  46 var gl = null;
  47
  48 function runTestIteration(antialias)
  49 {
  50     if (antialias)
  51         gl = initWebGL("antialiasOn", "vshader", "fshader", [ "g_Position", "g_TexCoord0" ], [ 0, 0, 0, 1 ], 1);
  52     else
  53         gl = initWebGL("antialiasOff", "vshader", "fshader", [ "g_Position", "g_TexCoord0" ], [ 0, 0, 0, 1 ], 1, { antialias: false });
  54
  55     var textureLoc = gl.getUniformLocation(gl.program, "tex");
  56
  57     var vertices = new Float32Array([
  58          1.0,  1.0, 0.0,
  59         -1.0,  1.0, 0.0,
  60         -1.0, -1.0, 0.0,
  61          1.0,  1.0, 0.0,
  62         -1.0, -1.0, 0.0,
  63          1.0, -1.0, 0.0]);
  64     var texCoords = new Float32Array([
  65         1.0, 1.0,
  66         0.0, 1.0,
  67         0.0, 0.0,
  68         1.0, 1.0,
  69         0.0, 0.0,
  70         1.0, 0.0]);
  71     var texCoordOffset = vertices.byteLength;
  72
  73     var vbo = gl.createBuffer();
  74     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  75     gl.bufferData(gl.ARRAY_BUFFER,
  76                   texCoordOffset + texCoords.byteLength,
  77                   gl.STATIC_DRAW);
  78     gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
  79     gl.bufferSubData(gl.ARRAY_BUFFER, texCoordOffset, texCoords);
  80
  81     gl.enableVertexAttribArray(0);
  82     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  83     gl.enableVertexAttribArray(1);
  84     gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, texCoordOffset);
  85
  86     gl.colorMask(1, 1, 1, 0);
  87     gl.disable(gl.BLEND);
  88     debug('Testing copyTexImage2D');
  89
  90     // Red canvas
  91     gl.clearColor(1, 0, 0, 1);
  92     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  93
  94     var texture = gl.createTexture();
  95     // Bind the texture to texture unit 0
  96     gl.bindTexture(gl.TEXTURE_2D, texture);
  97     // Set up texture
  98     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  99     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 100     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 101
 102     glErrorShouldBe(gl, gl.NO_ERROR);
 103     gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, 2, 2, 0);
 104     glErrorShouldBe(gl, gl.NO_ERROR);
 105
 106     // Green canvas
 107     gl.clearColor(0, 1, 0, 1);
 108     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 109
 110     // Point the uniform sampler to texture unit 0
 111     gl.uniform1i(textureLoc, 0);
 112     // Draw the triangles
 113     gl.drawArrays(gl.TRIANGLES, 0, 6);
 114
 115     // Read back the rendering results, should be red
 116     var buf = new Uint8Array(2 * 2 * 4);
 117     gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 118     var idx = 0;
 119     correctColor = [255, 0, 0];
 120     for (var y = 0; y < 2; y++) {
 121         for (var x = 0; x < 2; x++) {
 122             idx = (y * 2 + x) * 4;
 123             pixel[0] = buf[idx];
 124             pixel[1] = buf[idx + 1];
 125             pixel[2] = buf[idx + 2];
 126             shouldBe("pixel", "correctColor");
 127         }
 128     }
 129
 130     debug('Testing copyTexSubImage2D');
 131
 132     // Green canvas
 133     gl.clearColor(0, 1, 0, 1);
 134     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 135
 136     glErrorShouldBe(gl, gl.NO_ERROR);
 137     gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, 2, 2);
 138     glErrorShouldBe(gl, gl.NO_ERROR);
 139
 140     // Blue canvas
 141     gl.clearColor(0, 0, 1, 1);
 142     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 143
 144     // Draw the triangles
 145     gl.drawArrays(gl.TRIANGLES, 0, 6);
 146
 147     // Read back the rendering results, should be green
 148     gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.UNSIGNED_BYTE, buf);
 149     correctColor = [0, 255, 0];
 150     for (var y = 0; y < 2; y++) {
 151         for (var x = 0; x < 2; x++) {
 152             idx = (y * 2 + x) * 4;
 153             pixel[0] = buf[idx];
 154             pixel[1] = buf[idx + 1];
 155             pixel[2] = buf[idx + 2];
 156             shouldBe("pixel", "correctColor");
 157         }
 158     }
 159 }
 160
 161 function runTest(antialias)
 162 {
 163     debug("Testing with antialias on");
 164     runTestIteration(true);
 165     debug("Testing with antialias off");
 166     runTestIteration(false);
 167     var epilogue = document.createElement("script");
 168     epilogue.onload = finish;
 169     epilogue.src = "../../js/resources/js-test-post.js";
 170     document.body.appendChild(epilogue);
 171 }
 172
 173 function finish() {
 174     if (window.nonKhronosFrameworkNotifyDone) {
 175         window.nonKhronosFrameworkNotifyDone();
 176     }
 177 }
 178 </script>
 179 </head>
 180 <body onload="init()">
 181 <canvas id="antialiasOn" width="2px" height="2px"></canvas>
 182 <canvas id="antialiasOff" width="2px" height="2px"></canvas>
 183 <div id="description"></div>
 184 <div id="console"></div>
 185 </body>
 186 </html>