龙骨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)的背景和概念
为了解决微服务框架的侵入性问题,我们引入服务网格。
4473 0
全方位解读服务网格(Service Mesh)的背景和概念
|
2月前
|
存储 前端开发 JavaScript
深度理解Promise状态变化_配合小Demo
本文通过代码示例深入探讨了JavaScript中Promise对象的三种状态(pending、rejected、resolved)及其变化过程,解释了在什么情况下Promise会从pending状态变为resolved或rejected状态,并演示了如何通过Promise的状态管理异步操作。
24 0
深度理解Promise状态变化_配合小Demo
|
3月前
|
缓存 前端开发 数据格式
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
|
3月前
|
API 图形学 索引
Unity3D学习笔记5——创建子Mesh
Unity3D学习笔记5——创建子Mesh
28 0
|
6月前
|
前端开发
在有状态组件中使用forceUpdate()方法重新渲染
在React类组件中使用`forceUpdate()`重新渲染的步骤包括:继承`React.Component`,定义`updateComponent`方法调用`forceUpdate`,并在模块热替换回调中调用此方法。示例代码展示了如何实现。注意,这种方式需要手动创建和管理组件实例,不适合React Hooks,应优先考虑使用`useState`或`useReducer`来更新状态并触发渲染。
|
前端开发 JavaScript 开发者
条件渲染(Conditional Rendering):构建动态Web界面的关键技术
在Web应用程序开发中,动态性和交互性是吸引用户的关键因素之一。条件渲染是一种重要的技术,它允许开发者根据特定条件来选择性地显示或隐藏页面元素,以实现动态Web界面。在本博客中,我们将深入探讨条件渲染的概念、不同的条件渲染方法、最佳实践以及如何有效地使用条件渲染来构建具有响应性和交互性的Web应用。
163 0
|
运维 负载均衡 Kubernetes
Service Mesh 服务网格-宏观介绍
Service Mesh 服务网格-宏观介绍
|
负载均衡 网络协议 NoSQL
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本
|
图形学
Unity中UGUI、粒子系统、Mesh混合使用保证层级正确
把粒子、Mesh渲染到一张RenderTexture上,然后把这张RenderTexture贴到一张RawImage就可以解决这种类似的UI,Mesh,粒子穿插使用的问题。这种方法由于比较麻烦就没有使用。