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

使用离屏webgl canvas绘制到2d主屏canvas显示异常

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小游戏 Bug wx.createCanvas ctx.drawImage 客户端 7.0.3 2.6.1

- 当前 Bug 的表现（可附上截图）

在开发者工具中显示正常，在真机中安卓显示异常，ios可以显示，但是离屏canvas的画面是静止的，正常画面是一个不断旋转的立方体。

之前看过其他开发者发的贴子说在微信7.0.3版本中修复了这个问题。但在实际开发中依然存在这个bug。


下面两张图片是安卓机，微信是7.0.3.


下图是ios,微信版本也是7.0.3


- 预期表现

开发者工具上显示正常


- 复现路径


- 提供一个最简复现 Demo

https://github.com/runingYao/webgl_demo_bug

回答关注问题邀请回答
收藏

4 个回答

  • damonlei
    damonlei
    2019-03-23

    设计如此，不予修改

    请把你的 js 代码，做如下修改：

      //渲染，刷新离屏canvas中的内容并实时绘制到主屏canvas中
      function render() {
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
     
        // note below: ScreenCanvas should be updated every frame.
        scene_ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
        scene_ctx.drawImage(group, 0, 0);

        

       scene_ctx.drawImage(mycanvas, 0, 200);

        requestAnimationFrame(render);
      }

    说明：

    1. 为了保持高性能，ScreenCanvas 会直接使用系统画布，也就是所谓的多缓冲。在多缓冲上，我们需要每一帧都进行绘制，这是系统特性，符合预期。

    2. 你有可能会发现，webglcanvas 绘制到 canvas2dcanvas 上在华为机器上有兼容性问题，这个问题正在和华为沟通解决，请关注下面的链接。 https://developers.weixin.qq.com/community/minigame/doc/00026c3c1c8eb010de384a82d51000

    2019-03-23
    有用
    回复
  • Ocean
    Ocean
    2019-03-10

    您好，真机console复现THREE.WebGLRenderer: WEBGL_depth_texture extension not supported，与您的现象是否一致，我们技术人员会尽快跟进该问题。

    2019-03-10
    有用
    回复 1
    • 陈旭辕
      陈旭辕
      2019-03-11

      确实有这个警告，但正常运行的3D场景也会有这个警告。


      2019-03-11
      赞
      回复
  • 🐂火星牛
    🐂火星牛
    2020-09-22

    我的华为手机跑p20也遇到这个问题，模拟器显示正常，真机不显示。

    2020-09-22
    有用
    回复
  • 2020-07-02

    这个问题修复了吗？

    2020-07-02
    有用
    回复
请 登录 后发表内容
相关问题
相关文档