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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
<!--
Copyright (c) 2022 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>WebGL framebuffer to texture conformance test.</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>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="description"></div>
<div id="console"></div>
<script>
"use strict";
description("Test resolving multisample depth buffer");
debug('Reduced test case for <a href="https://bugs.webkit.org/show_bug.cgi?id=238118">https://bugs.webkit.org/show_bug.cgi?id=238118</a>');
// Reproduces an inconistent behavior where if:
// 1) You render into a multisampling frame buffer
// 2) Geometry is drawn with DEPTH_TEST disabled and then enabled
// 3) More than one frame is rendered via requestAnimationFrame
const size = 64;
const halfSize = size / 2;
let wtu = WebGLTestUtils;
let canvas = document.getElementById("canvas");
canvas.width = size;
canvas.height = size;
let gl = wtu.create3DContext("canvas", {}, 2);
function createTexture(res, format, bytes) {
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texStorage2D(gl.TEXTURE_2D, 1, format, res, res);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
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);
gl.bindTexture(gl.TEXTURE_2D, null);
return texture;
}
function createRenderBuffer(res, format, samples) {
let rb = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
if (samples > 1)
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, format, res, res);
else
gl.renderbufferStorage(gl.RENDERBUFFER, format, res, res);
return rb;
}
let yellowQuadVAO = gl.createVertexArray();
gl.bindVertexArray(yellowQuadVAO);
let yellowQuadProgram = wtu.setupColorQuad(gl, 0, { scale: 0.75 });
let blueQuadVAO = gl.createVertexArray();
gl.bindVertexArray(blueQuadVAO);
let blueQuadProgram = wtu.setupColorQuad(gl, 0, { scale: 0.5 });
let fsVAO = gl.createVertexArray();
gl.bindVertexArray(fsVAO);
let fsProgram = wtu.setupTexturedQuad(gl, 0, 1);
gl.useProgram(fsProgram);
let fsTexLoc = gl.getUniformLocation(fsProgram, "tex");
gl.uniform1i(fsTexLoc, 0);
// An incorrect render can occur if...
// 1) You use renderbufferStorageMultisample.
const msaaSamples = 4;
const colorRB = createRenderBuffer(size, gl.RGBA8, msaaSamples);
const depthRB = createRenderBuffer(size, gl.DEPTH_COMPONENT16, msaaSamples);
const resolveTex = createTexture(size, gl.RGBA8);
let renderFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, renderFBO);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorRB);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRB);
let resolveFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, resolveFBO);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, resolveTex, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.disable(gl.CULL_FACE);
gl.disable(gl.BLEND);
var frameCount = 0;
function runTest() {
// 2) Render from requestAnimationFrame, only starting with the 2nd frame.
gl.bindFramebuffer(gl.FRAMEBUFFER, renderFBO);
// Clear background red
gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
// 3) You disable gl.DEPTH_TEST
gl.disable(gl.DEPTH_TEST);
gl.depthMask(false);
gl.bindVertexArray(yellowQuadVAO);
gl.useProgram(yellowQuadProgram);
wtu.drawUByteColorQuad(gl, [ 255, 255, 0, 255 ]);
// 4) And re-enable gl.DEPTH_TEST
gl.enable(gl.DEPTH_TEST);
gl.depthMask(true);
gl.bindVertexArray(blueQuadVAO);
gl.useProgram(blueQuadProgram);
wtu.drawUByteColorQuad(gl, [ 0, 0, 255, 255 ]);
// Resolve the multisample framebuffer to a texture
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, renderFBO);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, resolveFBO);
gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 0.0]);
gl.blitFramebuffer(0, 0, size, size,
0, 0, size, size,
gl.COLOR_BUFFER_BIT, gl.LINEAR);
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
// Draw the resolved texture to the backbuffer
gl.bindTexture(gl.TEXTURE_2D, resolveTex);
gl.useProgram(fsProgram);
gl.bindVertexArray(fsVAO);
wtu.drawUnitQuad(gl);
// 5) The incorrect render can occur on the second rendered frame, called from
// requestAnimationFrame.
frameCount++;
if (frameCount == 2) {
checkRenderingResults("multisampling-depth-resolve");
wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors at the end of the test.");
finishTest();
} else {
requestAnimationFrame(runTest);
}
}
requestAnimationFrame(runTest);
function checkRenderingResults(prefix) {
// Outer color should be red
wtu.checkCanvasRect(gl,
1, 1,
2, 2,
[255, 0, 0, 255],
prefix + ": outer pixels should be red");
// Outer quad should be rendered yellow.
wtu.checkCanvasRect(gl,
10, 10,
2, 2,
[255, 255, 0, 255],
prefix + ": outer quad should be yellow");
// Center quad should be rendered blue.
wtu.checkCanvasRect(gl,
halfSize / 2 + 1, halfSize / 2 + 1,
2, 2,
[0, 0, 255, 255],
prefix + ": center quad should be blue");
}
var successfullyParsed = true;
</script>
</body>
</html>
|
