diff options
Diffstat (limited to 'dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/tex-image-and-sub-image-2d-with-array-buffer-view.html')
| -rw-r--r-- | dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/tex-image-and-sub-image-2d-with-array-buffer-view.html | 304 |
1 files changed, 304 insertions, 0 deletions
diff --git a/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/tex-image-and-sub-image-2d-with-array-buffer-view.html b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/tex-image-and-sub-image-2d-with-array-buffer-view.html new file mode 100644 index 0000000000..34c94a68a7 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/tex-image-and-sub-image-2d-with-array-buffer-view.html @@ -0,0 +1,304 @@ +<!-- +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"> +<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> +<canvas id="example" width="16" height="16"></canvas> +<div id="description"></div> +<div id="console"></div> +<script> +"use strict"; +description('Verifies texImage2D and texSubImage2D code paths taking ArrayBufferView'); + +var wtu = WebGLTestUtils; + +function roundUpToAlignment(value, alignment) { + return Math.floor((value + alignment - 1) / alignment) * alignment; +} + +function generateRGBAData(type, unpackAlignment, sourceData, width, height) +{ + var numColors = sourceData.length / 4; + var colorOffset = function(y) { + return 4 * Math.floor(y * numColors / height); + }; + + switch (type) { + case gl.UNSIGNED_BYTE: { + var rowWidth = roundUpToAlignment(width * 4, unpackAlignment); + var data = new Uint8Array(height * rowWidth); + for (var y = 0; y < height; ++y) { + var index = y * rowWidth; + var offset = colorOffset(y); + for (var element = 0; element < width * 4; ++element) { + data[index + element] = sourceData[offset + element % 4]; + } + } + return data; + } + case gl.UNSIGNED_SHORT_4_4_4_4: { + var rowWidth = roundUpToAlignment(width * 2, unpackAlignment) / 2; + var data = new Uint16Array(height * rowWidth); + for (var y = 0; y < height; ++y) { + var offset = colorOffset(y); + for (var x = 0; x < width; ++x) { + var index = y * rowWidth + x; + data[index] = (((sourceData[offset + 0] & 0xF0) << 8) + | ((sourceData[offset + 1] & 0xF0) << 4) + | ((sourceData[offset + 2] & 0xF0) >> 0) + | ((sourceData[offset + 3] & 0xF0) >> 4)); + } + } + return data; + } + case gl.UNSIGNED_SHORT_5_5_5_1: { + var rowWidth = roundUpToAlignment(width * 2, unpackAlignment) / 2; + var data = new Uint16Array(height * rowWidth); + for (var y = 0; y < height; ++y) { + var offset = colorOffset(y); + for (var x = 0; x < width; ++x) { + var index = y * rowWidth + x; + data[index] = (((sourceData[offset + 0] & 0xF8) << 8) + | ((sourceData[offset + 1] & 0xF8) << 3) + | ((sourceData[offset + 2] & 0xF8) >> 2) + | ((sourceData[offset + 3] & 0x80) >> 7)); + } + } + return data; + } + } +} + +function typeToString(type) +{ + switch (type) { + case gl.UNSIGNED_BYTE: return 'UNSIGNED_BYTE'; + case gl.UNSIGNED_SHORT_5_5_5_1: return 'UNSIGNED_SHORT_5_5_5_1'; + case gl.UNSIGNED_SHORT_4_4_4_4: return 'UNSIGNED_SHORT_4_4_4_4'; + } + return 'Unknown type ' + type; +} + +function runOneIteration(useTexSubImage2D, type, unpackAlignment, flipY, premultiplyAlpha, + topColor, bottomColor, extraColor, bindingTarget, program) +{ + debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') + + ' with type=' + typeToString(type) + + ', unpackAlignment=' + unpackAlignment + + ', flipY=' + flipY + ', premultiplyAlpha=' + premultiplyAlpha + + ', bindingTarget=' + (bindingTarget == gl.TEXTURE_2D ? 'TEXTURE_2D' : 'TEXTURE_CUBE_MAP')); + gl.colorMask(true, true, true, true); + gl.clearColor(0, 0, 0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + // Enable writes to the RGB channels + gl.colorMask(true, true, true, false); + var texture = gl.createTexture(); + // Bind the texture to texture unit 0 + gl.bindTexture(bindingTarget, texture); + // Set up texture parameters + gl.texParameteri(bindingTarget, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(bindingTarget, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + // Set up pixel store parameters + gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment); + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiplyAlpha); + // Generate the data + var sourceData = [ 255, 0, 0, 255, + 0, 255, 0, 0 ]; + var texWidth = 5; // this must be mod 4 + 1 to test unpackAlignment + // cube map texture must be square. + if (bindingTarget == gl.TEXTURE_CUBE_MAP) + texWidth = 16; + var texHeight = 16; + var data = generateRGBAData(type, unpackAlignment, sourceData, texWidth, texHeight); + if (gl.getError() != gl.NO_ERROR) + testFailed("GL error before texture upload"); + var targets = [gl.TEXTURE_2D]; + if (bindingTarget == gl.TEXTURE_CUBE_MAP) { + targets = [gl.TEXTURE_CUBE_MAP_POSITIVE_X, + gl.TEXTURE_CUBE_MAP_NEGATIVE_X, + gl.TEXTURE_CUBE_MAP_POSITIVE_Y, + gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, + gl.TEXTURE_CUBE_MAP_POSITIVE_Z, + gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]; + } + // Upload the image into the texture + for (var tt = 0; tt < targets.length; ++tt) { + if (useTexSubImage2D) { + // Initialize the texture to black first + gl.texImage2D(targets[tt], 0, gl.RGBA, texWidth, texHeight, 0, + gl.RGBA, type, null); + if (gl.getError() != gl.NO_ERROR) + testFailed("GL error after texImage2D(null)"); + gl.texSubImage2D(targets[tt], 0, 0, 0, texWidth, texHeight, gl.RGBA, type, data); + if (gl.getError() != gl.NO_ERROR) + testFailed("GL error after texSubImage2D"); + } else { + gl.texImage2D(targets[tt], 0, gl.RGBA, texWidth, texHeight, 0, gl.RGBA, type, data); + if (gl.getError() != gl.NO_ERROR) + testFailed("GL error after texImage2D"); + } + } + + var testWidth = gl.drawingBufferWidth; + var testHeight = gl.drawingBufferHeight / 2; + + var loc; + if (bindingTarget == gl.TEXTURE_CUBE_MAP) { + loc = gl.getUniformLocation(program, "face"); + } + + for (var tt = 0; tt < targets.length; ++tt) { + if (bindingTarget == gl.TEXTURE_CUBE_MAP) { + gl.uniform1i(loc, targets[tt]); + } + + // Draw the triangles + wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); + + // Check the top pixel and bottom pixel and make sure they have + // the right color. + var rects = [wtu.makeCheckRect(0, 0, testWidth, testHeight, bottomColor, "bottom pixel should be " + bottomColor, 0), + wtu.makeCheckRect(0, testHeight, testWidth, testHeight, topColor, "top pixel should be " + topColor, 0)]; + wtu.checkCanvasRects(gl, rects); + } + + // Change part of the texture. + var partWidth = 16; + var partHeight = 16; + // make texture double res of part. + var data = generateRGBAData(type, unpackAlignment, sourceData, partWidth * 2, partHeight * 2); + for (var tt = 0; tt < targets.length; ++tt) { + gl.texImage2D(targets[tt], 0, gl.RGBA, partWidth * 2, partHeight * 2, 0, gl.RGBA, type, data); + } + // set part. + var extraData = [ + 255, 0, 0, 255, + 0, 0, 255, 0 + ]; + var data = generateRGBAData(type, unpackAlignment, extraData, partWidth, partHeight); + for (var tt = 0; tt < targets.length; ++tt) { + gl.texSubImage2D(targets[tt], 0, 0, 0, partWidth, partHeight, gl.RGBA, type, data); + } + var halfWidth = gl.drawingBufferWidth / 2; + var halfHeight = gl.drawingBufferHeight / 2; + var quarterHeight = gl.drawingBufferHeight / 4; + var red = [255, 0, 0, 255]; + var tcolor0 = flipY ? extraColor : red; + var tcolor1 = flipY ? red : extraColor; + + for (var tt = 0; tt < targets.length; ++tt) { + if (bindingTarget == gl.TEXTURE_CUBE_MAP) { + gl.uniform1i(loc, targets[tt]); + } + + wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); + wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); + var rects = [wtu.makeCheckRect(0, 0, halfWidth, quarterHeight, tcolor0, "bottom left bottom pixels should be " + tcolor0, 0), + wtu.makeCheckRect(0, quarterHeight, halfWidth, quarterHeight, tcolor1, "bottom left top pixels should be " + tcolor1, 0), + wtu.makeCheckRect(halfWidth, 0, halfWidth, halfHeight, bottomColor, "bottom right pixels should be " + bottomColor, 0), + wtu.makeCheckRect(0, halfHeight, testWidth, halfHeight, topColor, "top pixels should be " + topColor, 0)]; + wtu.checkCanvasRects(gl, rects); + } + + // set far corner. + for (var tt = 0; tt < targets.length; ++tt) { + gl.texSubImage2D(targets[tt], 0, partWidth, partHeight, partWidth, partHeight, gl.RGBA, type, data); + } + for (var tt = 0; tt < targets.length; ++tt) { + if (bindingTarget == gl.TEXTURE_CUBE_MAP) { + gl.uniform1i(loc, targets[tt]); + } + + wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); + var rects = [wtu.makeCheckRect(0, 0, halfWidth, quarterHeight, tcolor0, "bottom left bottom pixels should be " + tcolor0, 0), + wtu.makeCheckRect(0, quarterHeight, halfWidth, quarterHeight, tcolor1, "bottom left top pixels should be " + tcolor1, 0), + wtu.makeCheckRect(halfWidth, 0, halfWidth, halfHeight, bottomColor, "bottom left pixels should be " + bottomColor, 0), + wtu.makeCheckRect(0, halfHeight, halfWidth, halfHeight, topColor, "top right pixels should be " + topColor, 0), + wtu.makeCheckRect(halfWidth, halfHeight, halfWidth, quarterHeight, tcolor0, "top right bottom pixels should be " + tcolor0, 0), + wtu.makeCheckRect(halfWidth, halfHeight + quarterHeight, halfWidth, quarterHeight, tcolor1, "top right top pixels should be " + tcolor1, 0)]; + wtu.checkCanvasRects(gl, rects); + } +} + +function runTest(bindingTarget, program) +{ + var red = [255, 0, 0, 255]; + var green = [0, 255, 0, 255]; + var blue = [0, 0, 255, 255]; + var redPremultiplyAlpha = [255, 0, 0, 255]; + var greenPremultiplyAlpha = [0, 0, 0, 255]; + var bluePremultiplyAlpha = [0, 0, 0, 255]; + + var types = [ gl.UNSIGNED_BYTE, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORT_4_4_4_4 ]; + var unpackAlignments = [ 1, 2, 4, 8 ]; + + var cases = [ + { sub: false, flipY: true, premultiplyAlpha: false, topColor: red, bottomColor: green, extraColor: blue }, + { sub: false, flipY: false, premultiplyAlpha: false, topColor: green, bottomColor: red, extraColor: blue }, + { sub: false, flipY: true, premultiplyAlpha: true, topColor: redPremultiplyAlpha, bottomColor: greenPremultiplyAlpha, extraColor: bluePremultiplyAlpha }, + { sub: false, flipY: false, premultiplyAlpha: true, topColor: greenPremultiplyAlpha, bottomColor: redPremultiplyAlpha, extraColor: bluePremultiplyAlpha }, + { sub: true, flipY: true, premultiplyAlpha: false, topColor: red, bottomColor: green, extraColor: blue }, + { sub: true, flipY: false, premultiplyAlpha: false, topColor: green, bottomColor: red, extraColor: blue }, + { sub: true, flipY: true, premultiplyAlpha: true, topColor: redPremultiplyAlpha, bottomColor: greenPremultiplyAlpha, extraColor: bluePremultiplyAlpha }, + { sub: true, flipY: false, premultiplyAlpha: true, topColor: greenPremultiplyAlpha, bottomColor: redPremultiplyAlpha, extraColor: bluePremultiplyAlpha }, + ]; + + for (var i in types) { + for (var j in unpackAlignments) { + for (var k in cases) { + runOneIteration(cases[k].sub, types[i], unpackAlignments[j], cases[k].flipY, cases[k].premultiplyAlpha, + cases[k].topColor, cases[k].bottomColor, cases[k].extraColor, bindingTarget, program); + } + } + } +} + +var gl = wtu.create3DContext("example"); + +var program = wtu.setupTexturedQuad(gl); +runTest(gl.TEXTURE_2D, program); +program = wtu.setupTexturedQuadWithCubeMap(gl); +runTest(gl.TEXTURE_CUBE_MAP, program); + +wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); + +const tex = gl.createTexture(); +gl.bindTexture(gl.TEXTURE_2D, tex); + +const validDatas = [ + `new Uint8Array(4)`, + `new Uint8Array(new ArrayBuffer(4))`, + `new Uint8ClampedArray(4)`, + `new Uint8ClampedArray(new ArrayBuffer(4))`, +]; +if (window.SharedArrayBuffer) { + validDatas.push( + `new Uint8Array(new SharedArrayBuffer(4))`, + `new Uint8ClampedArray(new SharedArrayBuffer(4))` + ); +} +for (const x of validDatas) { + shouldNotThrow(`gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1,1, 0, gl.RGBA, gl.UNSIGNED_BYTE, ${x});`); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); + shouldNotThrow(`gl.texSubImage2D(gl.TEXTURE_2D, 0, 0,0, 1,1, gl.RGBA, gl.UNSIGNED_BYTE, ${x});`); + wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); +} + +var successfullyParsed = true; +</script> +<script src="../../../js/js-test-post.js"></script> +</body> +</html> |