龙骨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)的背景和概念
为了解决微服务框架的侵入性问题,我们引入服务网格。
4034 0
全方位解读服务网格(Service Mesh)的背景和概念
|
9月前
|
负载均衡 安全 Cloud Native
服务网格的工作原理:解析服务网格的核心组件和通信模式
服务网格的工作原理:解析服务网格的核心组件和通信模式
64 0
|
12月前
|
Kubernetes 监控 负载均衡
企业级服务网格优化中心:优化Service Mesh以提高性能和高可用性
 以下内容是根据王夕宁在2023年6月份在北京举行的CNCF Kubernetes Community Day(KCD)会议上的演讲主题整理而成。 Service Mesh是一种用于管理微服务架构中网络通信的解决方案,通过在每个服务实例中添加代理,实现流量控制、服务发现、负载均衡等功能。虽然Service Mesh能够提供很多优秀的功能,但也存在一些性能问题, 譬如:延迟增加:Service Me
108 0
企业级服务网格优化中心:优化Service Mesh以提高性能和高可用性
|
12月前
|
Kubernetes 监控 安全
企业级服务网格优化中心:优化 Service Mesh 以提高性能和高可用性
企业级服务网格优化中心:优化 Service Mesh 以提高性能和高可用性
|
12月前
|
运维 负载均衡 Kubernetes
Service Mesh 服务网格-宏观介绍
Service Mesh 服务网格-宏观介绍
|
负载均衡 网络协议 NoSQL
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本
【服务网格架构】Envoy架构概览(10):热启动,动态配置,初始化,排水,脚本
|
数据可视化 前端开发 算法
动态渲染拓扑图方案探究
拓扑图是数据可视化领域一种比较常见的展示类型,目前业界常见的可视化展现的方案有ECharts、HighCharts、D3、AntV等。当前的项目使用的是基于ECharts的静态关系图渲染,为了后续可能扩展成动态的拓扑图渲染,本文探索了ECharts的原理以及G6的原理,也算是对自研一个可视化库的基本实现方法做了一个梳理。
226 0
|
图形学
Unity中UGUI、粒子系统、Mesh混合使用保证层级正确
把粒子、Mesh渲染到一张RenderTexture上,然后把这张RenderTexture贴到一张RawImage就可以解决这种类似的UI,Mesh,粒子穿插使用的问题。这种方法由于比较麻烦就没有使用。
|
算法 开发者
五、OpenGL 渲染技巧:正背面剔除
OpenGL 渲染技巧:正背面剔除
369 0
五、OpenGL 渲染技巧:正背面剔除
|
存储 Prometheus Kubernetes
Emoji.voto,Linkerd 服务网格(service mesh)的示例应用程序
Emoji.voto,Linkerd 服务网格(service mesh)的示例应用程序
173 0