如何确定 WebGL 和 GLSL 版本？

Question

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

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

Answer 1

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

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

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)"

Answer 2

检查 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 支持GLSL ES 1.0和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