summaryrefslogtreecommitdiffstats
path: root/dom/canvas/test/webgl-conf/checkout/conformance/glsl/bugs/conditional-texture-fetch.html
blob: f382b8c800175388d73e6dafb95f87ae521005e9 (plain)
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
<!--
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>Conditional texture fetch 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>
<script src="../../../js/glsl-conformance-test.js"></script>
</head>
<body>
<canvas id="output" style="border: none;" width="64" height="64"></canvas>
<div id="description"></div>
<div id="console"></div>
<script id="vshaderConditionalTextureFetch" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec4 a_canvasTileColor;
attribute vec2 a_texCoord;
varying vec2 texCoord;
varying vec4 canvasTileColor;
void main()
{
    canvasTileColor = a_canvasTileColor;
    texCoord = a_texCoord;
    gl_Position = vec4(a_position, 0.0, 1.0);
}
</script>
<script id="fshaderConditionalTextureFetch" type="x-shader/x-fragment">
precision mediump float;
varying vec4 canvasTileColor;
uniform bool hasTexture;
uniform sampler2D canvasTileTexture;
varying vec2 texCoord;
uniform vec4 uvRect;
void main()
{
    vec4 finalColor = canvasTileColor;
    if (hasTexture) {
        vec2 clampedUV = clamp(texCoord.xy, uvRect.xy, uvRect.zw);
        finalColor = texture2D(canvasTileTexture, clampedUV);
    }
    gl_FragColor = finalColor;
}
</script>
<script type="text/javascript">
"use strict";
description();
debug("If the test passes correctly the viewport will be green.");

var wtu = WebGLTestUtils;
var canvas = document.getElementById("output");
var gl = wtu.create3DContext(canvas);

var createGreenTexture = function() {
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    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);
    wtu.fillTexture(gl, texture, 1, 1, [0, 255, 0, 255]);
    gl.bindTexture(gl.TEXTURE_2D, null);
    return texture;
};

var test = function(greenTexture) {
    // This is a reduced test case for a problem reported by Figma.
    // Program compilation produces the following warning/error on ANGLE's
    // D3D9 backend:
    // [WARNING:angle_platform_impl.cc(51)] : rx::HLSLCompiler::compileToBinary(228): C:\fakepath(26,12): error X6077: texld/texldb/texldp/dsx/dsy instructions with r# as source cannot be used inside dynamic conditional 'if' blocks, dynamic conditional subroutine calls, or loop/rep with break*.
    //
    // All of the operations in the shader -- including the clamping of the
    // texture coordinates -- seem to be needed in order to provoke this
    // error.
    //
    // However, this doesn't seem to produce incorrect rendering results.
    var program = wtu.setupProgram(
        gl,
        ["vshaderConditionalTextureFetch",
         "fshaderConditionalTextureFetch"],
        ["a_position", "a_canvasTileColor", "a_texCoord"],
        [0, 1, 2],
        true);
    if (!program) {
        testFailed("Shader compilation/link failed");
    } else {
        // Set up buffers
        wtu.setupUnitQuad(gl, 0, 2);

        // Set up constant color (red)
        gl.vertexAttrib4f(1, 1, 0, 0, 1);

        var uniformMap = wtu.getUniformMap(gl, program);

        // Use texturing
        gl.uniform1i(uniformMap["hasTexture"].location, 1);

        // Bind texture
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, greenTexture);
        gl.uniform1i(uniformMap["canvasTileTexture"].location, 0);

        // Set up (essentially no-op) clamp rectangle
        gl.uniform4f(uniformMap["uvRect"].location, 0, 0, 0.25, 0.25);

        // Draw
        wtu.clearAndDrawUnitQuad(gl);

        // Verify output
        wtu.checkCanvas(gl, [0, 255, 0, 255], "should be green", 1);
    }
};

if (!gl) {
    testFailed("context does not exist");
} else {
    var tex = createGreenTexture();
    test(tex);
}
var successfullyParsed = true;
</script>
<script src="../../../js/js-test-post.js"></script>
</body>
</html>