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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
<!--
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>Upload texture from animating transparent WebM or HEVC</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;
let gl;
let successfullyParsed;
let video;
initTestingHarness();
function logVisibility(isOnload)
{
let prefix = '';
if (isOnload)
prefix = 'Upon load: ';
if (document.hidden) {
console.log(prefix + '*** Tab was backgrounded (if running in automated test harness, why?) ***');
} else {
console.log(prefix + 'Tab was foregrounded');
}
}
function init()
{
description("Upload texture from animating transparent WebM or HEVC");
document.addEventListener("visibilitychange", visibilityChanged, false);
logVisibility(true);
const canvas = document.getElementById("example");
gl = wtu.create3DContext(canvas);
const program = wtu.setupTexturedQuad(gl);
const texture = gl.createTexture();
// Bind the texture to texture unit 0
gl.bindTexture(gl.TEXTURE_2D, texture);
const textureLoc = gl.getUniformLocation(program, "tex");
gl.uniform1i(textureLoc, 0);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
video = document.getElementById("vid");
const typeWebM = 'video/webm; codecs="vp8"';
const typeHEVC = 'video/mp4; codecs="hvc1"';
if (!video.canPlayType) {
testFailed("video.canPlayType required method missing");
finishTest();
return;
}
if (!video.canPlayType(typeWebM).replace(/no/, '') && !video.canPlayType(typeHEVC).replace(/no/, '')) {
debug(typeWebM + " unsupported");
debug(typeHEVC + " unsupported");
finishTest();
return;
};
wtu.startPlayingAndWaitForVideo(video, runTest);
}
function visibilityChanged() {
logVisibility(false);
}
function runTest(videoElement)
{
let i = 0;
requestAnimationFrame(function frame() {
runOneIteration(videoElement, false);
runOneIteration(videoElement, true);
++i;
if (i < 120) {
requestAnimationFrame(frame);
} else {
wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
finishTest();
}
});
}
function runOneIteration(videoElement, useTexSubImage2D)
{
// Upload the videoElement into the texture
if (useTexSubImage2D) {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
} else {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
}
// Set up texture parameters
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
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);
// Draw the triangles
wtu.clearAndDrawUnitQuad(gl, [255, 0, 0, 255]);
const tolerance = 20;
const red = [255, 0, 0];
const green = [0, 255, 0];
const blue = [0, 0, 255];
// Check the left and right sides. Make sure that EITHER:
// - Left is green and right is transparent-blended-with-red
let leftIsGreen = false, leftIsRed = false, rightIsBlue = false, rightIsRed = false;
let greenRedError = "", redBlueError = "";
let leftGreenError = "", rightBlueError = "";
let bufLeft, bufRight;
wtu.checkCanvasRectColor(gl, 4, 4, 8, 24, green, tolerance,
/* sameFn */ () => { leftIsGreen = true; }, /* differentFn */ (m, b) => { leftGreenError = m; bufLeft = b;}, debug);
wtu.checkCanvasRectColor(gl, 20, 4, 8, 24, red, tolerance,
/* sameFn */ () => { rightIsRed = true; }, /* differentFn */ (m, b) => { greenRedError = m; bufRight = b;}, debug);
// - Right is blue and left is transparent-blended-with-red
wtu.checkCanvasRectColor(gl, 20, 4, 8, 24, blue, tolerance,
/* sameFn */ () => { rightIsBlue = true; }, /* differentFn */ (m, b) => { rightBlueError = m; bufRight = b;}, debug);
wtu.checkCanvasRectColor(gl, 4, 4, 8, 24, red, tolerance,
/* sameFn */ () => { leftIsRed = true; }, /* differentFn */ (m, b) => { redBlueError = m; bufLeft = b;}, debug);
if (leftIsGreen) {
if (rightIsRed) {
testPassed("left is green, right is transparent-blended-with-red");
} else {
testFailed("left is green, but: " + greenRedError + "\n" + bufRight);
}
} else if (rightIsBlue) {
if (leftIsRed) {
testPassed("right is blue, left is transparent-blended-with-red");
} else {
testFailed("right is blue, but: " + redBlueError + "\n" + bufLeft);
}
} else {
testFailed("neither left is green nor right is blue \n" + leftGreenError + "\n" + rightBlueError + "\n" + bufLeft + "\n" + bufRight);
}
}
</script>
</head>
<body onload="init()">
<canvas id="example" width="32" height="32"></canvas>
<div id="description"></div>
<div id="console"></div>
<video id="vid" style="display:none;">
<source src="../../../resources/transparent-2frames.mp4" type='video/mp4; codecs="hvc1"' />
<source src="../../../resources/transparent-2frames.webm" type='video/webm; codecs="vp8"' />
</video>
</body>
</html>
|
