小程序canvas webgl透明背景在开发者工具和真机中显示不一样
发布于 7 年前 作者 ywan 9153 次浏览 来自 官方Issues

开发者工具中通过设置

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

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

4 回复

开发者工具如下:

真机调试如下:

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

还有问题的可以试下这个代码,我是从 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);

        });

回到顶部