收藏
回答

Android平台2D,3D混合渲染不能正常显示

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小游戏 Bug Canvas 客户端 6.7.2 2.3.0

尝试将界面HUD绘制到单独的Canvas(实际代码用PIXI.js创建Canvas), 然后将该Canvas作为纹理绘制到THREE.js 3D的Mesh中,

模拟器和iOS能正常显示纹理,Android显示为黑色,如果将getContext('webgl')改为getContext('2d')然后fillRect, 几种平台都能正常显示。

猜测,在Android下只能获取一个webgl Canvas

var canvas = wx.createCanvas();

     ...

    var gl = this.canvas.getContext('webgl', {});

    gl.clearColor(1.0, 0.0, 0.0, 1.0);

    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

...

    var texture = new THREE.CanvasTexture(canvas);

    texture.minFilter = THREE.LinearFilter;

    var material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });

   var geometry = new THREE.PlaneGeometry(canvas.width / window.devicePixelRatio / PIXELS_PER_UNIT,

                                                                          canvas.height / window.devicePixelRatio / PIXELS_PER_UNIT);

    var sprite3D = new THREE.Mesh(geometry, material);

   ...

    scene3D.add(sprite3D);


测试问题机: 小米8,小米MIX


最后一次编辑于  2018-09-14  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

5 个回答

  • 森林猎人
    森林猎人
    2018-09-17

    代码片段在: https://pan.baidu.com/s/1YMC1f1trwVJsAfzR-PzlfQ

    由于引用第三方库超出200k限制无法直接分享。

    测试问题机: 小米8,小米MIX

    微信版本: 6.7.2

    2018-09-17
    赞同 11
    回复
  • 娇华
    娇华
    2018-09-14

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-09-14
    赞同
    回复 2
  • Group
    Group
    01-18

    学习过程中,遇到了类似的问题。Three.js搭建了3D场景,添加了2d的canvas作为Plane的纹理。开发工具可正常显示fillRect的内容,正常显示fillText的内容,正常显示图片。真机Android可显示fillRect,无法显示fill Text的内容和图片纹理,ios可显示fillRect/fillText,无法显示图片。

    01-18
    赞同
    回复