浏览器中的webassembly gl canvas是否可以使用透明背景？

Question

[我正在尝试寻找一种方法，通过C ++中的OpenGL调用，将HTML元素绘制为这样一种方式，使得在GL上下文中可见画布后面的任何内容（背景图像，HTML文本等）。帧缓冲区没有要绘制的不透明颜色，甚至没有使用混合的能力。

我尝试在glClearColor（）调用中将不透明度设置为零。我使用emscripten编译我的C ++代码，当我使用emscripten生成模块加载器时，我注意到在未明确设置背景色的情况下，生成的输出中就有代码使画布元素的背景色变为黑色。我尝试禁用此行为，以期获得透明性，但无济于事。

我知道Unity的WebGL版本支持透明画布，如here所示。但是我不确定说出的Unity是否实际使用WebAssembly，因为我知道JavaScript到canvas元素的结尾可用于在透明背景上绘制。

这已经可能吗？会永远吗？

Answer 1

当然，这是100％的可能性，因为WebGL可以做到。您始终可以派生emscripten库，更改几行，然后使用您的派生。不幸的是，除非您指定如何在脚本中初始化OpenGL，否则我无法给您答案。 SDL？ EGL？ EW？ GLUT？每个人都有不同的答案。

我要做的第一件事是查看这些库的源代码。

对于SDL，我们看到this

  $SDL: {
    defaults: {
      width: 320,
      height: 200,
      // If true, SDL_LockSurface will copy the contents of each surface back to the Emscripten HEAP so that C code can access it. If false,
      // the surface contents are captured only back to JS code.
      copyOnLock: true,
      // If true, SDL_LockSurface will discard the contents of each surface when SDL_LockSurface() is called. This greatly improves performance
      // of SDL_LockSurface(). If discardOnLock is true, copyOnLock is ignored.
      discardOnLock: false,
      // If true, emulate compatibility with desktop SDL by ignoring alpha on the screen frontbuffer canvas. Setting this to false will improve
      // performance considerably and enables alpha-blending on the frontbuffer, so be sure to properly write 0xFF alpha for opaque pixels
      // if you set this to false!
      opaqueFrontBuffer: true
    },

和this

      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),
        alpha: (SDL.glAttributes[3 /*SDL_GL_ALPHA_SIZE*/] > 0)
      };

对于EGL，有this

var LibraryEGL = {
  $EGL__deps: ['$Browser'],
  $EGL: {
    // This variable tracks the success status of the most recently invoked EGL function call.
    errorCode: 0x3000 /* EGL_SUCCESS */,
    defaultDisplayInitialized: false,
    currentContext: 0 /* EGL_NO_CONTEXT */,
    currentReadSurface: 0 /* EGL_NO_SURFACE */,
    currentDrawSurface: 0 /* EGL_NO_SURFACE */,
    alpha: false,

对于GLUT，有this

  glutCreateWindow: function(name) {
    var contextAttributes = {
      antialias: ((GLUT.initDisplayMode & 0x0080 /*GLUT_MULTISAMPLE*/) != 0),
      depth: ((GLUT.initDisplayMode & 0x0010 /*GLUT_DEPTH*/) != 0),
      stencil: ((GLUT.initDisplayMode & 0x0020 /*GLUT_STENCIL*/) != 0),
      alpha: ((GLUT.initDisplayMode & 0x0008 /*GLUT_ALPHA*/) != 0)
    };

似乎它们可能会导致答案？

否则，如果您不麻烦阅读源代码，则可以强制使用它。在任何其他脚本之前，将此代码添加到html文件的顶部

<script>
(function() {

  if (typeof HTMLCanvasElement !== "undefined") {
    wrapGetContext(HTMLCanvasElement);
  }
  if (typeof OffscreenCanvas !== "undefined") {
    wrapGetContext(OffscreenCanvas);
  }

  function wrapGetContext(ContextClass) {
    const isWebGL = /webgl/i;

    ContextClass.prototype.getContext = function(origFn) {
      return function(type, attributes) {
        if (isWebGL.test(type)) {
          attributes = Object.assign({}, attributes || {}, {alpha: true});
        }
        return origFn.call(this, type, attributes);
      };
    }(ContextClass.prototype.getContext);
  }

}());
</script>

我用this sample进行了测试，更改了此行

  SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);

对此

  SDL_SetRenderDrawColor(renderer, 0, 0, 0, 0);

并且对我有用。