公告列表
公告列表
收藏
回答

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

框架类型 问题类型 操作系统版本 手机型号 微信版本
小程序 Bug Android 9.1.0 Android p30 7.0.6

开发者工具中通过设置

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

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

最后一次编辑于  2019-09-02
回答关注问题邀请回答
收藏

4 个回答

  • 方圆（Eric）
    方圆（Eric）
    2020-01-07

    2020年了，还没解决？速度呀

    2020-01-07
    有用
    回复
  • 小伟
    小伟
    2019-12-27

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

            });

    2019-12-27
    有用
    回复 6
    • 方圆（Eric）
      方圆（Eric）
      2020-03-09
      我加了你那两行代码，没用呢。我华为p20还是没有背景透明，请问还有什么特别设置，加个好友
      2020-03-09
      赞
      回复
    • 小伟
      小伟
      2020-04-21回复方圆（Eric）
      没有了，就这个设置
      2020-04-21
      赞
      回复
    • 方圆（Eric）
      方圆（Eric）
      2020-04-21回复小伟
      没用呀 这设置。在某些机型 还是透明区域变成黑底
      2020-04-21
      赞
      回复
    • 小伟
      小伟
      2020-04-21回复方圆（Eric）
      我测过荣耀8/9，一加五，坚果pro2/2s
      2020-04-21
      赞
      回复
    • 小伟
      小伟
      2020-04-21
      还有红米note3
      2020-04-21
      赞
      回复
    查看更多(1)
  • 灵芝
    灵芝
    2019-09-02

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

    2019-09-02
    有用
    回复 7
    查看更多(2)
  • Andrew
    Andrew
    2019-09-02

    开发者工具如下：



    真机调试如下：

    2019-09-02
    有用
    回复 1
    • ymz
      ymz
      2019-11-12
      你好，请问真机调试时，如何显示webgl渲染的界面呢？原生工具好像不太支持。
      2019-11-12
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
开发者工具canvas