我正在尝试找到一种方法，通过C ++中的OpenGL调用将HTML元素绘制为这样一种方式，即在GL所在的位置可以看到画布后面的任何内容（背景图像，HTML文本...）上下文帧缓冲区没有要绘制的不透明颜色，甚至可能具有混合功能。
我尝试在glClearColor（）调用中将不透明度设置为零。我使用emscripten编译我的C ++代码，当我使用emscripten生成模块加载器时，我注意到在未明确设置背景色的情况下，生成的输出中就有代码使canvas元素的背景色变为黑色。我试图禁用此行为，以期获得透明性，但无济于事。
我知道Unity的WebGL版本支持透明的画布，如here所示。但是我不确定说出的Unity是否实际使用WebAssembly，因为我知道JavaScript到canvas元素的结尾可用于在透明背景上绘制。
这已经可能吗？会吗？
当然有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,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,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);
对此
SDL_SetRenderDrawColor(renderer,0);
对我有用。
