three.jsgLTF中的纹理有时显示为黑色，但仅在iOS上显示

我使用的一个棒球场的gLTF模型有3个图像纹理。在桌面（macOS Chrome和Safari）上，模型加载正确，座椅、草地和污垢看起来正确。但是，在iOS中，模型并不总是正确的，因为一个或多个纹理是黑色的。有时污垢看起来是黑色的。有时草看起来是黑色的。有时座位是黑色的。但是，有时整个模型看起来是正确的！
偶尔，应用程序将因“问题重复出现”错误而崩溃。
我真的不知道如何使此问题更具可复制性，但感觉有时加载多个选项卡会导致此问题。
以下是显示问题的代码沙盒：three.js/gltf体育场-代码沙盒15(https://hc1vv.csb.app/8）
你也看到了吗小纹理的问题？您可以尝试使用2048x2048纹理的这个版本：ndrive.google.comstadium-v2.glb 4
谷歌驱动器文件
这里是一个具有2k纹理的Sid沙箱分支：np>three.js/gltf体育场（分叉）-代码沙盒5(https://3s932.csb.app/2） .
我在saucelabs上做了一些测试，因为我无法使用iphone在iOS 15中，我没有看到使用低分辨率纹理的bug。需要注意的是，这种阴影故障行为在运行iOS 14的iPhone上并不存在。
谢谢@donmccurdy，这似乎很有帮助。当我们将其他GLB模型（已经使用2048x2048纹理的模型）加载到场景中时，我们仍然会偶尔看到这种情况发生，但现在codesandbox似乎工作得更好了，我们将独立进行一些挖掘（@aidenhjj和我正在一起工作这个项目）。
你有没有想过为什么只有在iOS上才会出现着色问题？纵观本论坛上过去的主题，似乎总是有一些特定于平台的特性，但是想知道是否有更技术的原因来帮助我们更好地理解这个问题。ndiv>sidsethupathi:ndiv>blockquote>
对于为什么阴影问题只在iOS上发生，您有什么想法吗？听上去设备的GPU内存或VRAM快用完了，最后一个要加载的纹理将变暗。移动设备上的内存可能非常有限，甚至一些4K纹理也可能太多。还有最近发布的Safari 15，它有很多WebGL更新，可能有一些bug。
如果问题与内存有关，那么使用分辨率较小的纹理（PNG和JPEG压缩没有帮助！）或者像KTX2/Basis这样的GPU纹理压缩将有助于降低内存占用。
在更新到iOS/iPadOS 15后，我在客户项目中遇到了同样的问题。该web应用程序在macOS和iOS/iPadOS 14上运行良好。
重新启动设备可以解决缺少纹理的问题。但经过一定时间后，纹理再次丢失。因此，iOS 15上的Safari似乎有一个令人讨厌的内存错误。
这是我上周创建的主题：nSafari iOS15上缺少纹理的问题
blockquote>嘿，在更新到iOS15/iPadOS15之后，一些模型纹理丢失了。这看起来更像是Safari中的一个bug，但也许你们中的一些人有一个想法/解决方案/解决方法。要快速查看，您可以访问>nHm。不幸的是，这听起来像是需要向苹果（或Webkit）报告的事情。最新版本的WebGL实现发生了重大变化。
对此有任何后续行动吗？
我在使用3d viewer wordpress插件时遇到了相同或类似的问题，该插件使用three.js
我使用了一些3d模型，上面映射了透明的png纹理，并将它们作为glTF文件用Blenderv2.92.0导出。它们在windows、mac os、android和ios14上都显示正确。然而，在ios15上，3d模型本身工作正常，但贴图纹理有时显示为黑色或根本不显示。查看此屏幕截图以供参考：iOS15上的glTF问题-Imgur 8上的相册
我想知道在从blender导出3d模型时是否还有其他方法可以尝试，以使它们在iOS15上正常工作。非常感谢您的帮助！
我也有同样的问题。我的应用程序在任何iOS（14及以下）和Android设备上都可以正常工作，但在机型上只显示黑色，在iOS 15上的Chrome和Safari中都会崩溃。
我使用较小的纹理（从2k减少到512）进行了测试，它重新开始工作。因此，我认为这是一个内存问题。
更新：我尝试使用精度“lowp”和“mediump”，但没有成功。目前只有较小的纹理可用。
更新2:
我发现了一个问题：Safari v15（在桌面上）->；threejs bug·问题#22582·mrdoob/three.js·GitHub 13。因此我将三级降级为v112.1，这使得黑色纹理的情况不那么频繁。它确实有一些帮助，但在我的情况下不能完全消除这个问题。
顺便说一句，我试图在你的code沙箱中降级相同的内容，而且体育场看起来很完美，没有任何遗漏。你应该试一试。
更新3:
我以某种方式（或解决方法）修复了此问题。
我怀疑iOS15的GPU内存管理存在一些问题，会影响纹理上传到GPU。因此，我限制了纹理实例化（为每个纹理设置一个超时，总共10~20 512*512个纹理），黑色纹理问题再也不会出现。
更新：gpu压缩提示非常有用。您可以获取一个gltf文件文件夹，并执行类似操作以将纹理转换为ktx2格式：n#!/bin/bash# make and make install https://github.com/BinomialLLC/basis_universalfor d in */ ; dopushd $dfor file in *; doecho $fileif [[ $file == *.jpg ]]; thenbasisu -ktx2 $filerm $fileelseif [[ $file == *.gltf ]]; thensed -i -e \"s/\\.jpg/\\.ktx2/g\" $filesed -i -e \"s/image\\/jpeg/image\\/ktx2/g\" $filefifidonepopddone
以加载gltfsthree.js，你必须做一些其他的事情，包括在这里，以防有人觉得它有帮助：nimport { LoadingManager } from \"three\";import { GLTF, GLTFLoader, KTX2Loader } from = new GLTFLoader(texLoadManager);texLoader.setTranscoderPath(transcoderUrl);const { gl>nWe were able to load large gltfs with 8k textures using this approach.nHi @hbleenCan you explain how to implement your solution? i\"m having the same issue.nI use ImageLoader to manage textures manully so it\"s easily to wrap a setTimeout to each image request. If you use loaders such as gltf loader, I\"m not sure how to control the texture loading frequency.nUnderstood… Unfortunately in my case i don\"t have access to the textures as a saparate object but i receive a glb with textures already built in.nThank you anywaynHello @aidenhjjnI\"m trying to follow your steps (but in angular) but i get the error DataCloneError: The object can not be cloned when the code hit the load functionnHere is my coden => {console.log(\"x\", gltf)})
你知道是什么原因造成的吗？
这是gltf文件夹
@tomthebeaded-I“不确定。我没有看到这个错误。您是否测试过仅获取basis/文件和gltf文件？我想知道文件名链接到gltf文件中的纹理是否被破坏了。
谢谢您的快速响应…我已经更新了threejs版本，现在当code到达加载函数时，它似乎什么也没做。
我将尝试用basis工具重新创建gltf。
好了，现在我可以加载模型，但纹理是由于某些原因，缺少
它正在搜索扩展名为.ktx2.ktx2的文件。我不知道为什么，如果我检查gltf，每个文件只有一个ktx2。nSchermata 2021-11-23 alle 17.02.401088×188 KBngltf文件有一个jso
组件—您应该能够在文本编辑器中打开它并搜索这些文件名—在我看来，您已经损坏了gltf本身中的文件名
Textures in gLTF sometimes display black, but only on iOSn

three.jsgLTF中的纹理有时显示为黑色，但仅在iOS上显示

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形