uvtools:观察uv顶点数据的好帮手,修改游戏引擎你值得拥有

uvtools 是我自己写的一个小工具,在实际魔改引擎的过程中帮了很多忙,一般魔改引擎的过程中肯定会遇到渲染异常的bug,如果涉及到顶点数据的修改,首先肯定是要确认uv顶点是否符合预期,因此我需要一个工具,观察新的uv顶点数据,uv顶点的取值范围是[0-1],映射到纹理上观察更直观,省心又省力。

我尝试寻找了市面上的替代软件,没有找到理想的替代品,能凑合的也不是非常好用,而且这算是我个人修改引擎过程中的一个高频需求,于是自己开发了一个,在排查渲染问题时,验证uv数据非常好用。

uvtools:观察uv顶点数据的好帮手,修改游戏引擎你值得拥有

使用教程

  1. 使用cocos dashboard安装插件,遇到问题请联系作者或者反馈论坛

  2. 打开插件

  3. 将uv对应的图片拖拽到左侧区域

    uvtools:观察uv顶点数据的好帮手,修改游戏引擎你值得拥有

  4. 输入要观察的uv顶点数据,这个需要你对Engine的顶点数据整理下,比如:[0,0,1,1].join(','),这里是以,分割每个顶点坐标。如果你对OpenGL/WebGL非常熟悉,很容易理解以下几个选项

    • step为一组顶点数据包含多少个分量

    • offset为uv顶点在一组顶点数据内的偏移量

    • count目前不允许修改,表示顶点的分量个数,很明显uv只有2个分量。

      uvtools:观察uv顶点数据的好帮手,修改游戏引擎你值得拥有

    上图中,只有一个uv顶点(1,1),因为offset为2,会自动跳过每4(step)个分量的前2(offset)个分量。

    简单解释下,这里借鉴OpenGL的设计,主要还是为了灵活性,其次是engine的顶点数据也是遵从这样的设计,方便我们进行数据转换,这里有一个小细节,当我们输入顶点数据后,工具会自动根据step将顶点数据分割成行,一行代表的就是一个顶点数据。

  5. 点击show uv按钮,即可在左侧纹理区域上显示对应的uv顶点位置,鼠标移动到对应的uv顶点上,会显示该顶点的一些详细信息,按照uv顶点的顺序尺寸逐渐变大,颜色由黄变绿,方便识别uv顶点的开头和结尾,在做顶点对比的时候非常有帮助。

    uvtools:观察uv顶点数据的好帮手,修改游戏引擎你值得拥有

  6. 纹理视口区域,右下角显示的是当前纹理的尺寸,鼠标右键拖动纹理可以调整观察区域,如果我们想将观察的顶点数据在视口居中显示,点击回到中心即可。

引擎本身就是在和顶点数据打交道,纹理不正确,一眼就能通过画面看到,而顶点数据大部分都是计算出来的,特别是比较复杂的mesh,顶点数据量大,比如spine/dragon-bones,有像uv-tools这样的工具加持,能节省不少心智负担。

原文链接:https://juejin.cn/post/7343827886870708243 作者:xu__yanfeng

(0)
上一篇 2024年3月9日 下午4:37
下一篇 2024年3月9日 下午4:48

相关推荐

发表评论

登录后才能评论