Использование emscripten с opengl shaders

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 

Vertex shader source:

#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); 
} 

Шейдеры загружаются как массивы символов из вывода, предоставленных xxd -i я работаю в C++ 11 на Linux. Программа работает отлично, когда я запускаю ее изначально, и я попытался запустить вывод emscripten как в Firefox, так и в Chrome.

Кажется, проблема между различными версиями. Есть ли способ заставить emscripten работать с тем, что у меня есть сейчас, или мне нужно писать мои шейдеры по-другому? И если мне придется переписать мои шейдеры, как мне их написать?

Answer 1

Шейдерный код должен быть шейдерным кодом WebGL для работы в браузере. Я не думаю, что emscripten конвертирует шейдерный код (GLSL 3.3 в этом случае) в GLSL ES 1.0, который совместим с webGL.

Вы должны будете использовать attribute вместо in в вершинном шейдере, varying для из/в в вершинных/фрагментных шейдеров и использовать 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