请问webgl有哪些基础但相对易用的图片处理框架(尤其图片变形功能)

王一
  • 14

各位大神,目前公司有一个项目是这样:

实现一个像上图这样的LOGO能批量替换到系统的所有场景图中。

我目前通过原生js将效果实现到了这样:

但按着这个路线继续研究的话有如下问题:
1.很多时候边缘有明显的锯齿:

2.难以实现曲面的变形效果,例如在杯子、枕头这样有凹凸效果的场景物品中。
3.不能实现自然的叠加效果,比如第一张参考图中,logo印在T恤上,logo上的T恤褶皱依然很自然,还有右边广告牌上很自然的光照效果叠加到logo上。

目前了解到webgl以及相关框架(如three.js、pixi.js)可能能实现需求。但本人线性代数和计算机图形学的基础都比较差。这些东西都学习透彻再去实现需求时间有些来不及。所以想问下有没有比较好用,学习成本暂时不太高的框架可以实现我的需求呢?谢谢!

回复
阅读 399
1 个回答
  1. PixiJS是个用WebGL来渲染2D内容的框架,不适合干这事。
  2. 3D引擎/框架不需要你懂很多图形学基础比如线性代数这些,ThreeJSBabylonJS 这些你要做的就是熟悉它的框架,读它的文档,以及一些3D编程的基础概念,不然要框架做什么呢。
  3. 这些需求一定是需要建立一个3D世界的,比如褶皱需要利用原图片生成法线贴图,灯光则需要你自己创建灯光,微调颜色角度强度等等参数以便与背景图片契合,这些其实都是体力活,想要一键搞定估计只有AI了。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏