Question

我无法让emscripten与openGL着色器一起使用。该项目使用emscripten和gcc编译得很好但在我尝试运行emscripten输出时失败。

我从编译顶点着色器得到的错误：

ERROR: 0:1: 'core' : invalid version directive 
ERROR: 0:3: 'layout' : syntax error

我从编译片段着色器得到的错误：

ERROR: 0:1: 'core' : invalid version directive 
ERROR: 0:3: 'in' : storage qualifier supported in GLSL ES 3.00 only  
ERROR: 0:3: '' : No precision specified for (float) 
ERROR: 0:5: 'out' : storage qualifier supported in GLSL ES 3.00 only   
ERROR: 0:5: '' : No precision specified for (float)

我使用以下命令编译此项目：

em++ src/*.cpp -Iinclude/ -o test.html -std=c++11 -s USE_GLFW=3 -s FULL_ES3=1

顶点着色器源：

#version 330 core

layout (location = 0) in vec3 position; 
layout (location = 1) in vec3 in_color;

uniform mat4 model; 
uniform mat4 projection;

out vec3 out_color;

void main()
{
    gl_Position = projection * model * vec4(position, 1.0f);
    out_color = in_color;
}

片段着色器源：

#version 330 core

in vec3 out_color;

out vec4 color;

void main()
{
      color = vec4(out_color, 1.0);
}

着色器作为char数组从xxd -i提供的输出加载我在linux上的c ++ 11中工作。当我以原生方式运行程序时，该程序运行正常，我已经尝试在Firefox和Chrome中运行emscripten输出。

这似乎是不同版本之间的问题。有没有办法让emscripten与我现在拥有的东西一起工作，还是我必须以不同的方式编写着色器？如果我必须重写我的着色器，我该怎么写呢？

Answer 1

着色器代码必须是WebGL着色器代码才能在浏览器上运行。我不认为emscripten会将着色器代码（在本例中为GLSL 3.3）转换为与webGL兼容的GLSL ES 1.0。

您必须在顶点着色器中使用attribute而不是in，在顶点/片段着色器中使用varying表示out / in并使用gl_FragColor作为片段着色器的输出变量。也不支持layout，并且变量需要精确定义。检查WebGL备忘表here。

Answer 2

在当前的emscripten中，您可以使用WebGL2和GLSL ES 3.00。您需要将#version行更改为

#version 300 es

您还需要为片段着色器添加默认精度。

如果是我，我只需将我的代码包装到glShaderSource就像是

GLint shaderSourceWrapper(GLint shader, const std::string src) {
  #ifdef __EMSCRIPTEN__
    // replace '#version.*' with '#version 300 es' 
    // if it's a fragment shader add 'precision highp float'
    // do anything else relevant like warn if there are
    // unsupported #extension directives
  #endif
  glShaderSource(shader, ... )

甚至可以在JavaScript级别like this

执行此操作

将emscripten与opengl着色器一起使用

2 个答案: