如何确定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支持GLSLES1.0。WebGL2同时支持GLSLES1.0和GLSLES3.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 ES3.0的原因是使用GLSL es1.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)"