龙骨mesh渲染异常,最终发下是mesh设置的问题

简介: 龙骨mesh渲染异常,最终发下是mesh设置的问题

嵌套的情况:获取slot所在龙骨的节点树

js
复制代码
let parent= this.armature;
while (!!parent) {
        console.log(parent.name); parent= parent.parent;
}
  • yu  /yu1  /yu_11 /root
    image.png
  • yu/yu_1/ root
    image.png

获取slot所在龙骨的节点树

js
复制代码
let parent= this;
while (!!parent) {
        console.log(parent.name); parent= parent.parent;
}
  • yu1/ bone2/ bone1/ bone/ root
    image.png

查顶点数据的xy

image.png

这个问题主要是查uv,检索到的顶点数据如下

diff
复制代码
-24.829999923706055, 14.130000114440918,  0.25266502084435194, 0.5545648966428529, 
-14.710000038146973, 17.8799991607666,    0.2753669662466309,  0.5507230580316307, 
-0.6800000071525574, 17.8799991607666,    0.30681630250081016, 0.5507230580316307, 
14.949999809265137,  8.800000190734863,   0.34185151668838026, 0.560020725189713, 
17.950000762939453,  1.5299999713897705,  0.34857875850877873, 0.567474092226572, 
25.950000762939453,  0.46000000834465027, 0.36651805425896256, 0.5685757779241226, 
25.950000762939453,  -17.1200008392334,   0.36651805425896256, 0.5865826441525178, 
15.819999694824219,  -17.1200008392334,   0.34381412764003766, 0.5865826441525178, 
11.920000076293945,  -13.039999961853027, 0.33506871800478333, 0.5824071249195949,
2.1500000953674316,  -13.569999694824219, 0.3131506187906525,  0.5829457277769869,
-13.479999542236328, -7.71999979019165,   0.27811342338643646, 0.5769522043398625,
-25.049999237060547, 4.880000114440918,   0.2521589885425939,  0.5640420980867327

对应12个点

image.png

image.png

我编写了一个uv工具,观察到引擎计算的顶点的确是有问题的,错误的设置mesh,渲染效果也是符合预期

image.png

再看顶点计算的规则

js
复制代码
localVertices[vfOffset++] = (region.x + floatArray[uvOffset + i] * region.width) / textureAtlasWidth;
localVertices[vfOffset++] = (region.y + floatArray[uvOffset + i + 1] * region.height) / textureAtlasHeight;

image.png

概括说就是计算出再合图纹理中的uv


ini
复制代码
uv= (region.x + uv*region.width)/textureWidth

floatArray指向的就是单图里面的uv

切换资源的关键帧数据在哪

image.png

gotoAndPlay

image.png

也怀疑过是bones缩放引起的

image.png

也怀疑过是精度的问题

image.png

如上图,顶点-24.83,在js中变成了-24.829999,不过这个精度差异非常小,不像是这个问题导致

最终问题定位

最终排查到是龙骨工程mesh设置的有问题

image.png

这里解释下uvs的含义,龙骨会导出3个文件,ske.json、tex.png、tex.json

uvs的顶点是0-1,对应的是散图纹理的0-1,不是龙骨导出tex.png的0-1


目录
相关文章
|
运维 安全 Cloud Native
全方位解读服务网格(Service Mesh)的背景和概念
为了解决微服务框架的侵入性问题,我们引入服务网格。
4339 0
全方位解读服务网格(Service Mesh)的背景和概念
|
11天前
|
存储 前端开发 JavaScript
深度理解Promise状态变化_配合小Demo
本文通过代码示例深入探讨了JavaScript中Promise对象的三种状态(pending、rejected、resolved)及其变化过程,解释了在什么情况下Promise会从pending状态变为resolved或rejected状态,并演示了如何通过Promise的状态管理异步操作。
9 0
深度理解Promise状态变化_配合小Demo
|
2月前
|
缓存 前端开发 数据格式
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
|
2月前
|
API 图形学 索引
Unity3D学习笔记5——创建子Mesh
Unity3D学习笔记5——创建子Mesh
24 0
|
5月前
|
前端开发 JavaScript 数据可视化
几何学在前端边界计算中的应用和原理分析(一)
几何学在前端边界计算中的应用和原理分析(一)
41 0
|
12月前
|
负载均衡 安全 Cloud Native
服务网格的工作原理:解析服务网格的核心组件和通信模式
服务网格的工作原理:解析服务网格的核心组件和通信模式
83 0
|
API 容器
SAP UI5 BarcodeScannerButton 的初始化逻辑 - feature 检测,Cordova API 检测等逻辑
SAP UI5 BarcodeScannerButton 的初始化逻辑 - feature 检测,Cordova API 检测等逻辑
|
前端开发 JavaScript 开发者
条件渲染(Conditional Rendering):构建动态Web界面的关键技术
在Web应用程序开发中,动态性和交互性是吸引用户的关键因素之一。条件渲染是一种重要的技术,它允许开发者根据特定条件来选择性地显示或隐藏页面元素,以实现动态Web界面。在本博客中,我们将深入探讨条件渲染的概念、不同的条件渲染方法、最佳实践以及如何有效地使用条件渲染来构建具有响应性和交互性的Web应用。
145 0
|
运维 负载均衡 Kubernetes
Service Mesh 服务网格-宏观介绍
Service Mesh 服务网格-宏观介绍
|
负载均衡 网络协议 NoSQL
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本