如何通过 Emscripten 激活抗锯齿

Posted 2023-02-22

【中文标题】如何通过 Emscripten 激活抗锯齿

【英文标题】：How to activate anti-aliasing via Emscripten

【发布时间】：2014-04-03 19:40:48

【问题描述】：

在 webGL 中，可以像

一样在画布上下文初始化上激活抗锯齿功能

gl = canvas.getContext("experimental-webgl",  antialias: true );

我的简单问题是：如何通过 Emscripten C++ 将这个选项设置为 asm.js 编译器？我不询问通过自定义着色器代码实现我自己的抗锯齿。

【问题讨论】：

我在输出的 .js 文件中找到了以下代码，这暗示了在不编辑用于生成的 html/js“shell 文件”的情况下可能会以某种方式设置变量：createContext:function (canvas, useWebGL, setInModule, webGLContextAttributes) return ctx = canvas.getContext(webglId, contextAttributes);

【参考方案1】：

在 SDL 中，您可以通过 SDL_GL_MULTISAMPLEBUFFERS 设置启用抗锯齿。像这样：

SDL_GL_SetAttribute(SDL_GL_MULTISAMPLEBUFFERS, 1); // enable MULTISAMPLE
SDL_GL_SetAttribute(SDL_GL_MULTISAMPLESAMPLES, 2); // can be 2, 4, 8 or 16
SDL_SetVideoMode(...)

本机代码将为 gl 上下文启用抗锯齿。看看 library_sdl.js：

// in makeSurface function
var webGLContextAttributes = 
    antialias: ((SDL.glAttributes[13 /*SDL_GL_MULTISAMPLEBUFFERS*/] != 0) && (SDL.glAttributes[14 /*SDL_GL_MULTISAMPLESAMPLES*/] > 1)),
    depth: (SDL.glAttributes[6 /*SDL_GL_DEPTH_SIZE*/] > 0),
    stencil: (SDL.glAttributes[7 /*SDL_GL_STENCIL_SIZE*/] > 0)
;

【参考方案2】：

如果使用 SDL，如另一个答案中所述，您可以简单地调用以下代码：

SDL_GL_SetAttribute(SDL_GL_MULTISAMPLEBUFFERS, 0 or 1);

如果使用 GLUT，则必须简单地调用 glutInitDisplayMode() 带/不带 GLUT_MULTISAMPLE。

如果使用 EGL，唯一的选择是强制将构建的 javascript 代码从 _glutInitDisplayMode(146); 更改为 _glutInitDisplayMode(18);，因为 eglCreateContext() 只是在内部使用 GLUT 命令。