收藏
回答

小程序canvas webgl有锯齿,如何消除

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 7.0.4 2.7.0

- 当前 Bug 的表现(可附上截图)

开发者工具,或者华为P10 plus手机上都有问题


- 预期表现

没有锯齿


- 复现路径


- 提供一个最简复现 Demo

运行了一个spine-webgl运行库,对小程序不支持的接口做了适配,但是运行效果会有锯齿。用web-view内嵌h5运行就没有锯齿。


代码片段

https://developers.weixin.qq.com/s/4k1G0Am27B87


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

5 个回答

  • 小程序技术专员-Eric
    小程序技术专员-Eric
    置顶回答2019-06-10

    需要手动设置一下 webgl 的逻辑像素。


    gl.canvas.width = width * DPR

    gl.canvas.height = height * DPR


    DPR 可以通过 getSystemInfo 来获取。


    2019-06-10
    赞同
    回复 11
    • 朱宝国
      朱宝国
      2019-06-14

      谢谢,webgl如何设置背景透明呢?测试发现大部分安卓机器和iphone背景是黑的

      2019-06-14
      回复
    • 小程序技术专员-Eric
      小程序技术专员-Eric
      2019-07-11回复朱宝国
      透明背景会在下个版本支持。
      2019-07-11
      1
      回复
    • 钰明
      钰明
      2019-08-09
      gl.canvas.width = width * DPI设置像素逻辑,应该写在哪里
      2019-08-09
      回复
    • 🐱
      🐱
      2019-08-29

      补充一下, 除了 gl.canvas 的 width 和 height 乘上 pixelRatio 以外, 在 gl.viewport 的时候后面两个宽高参数也需要乘上 pixelRatio:

      // 调整画布尺寸
      gl.canvas.width = 300 * pixelRatio;
      gl.canvas.height = 300 * pixelRatio;
       
      // 将 WebGL 裁剪空间的 -1 -> +1 映射到画布的宽高
      gl.viewport(0, 0, 300 * pixelRatio, 300 * pixelRatio);


      2019-08-29
      回复
    • 麻辣烫不烫จุ๊บ
      麻辣烫不烫จุ๊บ
      2019-09-02回复朱宝国
      请问你的锯齿解决了吗
      2019-09-02
      回复
    查看更多(6)
  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2019-05-23

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-05-23
    赞同
    回复 2
  • ieloag
    ieloag
    2019-12-15

    请问下iOS支持spine-webgl吗?

    2019-12-15
    赞同
    回复 1
    • ieloag
      ieloag
      2019-12-15
      我真机测试是一片黑...
      2019-12-15
      回复
  • 麻辣烫不烫จุ๊บ
    麻辣烫不烫จุ๊บ
    2019-08-30

    你好,请问一下小程序支持本地json、atlas文件吗

    2019-08-30
    赞同
    回复 1
    • Graden
      Graden
      2019-08-31
      什么意思?spine加载项目目录下的文件吗?没有试过,应该可以。用FileSystemManager的接口试试
      2019-08-31
      回复
  • youngyang
    youngyang
    2019-05-24

    你好,我想问一下小程序是支持spine动画的吗?我打开你的用不了


    2019-05-24
    赞同
    回复 2
    • Graden
      Graden
      2019-05-24

      支持,最新版本支持webgl 1.0,可以手机端看一下,我的是安卓机。

       Nightly版本微信开发者工具也可以看

      2019-05-24
      回复
    • ieloag
      ieloag
      2019-12-15回复Graden
      请问下ios可以运行吗?
      2019-12-15
      回复
登录 后发表内容