小程序canvas webgl透明背景在开发者工具和真机中显示不一样

发布于 8 年前作者 ywan9369 次浏览最后编辑 8 年前来自 issues

开发者工具中通过设置

gl.clearColor(1,1,1,0);

使得webgl背景色透明,但是真机上一直显示的是黑色背景

4 回复
zding
zding1 楼6 年前

开发者工具如下:

真机调试如下:

wei17
wei172 楼6 年前

webgl 暂时不支持透明。可参考:小程序webgl透明背景? Eric Huang 的回答 - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0002a4a8140860ac0a989ce3e56c00?_at=1567416417615&jumpto=comment&commentid=0000a66aaaca50e41798aa2b65c8

jing58
jing583 楼6 年前

2020年了,还没解决?速度呀

nafu
nafu4 楼6 年前

还有问题的可以试下这个代码,我是从 threeJS 源码拿出来的,在几台安卓机器上都可以透明,不加则不透明。webGLCanvasId 设置你们的ID。如果用 threeJS,canvas 和 glContext 要传到 threeJS 里面。

wx.createSelectorQuery()

        .select(`#${webGLCanvasId}`)

        .node()

        .exec((res) => {

          const canvas = res[0].node;

          const glContext = canvas.getContext(‘webgl’, {

            alpha: true,

            depth: true,

            stencil: true,

            antialias: true,

            premultipliedAlpha: true,

            preserveDrawingBuffer: false,

            powerPreference: ‘default’,

            failIfMajorPerformanceCaveat: false,

            xrCompatible: true

          });

          // 安卓手机需要调用这个来设置透明

          glContext.clearColor(0, 0, 0, 0);

          glContext.clear(glContext.COLOR_BUFFER_BIT);

        });