如何确定 WebGL 和 GLSL 版本？

Question

我可以进行哪些调用来确定当前浏览器中的 WebGL 版本支持（例如 1 与 2）以及 SL 规范版本（例如 1.x 与 3.x）。

您知道我必须使用 GL api 进行哪些调用吗？还是 SL 中的宏？

Answer 1

检查 WebGL2

const gl = someCanvas.getContext("webgl2");
if (!gl) { .. no webgl2 }

检查 WebGL1

const gl = someCanvas.getContext("webgl");
if (!gl) { ... no webgl }

GLSL 没有什么可检查的。 WebGL1 支持 GLSL ES 1.0. WebGL2 supports both GLSL ES 1.0 and GLSL ES 3.0 句点。

如果你想编写一个在 GLSL ES 1.0 和 GLSL ES 3.0 中编译的着色器，好吧，你实际上不能在 JavaScript 中从 GLSL ES 3.0 着色器的第一行开始没有字符串操作必须

#version 300 es

换句话说，您无法检查 "if GLSL VERSION = 3"，因为您需要在第一行声明您正在使用的版本。

也可能没有太多理由编写适用于两者的着色器。因为如果你想要一个在 WebGL1 和 WebGL2 中运行的着色器，那么只需使用 GLSL ES 1.0 你选择使用 GLSL ES 3.0 的原因是使用 GLSL ES 1.0 中不存在的功能。

如果您真的想这样做，我建议您在 JavaScript 中使用字符串操作。如果你想在 GLSL 中这样做，那么你可以使用 __VERSION__ 宏，如

#if __VERSION__ == 300
  ...glsl es 3.00 code ...
#else
  ...glsl es 1.00 code ...
#

但当然你仍然需要在顶部手动添加 #version 300 es 才能真正获得 GLSL ES 3.0

Answer 2

我也想在这里添加一些我自己的发现，以防它们对其他人有用：

您可以这样查询支持的着色器语言：

gl.getParameter(gl.SHADING_LANGUAGE_VERSION);
"WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)"

如果您有上下文但不知道如何获得它，您可以使用以下方式查询它：

gl.getParameter(gl.VERSION);
"WebGL 1.0 (OpenGL ES 2.0 Chromium)"

How to determine WebGL and GLSL version?