收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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

最后一次编辑于  03-06  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • Ocean
    Ocean
    03-10

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

    03-10
    赞同
    回复 1
    • 陈旭辕
      陈旭辕
      03-11

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


      03-11
      回复
  • 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

    03-23
    赞同
    回复