将 WebGL 片段着色器转换为 GLES答案

【问题标题】：Convert WebGL fragment shader to GLES将 WebGL 片段着色器转换为 GLES
【发布时间】：2013-11-07 18:34:32
【问题描述】：

我是 OpenGL 的初学者，正在尝试运行一些测试。 GLSL Sandbox Gallexy 有很多片段着色器可用，我想在 GLES 中尝试它们，重用代码。但是，对于大多数着色器来说，它似乎不起作用。

在我尝试运行的着色器中，唯一在 GLES 中工作的着色器是 this one，出于某种原因。为了实现这一点，我必须消除着色器的时间依赖性。

WebGL 和 GLES 中的某些变量名称似乎不同。如果是这样的话，究竟是哪些？如果不是，从前者翻译到后者的具体流程是什么？

One example 的简单片段着色器，仅提供黑屏。在我的特殊情况下，我沿着这个最小的顶点着色器运行它：

precision mediump float;

uniform mat4 uMVPMatrix;

attribute vec4 aPosition;
attribute vec2 aTextureCoord;

varying vec2 vTextureCoord;

void main() {
    vTextureCoord = aTextureCoord;
    gl_Position = uMVPMatrix * aPosition;
}

【问题讨论】：

WebGL 的 GLSL 与 OpenGL ES 2.0 #version 100 的实现并没有太多独特之处，它通常只是一个更严格的 ESSL 版本。一个例外是使用 webgl_ 构造的着色器，但这只是一个保留的命名空间，目前没有实际使用。编译器有更严格的要求，事实上大多数浏览器都使用 ANGLE 项目的 GLSL 验证器在多个平台上产生一致的结果。但是，应该不需要翻译着色器；这假设您正在讨论 OpenGL ES 2.0（您的标签不清楚您的意思是 2.0 还是 3.0）。
是的，我使用的是 OpenGL ES 2.0。更具体地说，在 android 应用程序中。所以我可以安全地假设，如果着色器不工作，它可能不是着色器本身的问题吗？一些着色器可以工作，而另一些则不能，这仍然很奇怪。我试过的所有着色器都没有任何 webgl_ 构造。
这是正确的，WebGL 只编译符合 OpenGL ES 2.0 的 GLSL #version 100 以及一些额外的仅限 WebGL 限制的着色器。从 ES 2.0 移植到 WebGL 可能需要额外的工作，但因为 ES 2.0 限制较少，所以反过来应该不成问题。如果您指出一些实际的着色器不起作用以及您尝试了什么，我或许可以提供更多见解。
我在问题描述中包含了一个示例。我目前使用的名为 Rajawali 的框架需要一个顶点着色器的规范，以及片段着色器，而我正在使用的是最小的那个。

标签： opengl-es opengl-es-2.0 webgl

【解决方案1】：

此问题不是 WebGL 和 OpenGL ES 之间的差异，而是 GLSL Sandbox Gallery 和 Shadertoy 等网站提供的着色器编程环境与 OpenGL ES 平台上的相应环境（或缺少）之间的差异您的选择。

您在网络上看到的各种 WebGL 片段着色器沙箱通过统一变量为您的着色器代码提供输入。当您在另一个平台上开发自己的 OpenGL ES 应用程序时，您需要自己提供这些输入。

您链接到的沙盒站点在其 JavaScript 代码中提供了 time、mouse、resolution 和 backbuffer 制服，方法是自行计算适当的值并将它们传递给 gl.uniform1f 或类似的函数（首先编译着色器，然后在编译的程序中查找每个统一名称的数字位置）。在另一个平台上，您需要使用该平台提供的 OpenGL ES 绑定来执行相同的操作。

【讨论】：

很好，这解决了问题。非常感谢。