将shadertoy移植到GlslCanvas

Question

我正在尝试遵循shadertoy 中的一些示例。 我正在使用我之前读过的《The Book of Shaders》作者的 GlslCanvas 库，但显然 Shadertoy 对 webgl 使用了一些不同的设置。 除了不兼容的统一变量名称之外，我认为shadertoy以某种方式设法设置WebGL 2 - 判断以下内容的使用：

• dFdx

  、

  dFdy

  功能。 Shadertoy 示例在着色器文件中没有使用

  #version

  指令的情况下使用此选项，至少我没有看到着色器作者为他们指定它。
• 同样，没有显式声明启用的扩展，例如我必须在我的 webgl 设置中使用

  #extension GL_OES_standard_derivatives : enable

• 使用纹理的方法有点令人困惑。在我使用

  GlslCanvas

  的设置中（实际上是一个导入

  GlslCanvas

  库的 html + webgl canvas 元素，正如 README 所建议的那样）我只能使用

  texture2D

  ，而 Shadertoy 示例仅使用

  texture

  和一些更高级的功能，如

  textureGrad

  .

根据上述判断，我认为简单的答案是，shadertoy 正在使用 WebGL 2，而我使用的库以某种方式回退到使用 WebGL 1，即使浏览器完全能够使用

Web GL 2

。 然而，当我尝试使用

#version 300 es

时，我仍然遇到错误。我想知道 Shaderoy 设置中有什么不寻常的地方？

我可以使用一些魔法来为我的设置启用 Web GL 2 吗？

我尝试阅读解压的库源代码，但没有找到解决方案 - 源代码表明

GlslCanvas

在读取片段着色器源代码时采用了一些技巧，并且使用

#version

不起作用 - 例如

this.fragmentString = "#define PLATFORM_WEBGL\n#line 0\n";

周围的线条。

Answer 1

你是对的：Shadertoy 使用 WebGL 2 和 GLSL ES 300 着色器。您不必声明

#version 300 es

的原因是 Shadertoy 在后台为您完成此操作。

另一方面，当 GlslCanvas 在

create3DContext

函数中创建 WebGL 上下文时，它始终会创建 WebGL 1 上下文，即使您的设备和浏览器支持 WebGL 2。因此默认情况下，您不能使用 GLSL ES 300 着色器使用 GlslCanvas。

该问题有多种解决方案：您可以修改 GlslCanvas 以支持 WebGL 2，您可以使用另一个支持 WebGL 2 的库，您可以使用纯 WebGL 2，或者您可以（可能）将着色器从 GLSL ES 300 重写为 GLSL ES 100.

可能最好的想法是创建几个宏并使您的着色器与两个着色器版本兼容。像这样的东西：

#if __VERSION__ == 300
  #define attribute in
  #define texture2D texture
  // etc.
#else
  #define attribute attribute
  #define texture2D texture2D
  // etc.
#endif