three.js使用RGB_PVRTC_4BPPV1_格式时,某些iPad和较旧的移动设备上的alpha基本纹理显示为完全黑白

我已经概述了我在这里遇到的问题7,但我认为这可能是一个问题three.js这是我在论坛上遇到的问题,但提供的参考图像不再是实时的,所以我不确定。
这个问题,带basisLoader的GLTFLoader仅在iOS 7上渲染alpha地图。请提前感谢任何洞察
@Hayden
嘿,伙计,我想你需要将最小和最大过滤器类型更改为三线过滤器,如果我记得的话,数字代码是1006,你也可以在你的.gltf代码中设置。如果你在那里搜索min filter,你会找到mi
和mag值,其中一个值是需要粘贴到mi
和mag中的正确值mag filter…
看起来是材料问题,你能告诉我材料代码吗?
感谢大家的快速反应,伙计们@forerrun@playbyan1453。实际上,纹理的mi
和mag过滤器已经设置为代码1006,这是三线过滤器,默认情况下。
下面是加载基本纹理并应用它的代码。网格是用一个MeshBasicMaterial导入的,它的贴图是4x4白色png,所以我只是用basis=>n)来切换该图像。纹理格式在我尝试过的每个设备上都不同(见下文)。纹理在笔记本电脑和iPhone上看起来是正确的,但不是37808;//>
我曾尝试将格式更改为PVRTC的RGBA版本,但也不起作用。nbasis 2的创建者提供了更多更新。
他提出了我在上一篇文章中提出的相同观点:
唯一看起来不确定的是正在使用的纹理格式>
他对me:
对于这样的alpha纹理,最好使用4444或32位而不是PVRTC1(或者更大的纹理)。
我不太熟悉three.js,所以你可能想在他们的开发者论坛上提问。basis转码器可以提供4444、565或32位纹理数据(以及所有其他GPU tex格式)。但是我不确定three.js支持它。
此外,您可能只想看看three.js人们已经解决了这个问题,因为他们似乎没有为PVRTC1使用RGBA格式。
但仍然没有解决方案。有人知道如何利用4444或32位格式吗?或者你还有其他想法吗?
另一个我觉得很奇怪的注意事项,你可以在github上的帖子中找到:
是的,我注意到iPad的格式是RGB,这可以解释为什么没有出现alpha。奇怪的是,它似乎在渲染纹理的alpha通道,而不是RGB通道,因为它在树上显示白色,在完全透明的地面上显示黑色,在阴影上显示灰色。
现在我认为可能的解决方案正在更新three.js超过v111或实现KTX2Loader。如果我真的测试了这些解决方案,我会报告回来。我建议尝试使用KTX2Loader在模型中嵌入.ktx2纹理,是的。如果这不起作用,我可以进一步研究,但将.basis文件放在glTF模型中并没有真正的官方支持,我认为我无法对此进行调查。无论哪种方式,基本压缩技术都是相同的,它只是围绕该数据的一种不同的“容器”格式。@donmccurdy我将尝试使用ktx2解决这个问题,因为three.jsktx2和alpha的示例在我的iPad上运行,它打破了alpha的常规基本纹理。
尽管我对ktx2有点困惑,但还是有几个问题要问你。n1. I>d我喜欢将ktx2纹理从glb模型中分离出来,并以编程方式应用它,因为这是我已经拥有的基本纹理流。我在示例中看到了这种情况three.js/webgl\\u loader\\u texture\\u ktx2.html地址:cf04fca253477f40e0488229cfcaf0f280e448b·mrdoob/three.js·GitHub 1。但是如何从basis或png转换为ktx2纹理?n2. 我正在使用three.jsv111,并且希望暂时使用这个版本,因为我已经在这个项目的开发周期结束了。我还可以使用KTX2Loader吗?我看到v111只有KTXLoader。我可以在three/examples/jsm中将KTX2加载程序代码添加到
pm包中,并期望它仍然工作吗?海登:
但如何从basis或png转换为ktx2纹理?
从此处的“资产”下拉列表下载KTX软件的安装程序:Releases·KhronosGroup/KTX Software·GitHub 2。这将安装一个toktxCLI工具,可以将PNG或JPEG图像转换为.ktx2文件。将.basis转换为任何其他格式都需要一些自定义代码。
我仍然可以使用[v111]中的KTX2Loader吗?我看到v111只有KTXLoader。我可以在three/examples/jsm中将KTX2加载程序代码添加到
pm包中,并期望它还在工作吗?
我不确定……我猜它不会正常工作,因为KTX2Loader依赖于对three.js,包括WebGLExtensions:Add.has(name)方法,由donmccurdy·Pull Request#19756·mrdoob编写/three.js·GitHub 1和压缩织物:由donmccurdy·Pull Request#18581·支持ETC2/EAC杜布先生/three.js·GitHub 1。您可以在本地修改KTX2Loader,使其不需要这些更改。
感谢您的快速响应!我非常感谢你的帮助!希望我不再有问题了
@donmccurdy好的,所以我用toktx将我的png文件转换成了ktx2,但该文件比png文件大5倍。我在这里错过了什么??使用png会更好吗?
我需要查看纹理和用于说明其可能更大原因的转换设置,但请参见下面的答案:最佳实践:JPG附加到模型还是将WebP加载到模型?问题这些输出文件实际上导致了更大的文件大小…制作更小的文件并不是Basis的真正目的-有时会,这取决于您的压缩设置,但在大小方面并不总是比JPEG好。主要目标是减少GPU内存(JPG和PNG纹理必须在GPU内存中完全解压缩),并使纹理从JS内存更快地上传到GPU内存,避免加载新纹理时渲染冻结。请参阅gltf transform etc1s-h documen…
如果您使用的是
pm install --save @types/three中的UASTC选项,请确保还启用了ZSTD压缩。
啊哈,-UASTC或--zcmp选项使.ktx2文件的大小与png文件差不多!看看你的答案,我从来都不知道BASIC不会总是导致更小的尺寸——他们总是给我的纹理减少50-90%,所以我很惊讶地看到文件变大了。
不管怎样,我已经确定的解决方案是在少数设备上使用png纹理,在这些设备上,黑白basis会出现问题正在发生,这就足够了。如果我开始实施ktx2纹理,我将用解决方案更新此线程。
再次感谢您的指导。你就是那个人。
随着一个新的但类似的问题的出现,你又回到了这个问题上。
我在glb中嵌入了带有alpha的ktx2纹理,它们在我尝试过的每个设备+浏览器上都非常有效,除了MacOS上的Safari。alpha通道被忽略,纹理显示为黑白。这是因为在Safari+MacOS上,基本纹理的格式变成了RGB_ETC1_格式。重申一下,我的iPhone上的safari运行良好,Chrome和Firefox在我遇到问题的同一台Mac上运行良好,因为基本纹理的格式与RGBA有关。
我想确保这不是我的项目的问题,也不是我正在使用的toktx版本的问题,所以我在上转到了ktx2示例threejs.org在safari上,透明度也显示为黑色。
对解决这个问题有什么想法吗?我目前的计划是检查加载的压缩纹理的格式,如果它不包含alpha通道,那么我将加载png版本的纹理。nHm,这很有趣……在调用 \"main\": \"script.js\",后,你能在macOS设备上打印
pm install esbuild的值吗?这不仅仅取决于浏览器和操作系统,而且在我的macOS设备(M1 Pro)上,我得到了-nChrome和Firefox:n*\"build\": \"esbuild ./script.js --bundle --minify --sourcemap>nAlso bellow \"license\" add:n\"private\":true,nSafari:n*nYou can put it either inside the
目前,转码器更喜欢ETC1而不是DXT,但对于带有alpha通道的纹理,可能不应该是这样。这可能值得一提。
我还认为Safari+ANGLE应该在M1设备上支持更多的纹理格式,但是我现在没有看到它。
相关:n- 3D格式指南/KTXDeveloperGuideWebGL.md在abb088ef6f2a015f830bfd942bd42930a543c6ca·KhronosGroup/3D格式指南·GitHub 1上https://twitter.com/grorgwork/status/14023079668171161611
我的safari输出与您的:n
我的输出与您在Chrome和Firefox上的输出相同。
问题是否发生在您的设备上的ktx2示例上three.js?
关于ETC1优先于DXT,这似乎确实是这些透明纹理的问题。有没有办法编辑转码器以使用DXT而不是ETC1?海登:
问题是否发生在您的设备上的ktx2示例上three.js?
是的,这里的问题相同(仅限Safari)。
有没有办法编辑转码器以使用DXT而不是ETC1?
我认为这会起作用:nnpm run build,它支持透明性。
您认为这个补丁适合生产吗?如果KTX2Loader检查纹理是否具有alpha并返回到RGBA格式而不是RGB格式,这将是理想的选择。如果你想让我提出问题或其他什么,请告诉我
Basis textures with alpha appearing fully black and white on some iPads and older mobile devices when RGB_PVRTC_4BPPV1_Format is usedn

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

您好,我正在使用带轨道控制的正交摄影机。我注意到当缩放照相机变焦不改变相机的位置(如透视相机)。首先,我想知道为什么这两个相机的实现方式不同?第二,我也在使用TransformControls,对于透视摄影机,更新功能上的小控件的重新缩放在这个等式中非常有效>但是使用OrbitControls更改缩放而不是正交摄影机的位置时,它没有正常工作。我试着像这样在等式中添加缩放,但没有得到任何好的结果>我应该以不同的方式包括它吗?我应该使用其他控件吗?谢谢大家的帮助!NaDaMa:首先,我很想了解为什么这两个摄像头...

日期:2021-12-11 08:00:01 浏览:1739

three.js多次渲染同一模型(obj模型),FPS要低得多

我试图在程序中渲染150个相同的树模型,但FPS突然从60下降到30+。你能告诉我什么是最好的解决办法吗?非常感谢。和平与爱。skr有两种典型的方法可以解决这个性能问题(太多的绘制调用):- 使用实例化渲染- 将所有几何体合并为一个几何体(因此只有一个网格)...

日期:2021-12-11 08:00:02 浏览:1745

three.js可缩放场景背景

three.js大家好,我有一个场景,由一个物体(反射雕像)组成,保持在一个漂亮背景的中心。我一直在使用威尼斯日落矩形hdr地图作为我的场景背景它既可以作为环境地图,也可以作为背景我看到背景不会与场景中渲染的网格一起缩放。这给人一种场景完全是假的感觉。i、 e状态向上/向下缩放,但背景不缩放。目前,我已经禁用了放大/缩小功能,这样用户就不会感到害怕。我的问题是:1. 当轨道控制放大/缩小时,我是否需要在此处使用一些着色器魔法来放大或缩小场景背景,以便看起来场景中的所有对象都在均匀缩放?或者这根本不可能做到?...

日期:2021-12-11 09:00:02 浏览:1271

three.js移动导入的Gltf模型

three.js我导入了我的gltf模型并将其添加到场景中,但现在如果我尝试移动它,它将不会=新建三、几何();var=混音器( 模型动画[0]>如何移动模式?Prakar_Srivastava:var>3D对象不能是Geometry或BufferGeometry类型。它应该是Object3D或类似Mesh、Points或Line的派生类的实例。在您的情况下,我只是这样声明变量:var mode;在动画循环中,执行以下操作:如果(mod!==未定义)>还请记住,基本3D场景的重要部分在代码片段中丢失(例如相...

日期:2021-12-11 10:00:01 浏览:1111

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

three.js嗨!我在项目中使用节点材质。我在模型渲染方面有问题。它看起来像是真实的平面阴影。如何平滑多边形?也有点像低分辨率阴影纹理贴图的自阴影。可能不是,但可能是。@Arkadiy\\u Vinkovskiy您需要在您的帖子中添加更多细节。屏幕截图不足以说明这里发生了什么。始终包括引起问题的代码,如果您使用的是模型,也要包括这些代码。更好的是,使用codepe制作一个工作示例...

日期:2021-12-11 10:00:02 浏览:996

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

您好,直到昨天,我才相信Object3D是一组网格,而网格是一组几何体+材质,每个对象只有一个对象。我发现了立方体材质的结构,因此object3D的网格包含1个几何体(boxGeometry)和6个材质!所以问题是,这种网格的渲染效果如何?有关于它的文件吗?(这是为了提高我对three.js)非常感谢还有其他问题,与我的上一个帖子相关,如果一个网格中可能有多个材质,如何设置CustomDistanceMaterial以考虑所有材质的所有贴图?elysium11:所以问题是,渲染如何在这种类型的网格上工作?您...

日期:2021-12-11 11:00:03 浏览:855

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

three.js伙计们,我想帮忙,假设我有一个这样的网格图像718×729 1.25 KB我想在网格面内创建线段,也就是说,我想将网格转换成这样的线图像710×828 740字节有人能帮忙吗???...

日期:2021-12-11 12:00:01 浏览:907

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

three.js每当我试着做决定的时候3.GLTFLoader对象我收到此错误代码:“未捕获类型错误:这是我的登记簿不是一个函数“我需要帮助!由Penta#u Trax在post#5中解决我最终发现我一直在使用错误的文件,当你需要使用jsm/example时,我使用的是js/example。其他东西也是个问题。但这是问题的基础。你能给我们看看你的代码吗?通常,如果你使用的是import语句,GLTFLoader不需要在前面加三个字符。好的,所以在这之前,我刚刚关注了这个视频,因为它是去年发布的。但是现在我试...

日期:2021-12-11 12:00:02 浏览:1067

three.js使用threejs的光流

嘿,我需要通过我的屏幕显示一束移动的光束。我不想使用任何模型或动画。我想知道我是否可以单独使用threejs来实现这一点。我也应该能够控制其运动的颜色强度和路径。嗨!也许这会有帮助:GitHub-jeromeetienne/三倍体积聚光灯: three.js扩展以提供体积聚光灯13,用于可视化光锥。您可以使用THREE.Curve()设置其路径。控制颜色强度,可能取决于曲线上的位置,也可以使用tween.js或者GSAP用于复杂的动画。创造力取决于您这是您想要的吗?https://threejs.org/e...

日期:2021-12-11 13:00:01 浏览:1312

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

我要画多边形three.js具有交点。为此,我使用下面的函数。首先,我使用光线投射器在第一个交点的第一个点添加球体。每次单击后,在交点处创建新球体,并在该交点和上一点之间创建线。现在,我希望在第一次单击时关闭多边形指向或单击该点周围。如何实现此目标。raycaster params是否与网格一起工作以检测鼠标位置周围的网格?function checkIntersectionclick() = raycaster.intersectObjects(addedObject, true);if (interse...

日期:2021-12-11 13:00:02 浏览:867