龙骨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)的背景和概念
为了解决微服务框架的侵入性问题,我们引入服务网格。
4533 0
全方位解读服务网格(Service Mesh)的背景和概念
|
3月前
|
存储 前端开发 JavaScript
深度理解Promise状态变化_配合小Demo
本文通过代码示例深入探讨了JavaScript中Promise对象的三种状态(pending、rejected、resolved)及其变化过程,解释了在什么情况下Promise会从pending状态变为resolved或rejected状态,并演示了如何通过Promise的状态管理异步操作。
30 0
深度理解Promise状态变化_配合小Demo
|
4月前
|
API 图形学 索引
Unity3D学习笔记5——创建子Mesh
Unity3D学习笔记5——创建子Mesh
34 0
|
7月前
|
Web App开发 小程序 Android开发
Uniapp match-media 检测节点 适配大屏小屏 不同屏幕视图组件
Uniapp match-media 检测节点 适配大屏小屏 不同屏幕视图组件
95 0
|
前端开发 容器
前端——父容器根据子容器的高度自动变化高度(自适应)
前端——父容器根据子容器的高度自动变化高度(自适应)
|
运维 负载均衡 Kubernetes
Service Mesh 服务网格-宏观介绍
Service Mesh 服务网格-宏观介绍
|
负载均衡 网络协议 NoSQL
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本
|
前端开发 容器
Bootstrap4(一)重点----网格系统,图像形状,轮播,多媒体对象,滚动监听
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
192 0
Bootstrap4(一)重点----网格系统,图像形状,轮播,多媒体对象,滚动监听
|
图形学
Unity中UGUI、粒子系统、Mesh混合使用保证层级正确
把粒子、Mesh渲染到一张RenderTexture上,然后把这张RenderTexture贴到一张RawImage就可以解决这种类似的UI,Mesh,粒子穿插使用的问题。这种方法由于比较麻烦就没有使用。
|
JavaScript API 索引
全局API之Vue.set 监听数据层的数据变化
全局API之Vue.set 监听数据层的数据变化