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

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

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

使用教程

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

  2. 打开插件

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

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

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

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

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

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

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

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

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

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

相关推荐
言兴17 分钟前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_29 分钟前
TailWind CSS
前端·css·postcss
烛阴1 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧1 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment2 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点3 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile3 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年3 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神3 小时前
coze娱乐ai换脸
前端
GIS之路3 小时前
GeoTools 开发合集(全)
前端