javascript - WebGL2 row_major 限定符意外工作

问题描述

我刚刚从https://www.khronos.org/registry/webgl/sdk/tests/conformance2/glsl3/matrix-row-major.html?webglVersion=2&dumpShaders=undefined&quiet=0写了一个演示：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Row-major matrix test</title>
  <link rel="stylesheet" href="https://www.khronos.org/registry/webgl/sdk/tests/resources/js-test-style.css" />
  <script src="https://www.khronos.org/registry/webgl/sdk/tests/js/js-test-pre.js"></script>
  <script src="https://www.khronos.org/registry/webgl/sdk/tests/js/webgl-test-utils.js"></script>
  <script src="https://www.khronos.org/registry/webgl/sdk/tests/js/glsl-conformance-test.js"></script>
</head>

<body>
  <div id="description"></div>
  <div id="console"></div>
  <script id="vshaderUniformMatrixRowMajor" type="x-shader/x-vertex">#version 300 es
out vec2 pos;
in vec4 vPosition;
in vec2 texCoord0;
void main()
{
  pos = texCoord0;
  pos.y = 1.0 - pos.y;
  gl_Position = vPosition;
}
</script>
  <script id="fshaderUniformMatrixRowMajor" type="x-shader/x-fragment">#version 300 es
precision mediump float;
in highp vec2 pos;
layout (location = 0) out vec4 my_FragColor;
uniform vec4 m[4];
layout(std140, row_major) uniform type_m2 {
  mat4 mat;
} m2;
void main()
{
  my_FragColor = vec4(m2.mat[int(floor(pos.x * 4.0))][int(floor(pos.y * 4.0))], 0.0, 0.0, 1.0);
}
</script>
  <script type="application/javascript">
    "use strict";
    description("Row-major matrix layouts should work.");

    GLSLConformanceTester.runRenderTests([
      {
        vShaderId: 'vshaderUniformMatrixRowMajor',
        vShaderSuccess: true,
        fShaderId: 'fshaderUniformMatrixRowMajor',
        fShaderSuccess: true,
        linkSuccess: true,
        passMsg: '',
        uniformBlocks: [{
          name: "type_m2", value: new Float32Array([
            0, 0.2, 0.4, 0.6,
            1, 0.1, 0.3, 0.5,
            0, 0, 0, 0,
            1, 1, 1, 1,
          ])
        }]
      }
    ], 2);
  </script>
</body>

</html>

在win10 Chrome 81.0.4044.129

我得到了结果：带有 row_major 限定符的着色器

具有 row_major 限定符的着色器

我无法弄清楚为什么它看起来像这样。

当我删除 row_major 限定符时，我得到了另一个结果：

没有 row_major 限定符的着色器（不要关心下图中的 html 措辞，这是 column_major）

没有 row_major 限定符的着色器

这是预期的结果。

更新

说清楚：我的问题是两个结果应该相互转置，因为它们使用相同的矩阵数据。着色器尝试将矩阵中从 0 到 1 的每个浮点数绘制到红色通道。然而，具有 row_major 的着色器（第一个结果）显示矩阵中的元素为 0 或 1，但事实并非如此。第二个结果完全符合预期。

标签： javascriptshaderwebgl2opengl-es-3.0row-major-order

解决方案

对不起，我之前的回答。我看的不够近。

这看起来像是各种驱动程序中的错误。

我试过这个

const vs = `#version 300 es
layout(location = 0) in vec4 position;
void main () {
  gl_Position = position;
  gl_PointSize = 128.0;
}
`;
function getFS(mode) {
  return `#version 300 es
precision mediump float;
layout (location = 0) out vec4 my_FragColor;
layout(std140${mode}) uniform type_m2 {
  mat4 mat;
} m2;
void main()
{
  vec2 pos = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y);
  int major = int(pos.x * 4.0);
  int minor = int(pos.y * 4.0);
  my_FragColor = vec4(m2.mat[major][minor], m2.mat[0][0], 0, 1.0);
}
`;
}

const gl = document.querySelector('canvas').getContext('webgl2');

test(-0.5, '');
test( 0.5, ', row_major');

function test(x, mode) {
  const prgInfo = twgl.createProgramInfo(gl, [vs, getFS(mode)]);

  gl.vertexAttrib1f(0, x);
  const uboInfo = twgl.createUniformBlockInfo(gl, prgInfo, "type_m2");

  gl.useProgram(prgInfo.program);
  twgl.setBlockUniforms(uboInfo, {
    mat: [
      0, 0, 0, 0,
      1, 1, 0, 0,
      0, 0, 0, 0,
      1, 1, 1, 1,
    ],
  });
  twgl.setUniformBlock(gl, prgInfo, uboInfo);
  gl.drawArrays(gl.POINTS, 0, 1);
}

canvas { background: #EEE; }

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

在 Macbook Pro (NVidia) 上，我得到了这些错误的结果

在 Windows 10 PC (NVidia) 上我得到了这些正确的结果

在我的 Android Pixel 2 XL 上，我得到了这些错误的结果

在 Macbook Air (Intel) 上，我得到了这些错误的结果

也许这不应该工作。根据规范

12.30 动态索引

对于 GLSL ES 1.00，不强制支持数组、向量和矩阵的动态索引，因为某些实现不直接支持它。软件解决方案（通过程序转换）适用于部分案例，但会导致性能不佳。

GLSL ES 3.00 是否应该强制支持动态索引？

解决方案：强制支持数组的动态索引，但采样器数组、片段输出数组和统一块数组除外。

GLSL ES 3.00 是否应该强制支持向量和矩阵的动态索引？

解决方案：是的。

我的阅读是它应该可以工作，但 IANALL

javascript - WebGL2 row_major 限定符意外工作

问题描述

解决方案

12.30 动态索引

推荐阅读