1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<!--
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>TexImage2D of 2D Canvas after multiple drawImages</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>
<script>
"use strict";
const wtu = WebGLTestUtils;
const sz = 512;
let greenImage = null;
function loadImageAndStart(startFunc) {
let c = document.createElement('canvas');
c.width = sz;
c.height = sz;
let ctx = c.getContext('2d');
ctx.fillStyle = 'rgb(0,255,0)';
ctx.fillRect(0, 0, sz, sz);
greenImage = wtu.makeImageFromCanvas(c, startFunc);
}
function runTest() {
description();
debug('Regression test for <a href="http://crbug.com/878545">http://crbug.com/878545</a>');
// Mimics the image-to-texture upload path from the old JavaScript
// port of O3D, salvaged at https://github.com/petersont/o3d .
// Create a canvas and draw the entire image into it.
let bigCanvas = document.createElement('canvas');
bigCanvas.width = greenImage.naturalWidth;
bigCanvas.height = greenImage.naturalHeight;
let bc = bigCanvas.getContext('2d');
bc.drawImage(greenImage, 0, 0, bigCanvas.width, bigCanvas.height);
// Create a temp canvas to flip vertically.
let tempCanvas = document.createElement('canvas');
tempCanvas.width = bigCanvas.width;
tempCanvas.height = bigCanvas.height;
let tc = tempCanvas.getContext('2d');
tc.translate(0, tempCanvas.height);
tc.scale(1, -1);
tc.drawImage(bigCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
// Set up to draw via WebGL.
let c3d = document.getElementById('canvas');
let gl = wtu.create3DContext(c3d);
let prog = wtu.setupTexturedQuad(gl);
gl.uniform1i(gl.getUniformLocation(prog, 'tex'), 0);
let tex = gl.createTexture();
// Iterate through the large canvas, drawing pieces of it to a
// scratch canvas.
let scratchCanvas = document.createElement('canvas');
const width = tempCanvas.width / 2;
const height = tempCanvas.height / 2;
let bb = new Uint8Array(4 * c3d.width * c3d.height);
for (let jj = 0; jj < 2; ++jj) {
for (let ii = 0; ii < 2; ++ii) {
// Prepare texture.
scratchCanvas.width = width;
scratchCanvas.height = height;
let ctx = scratchCanvas.getContext('2d');
ctx.save();
ctx.translate(-(ii * width), -(jj * height));
ctx.scale(1.0, 1.0);
ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
scratchCanvas);
ctx.restore();
gl.generateMipmap(gl.TEXTURE_2D);
// Draw and check that rendering occurred properly.
gl.uniform1i(gl.getUniformLocation(prog, 'tex'), 0);
wtu.drawUnitQuad(gl);
let tolerance = 2;
wtu.checkCanvasRect(gl, 1, 1, c3d.width - 2, c3d.height - 2,
[ 0, 255, 0, 255 ],
"should be green",
tolerance);
}
}
finishTest();
}
</script>
</head>
<body onload="loadImageAndStart(runTest)">
<div id="description"></div>
<div id="console"></div>
<canvas id="canvas" width="40" height="40"></canvas>
</body>
</html>
|
