| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="./resources/webgl-test-utils-full.js"></script> |
| <script src="./resources/tex-image-and-sub-image-utils.js"></script> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| |
| <script id='myWorker' type='text/worker'> |
| self.onmessage = function(e) { |
| var canvas = new OffscreenCanvas(128, 128); |
| var gl = canvas.getContext('webgl'); |
| gl.clearColor(1.0, 1.0, 0.0, 1.0); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| var image = canvas.transferToImageBitmap(); |
| self.postMessage({bitmap: image}, [image]); |
| }; |
| </script> |
| |
| <script> |
| window.jsTestIsAsync = true; |
| |
| var wtu = WebGLTestUtils; |
| var tiu = TexImageUtils; |
| var internalFormat = "RGBA"; |
| var pixelFormat = "RGBA"; |
| var pixelType = "UNSIGNED_BYTE"; |
| var blob = new Blob([document.getElementById('myWorker').textContent]); |
| var worker = new Worker(URL.createObjectURL(blob)); |
| var bitmap; |
| |
| var canvas = document.createElement("canvas"); |
| canvas.width = 128; |
| canvas.height = 128; |
| var ctx = canvas.getContext('bitmaprenderer'); |
| |
| var width = 32; |
| var height = 32; |
| var canvas2d = document.createElement("canvas"); |
| canvas2d.width = width; |
| canvas2d.height = height; |
| var gl = canvas2d.getContext('webgl'); |
| gl.clearColor(0,0,0,1); |
| gl.clearDepth(1); |
| gl.disable(gl.BLEND); |
| |
| function checkCanvas(buf, width, height) |
| { |
| for (var i = 0; i < width * height; i++) { |
| if (buf[i * 4] != 255 || buf[i * 4 + 1] != 255 || |
| buf[i * 4 + 2] != 0 || buf[i * 4 + 3] != 255) { |
| testFailed("This pixel should be red, but it is: [" + buf[i * 4] + ", " + |
| buf[i * 4 + 1] + ", " + buf[i * 4 + 2] + ", " + buf[i * 4 + 3] + "]."); |
| finishJSTest(); |
| } |
| } |
| } |
| |
| function runTestOnBindingTarget(bindingTarget, program, bitmap) |
| { |
| gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| // Enable writes to the RGBA channels |
| gl.colorMask(1, 1, 1, 0); |
| 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); |
| |
| var targets = [gl.TEXTURE_2D]; |
| // Upload the image into the texture |
| for (var tt = 0; tt < targets.length; ++tt) { |
| gl.texImage2D(targets[tt], 0, gl[internalFormat], gl[pixelFormat], gl[pixelType], bitmap); |
| } |
| for (var tt = 0; tt < targets.length; ++tt) { |
| // Draw the triangles |
| gl.clearColor(0, 0, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| gl.drawArrays(gl.TRIANGLES, 0, 6); |
| |
| var buf = new Uint8Array(width * height * 4); |
| gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf); |
| checkCanvas(buf, width, height); |
| } |
| } |
| |
| worker.onmessage = function(msg) { |
| bitmap = msg.data.bitmap; |
| var program = tiu.setupTexturedQuad(gl, internalFormat); |
| runTestOnBindingTarget(gl.TEXTURE_2D, program, bitmap); |
| testPassed("This test passed"); |
| finishJSTest(); |
| } |
| worker.postMessage(""); |
| |
| </script> |
| </html> |
