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

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

框架类型 问题类型 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
回答关注问题邀请回答
收藏

9 个回答

  • Eric Huang
    Eric Huang
    置顶回答2019-06-10

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


    gl.canvas.width = width * DPR

    gl.canvas.height = height * DPR


    DPR 可以通过 getSystemInfo 来获取。


    2019-06-10
    有用 2
    回复 13
    • 朱宝国
      朱宝国
      2019-06-14

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

      2019-06-14
      赞
      回复
    • Eric Huang
      Eric Huang
      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
      赞 1
      回复
    • Andrew
      Andrew
      2019-09-02回复朱宝国
      请问你的锯齿解决了吗
      2019-09-02
      赞
      回复
    查看更多(8)
  • kk
    kk
    2020-12-03

    大佬，问下这个的spine运行库用的是哪个版本

    2020-12-03
    有用 3
    回复
  • Vlada
    Vlada
    2023-09-14

    想问一下为什么我在开发工具中正常展示动画，但是真机调试就显示不出来，基础库3.0.0，ios是8.0.39

    2023-09-14
    有用
    回复
  • 不会写诗的翩翩大叔
    不会写诗的翩翩大叔
    2023-06-12

    想问下楼主有在ios真机跑过么，跑的时候是一片黑

    2023-06-12
    有用
    回复
  • 2020-12-03

    可以修改 spine-webgl.js 中的代码解决，其它项目只要使用 webGL 渲染贴图的都可以参考：

    原理可以参考这篇文章：https://docs.cocos.com/creator/manual/zh/asset-workflow/sprite.html#genmipmaps

    修改后的效果：

    2020-12-03
    有用
    回复
  • ieloag
    ieloag
    2019-12-15

    请问下iOS支持spine-webgl吗?

    2019-12-15
    有用
    回复 2
    • ieloag
      ieloag
      2019-12-15
      我真机测试是一片黑...
      2019-12-15
      赞
      回复
    • 若只如初见
      若只如初见
      2022-12-22
      请问下最后ios这个问题解决了么，大佬
      2022-12-22
      赞
      回复
  • Andrew
    Andrew
    2019-08-30

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

    2019-08-30
    有用
    回复 2
    • Graden
      Graden
      2019-08-31
      什么意思？spine加载项目目录下的文件吗？没有试过，应该可以。用FileSystemManager的接口试试
      2019-08-31
      赞
      回复
    • 划地为囚
      划地为囚
      2022-04-27回复Graden
      怎么解决的？大佬
      2022-04-27
      赞
      回复
  • 养🐷大户
    养🐷大户
    2019-05-24

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


    2019-05-24
    有用
    回复 3
    • Graden
      Graden
      2019-05-24

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

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

      2019-05-24
      赞
      回复
    • ieloag
      ieloag
      2019-12-15回复Graden
      请问下ios可以运行吗?
      2019-12-15
      赞
      回复
    • 不会写诗的翩翩大叔
      不会写诗的翩翩大叔
      2023-06-12回复Graden
      同问ios可以运行么
      2023-06-12
      赞
      回复
  • 灵芝
    灵芝
    2019-05-23

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

    2019-05-23
    有用
    回复 2
请 登录 后发表内容
相关问题
相关文档