gpt4 book ai didi

opengl-es - 编译着色器后程序停止绘制

转载 作者:行者123 更新时间:2023-12-03 06:47:21 25 4
gpt4 key购买 nike

我正在开发一个 C 程序,将其编译为 WASM 并在浏览器中显示图像。该程序的重​​点是学习使用 EGL 进行设置,因此我对涉及例如的任何答案不感兴趣。 SDL、GLFW 等

此代码可将屏幕清除为蓝色(我省略了错误检查以减小尺寸):

#include <GLES2/gl2.h>
#include <EGL/egl.h>
#include <EGL/eglext.h>
#include <stdbool.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include "emscripten.h"

struct Environment
{
EGLint majorVersion;
EGLint minorVersion;

EGLDisplay display;
EGLSurface surface;
};

static struct Environment g_env = {};

bool initGL(struct Environment* env)
{
env->display = eglGetDisplay(EGL_DEFAULT_DISPLAY);

eglInitialize(env->display, &env->majorVersion, &env->minorVersion);

EGLint numConfigs = 0;
EGLint attribList[] =
{
EGL_RED_SIZE, 5,
EGL_GREEN_SIZE, 6,
EGL_BLUE_SIZE, 5,
EGL_DEPTH_SIZE, 1,
EGL_NONE
};
EGLConfig config;
eglChooseConfig(env->display, attribList, &config, 1, &numConfigs);

env->surface = eglCreateWindowSurface(env->display, config, 0, NULL);

static const EGLint contextAttribList[] =
{
EGL_CONTEXT_CLIENT_VERSION, 2, EGL_NONE
};
EGLContext context = eglCreateContext(env->display, config, EGL_NO_CONTEXT, contextAttribList);


eglMakeCurrent(env->display, env->surface, env->surface, context);


glClearColor(0.0f, 0.0f, 1.0f, 1.0f);


return true;
}

void draw()
{
glViewport(0, 0, 300, 150);
glClear(GL_COLOR_BUFFER_BIT);
eglSwapBuffers(g_env.display, g_env.surface);
}

int main(int argc, char *argv[])
{
if (!initGL(&g_env))
{
return 1;
}
emscripten_set_main_loop(clearScreen, 0, 1);
return 0;
}

但是,一旦我在 glClearColor(...) 之后添加以下内容,我就不再在浏览器中看到蓝屏:

const GLuint vertex_shader = load_shader(GL_VERTEX_SHADER, VERTEX_SHADER);
const GLuint fragment_shader = load_shader(GL_FRAGMENT_SHADER, FRAGMENT_SHADER);

我怀疑着色器代码与问题完全无关,但为了以防万一,这里是 load_shader 的代码,取自 OpenGL ES 2 book (省略错误检查)

GLuint load_shader ( GLenum type, const char *shaderSrc )
{
GLuint shader;
GLint compiled;

// Create the shader object
shader = glCreateShader ( type );

// Load the shader source
glShaderSource ( shader, 1, &shaderSrc, NULL );

// Compile the shader
glCompileShader ( shader );

// Check the compile status
glGetShaderiv ( shader, GL_COMPILE_STATUS, &compiled );

return shader;
}

以及着色器本身:

char VERTEX_SHADER[] =  
"attribute vec4 vPosition; \n"
"void main() \n"
"{ \n"
" gl_Position = vPosition; \n"
"} \n";

char FRAGMENT_SHADER[] =
"precision mediump float;\n"\
"void main() \n"
"{ \n"
" gl_FragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 );\n"
"}

这是我的编译方法:

EMSCRIPTEN_OPTS = \
-s WASM=1 \
-s FULL_ES2=1 \
-s MODULARIZE=1
${EMCC} main_web.c -o hello.js ${EMSCRIPTEN_OPTS}

glGetError() 未返回错误代码。

这是我的 HTML:

<html>
<body>
<p id="output" />
<canvas id="canvas"></canvas>
<script type="application/javascript" src="hello.js"></script>
<script type="application/javascript">
Module({
canvas: (() => document.getElementById('canvas'))(),
print: (() => {
var element = document.getElementById('output');
return function(text) {
element.innerHTML += text + "<br>";
};
})()
})
</script>
</body>
</html>

为什么当我刚刚加载着色器时就停止清除屏幕?

最佳答案

问题出在 HTML 上。打印到 stdout 时,内联元素与 block <canvas> 相互引用元素。

通过包装 <p id="output"/> 解决了问题在一个 div 中。

关于opengl-es - 编译着色器后程序停止绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57192723/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com