What could be causing the Monster model to not appear when using the glTFLoader in three.js on iOS?

-Details-

three.js version : r84 (current version)

Device : iPad Air2

iOS version : 10.0.2

Browser : Chrome, Safari

-glTFLoader-

URL :

Monster -> NOT visible

The rest -> visible

Why am I asking this question?

I have encountered a similar issue with my self-created model. The process for exporting my model was as follows:

  1. Modeling, UV mapping, Skinning and Animation done in MODO
  2. Exported to Collada format from MODO
  3. Converted from Collada to glTF using COLLADA2GLTF tool

My model displays correctly on Windows and macOS, but not on iOS devices. I find myself in a situation similar to the example provided.

Is there a specific rule for correct display?

PS

I do not currently own an Android device so I have not been able to test it on Android...

javascriptandroidiosthree.jsgltf

Answer №1

An issue arises due to exceeding the maximum number of bones allowed.

When using a higher number of bones than supported by the operating system, the WebGL renderer will display a "too many uniforms" error.

It is mentioned that iOS (10.x?) can support either 22 bones for Phong shading or 22 bones for Lambert shading.

This problem has been documented on github already.

https://github.com/mrdoob/three.js/issues/7807

A simple workaround is to utilize fewer than 22 bones in the rendering process.

However, this limitation might be insufficient for complex models like human figures.

Credits to Marco13 and others who contributed to addressing this issue.

note:

The Monster model contains 32 bones, while my custom model boasts an impressive 52 bones!

I managed to debug effectively using iOS Safari and macOS Safari.

Below are links to the logs showcasing the Monster model:

https://i.sstatic.net/m6P2A.jpg

https://i.sstatic.net/EMExV.jpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting JSON to CSV: Simplifying the process of generating a table column for every field in a collection with Papa.unparse()

Using Papa Parse 4, I am encountering an issue when using Papa.unparse(collection). It appears that the resulting table is only generating columns based on the fields of the first document in my JSON collection. I would like all possible fields from my col ...

javascriptjsoncsvpapaparse

Initial Year Setting for MUI X datepicker

For a project I am working on with my client, they have requested that the datepicker in MUI X default to the year 2023. They would like the datepicker to automatically display the year 2023 with the option for them to change it if needed, as most of the d ...

javascriptreactjsmaterial-uimui-xmui-x-date-picker

The state returned by React Redux does not meet the expected results

I recently implemented a like function on the backend using Node and MongoDB. This function successfully returns the post with an updated likes counter, which I tested using Postman. The post object contains properties such as likes, _id, by, createdAt, an ...

javascriptnode.jsreactjsmongooseredux

Tips for transferring a variable from a hyperlink to a Flask application

Here is a snippet of my Python Flask code: @app.route('/ques/<string:idd>',methods=['GET', 'POST']) def ques(idd): print(id) And here is the accompanying Javascript code: var counts = {{ test|tojson }}; var text = ...

javascriptpythonhtmlflask

Enhancing TypeScript with Generic Proxyify Functionality

I'm attempting to enclose a basic interface provided through a type generic in order to alter the return value of each function within the interface. For instance: interface IBaseInterface { test(a?: boolean, b?: number): Promise<boolean>; ...

javascripttypescripttypescript-typings

Autofill functions may not be compatible with input fields generated using JavaScript

Having trouble with browsers not using autocomplete in login overlays generated with JavaScript? It can be really annoying. Any suggestions on how to fix this issue? Should I create a hidden form within the original HTML and then move it into the overlay? ...

javascripthtmlcss

What is the best way to bring an image into your nextjs project?

I have a question about importing images into my Next.js project. I created an array of objects and want to import an image stored in a folder on my laptop, specifically in the src folder rather than the public folder. How can I properly achieve this in ...

javascriptreactjsjsonimagenext.js

Generating an order prior to payment being made by the customer

When a user selects a product and clicks the pay button, they are redirected to Stripe where a new order is created. However, if the user changes their mind and cancels the payment during the Stripe checkout process, the order has already been created. How ...

javascriptreactjsnext.jsstripe-payments

Error encounter when loading the chunk for FusionCharts's overlappedbar2d.js in React.js: fusioncharts.overlapped

Currently, I am working on a web application that utilizes next.js and FusionCharts. Within the app, various FusionChart types have already been set up. My task now is to integrate the Overlapping Bars chart as outlined in the following documentation: How ...

javascriptreactjsnext.jsfusioncharts

Advantages and Disadvantages of Implementing Ajax for Form Validation

Exploring the benefits of validating forms with Ajax, I find it to be a valuable tool in preventing code redundancy. However, before making the switch, I am curious about any potential drawbacks compared to traditional JavaScript validation. While I have c ...

javascripthtmlajaxvalidationforms

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

javascripthtmlangular

Merging HTML Array with jQuery

I am working with input fields of type text in the following code snippet: <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > ...

javascriptjqueryhtml

Achieving the retrieval of all data can be done simply by utilizing the `echo json_encode($data);

I am trying to automatically update the user wall with new data from the database using a script that checks for updates every 15 seconds. Everything works fine when I only use one piece of data like $data = $row['description']; in the server.ph ...

javascriptphpjqueryajaxjson

WebAPI is unable to process post requests containing multipart/form-data

Struggling to accept a post from an iOS app client, my code keeps failing to read the stream with an error message claiming the message is incomplete. I've been troubleshooting for hours and it seems like there's a problem with my message format. ...

c#asp.netiosjsonasp.net-web-api

"Having trouble with my Ajax Post - seeking an easy solution

I am having trouble with a simple Ajax post request. Here is my code snippet: <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> var deviceDetails = []; ...

javascriptajaxjquery

Express & React: Be cautious of client checksum and style while server-side rendering

Recently delving into the world of React server side rendering, I'm currently working on a small demo utilizing technologies such as React, Redux, React Router, and Material UI. The main issue I'm encountering is the following warning. I am uncer ...

javascriptreactjswebpackmaterial-ui

Is there a way to export the HTML table content to an Excel sheet that is compatible with browsers such as Internet Explorer, Mozilla Firefox, and others?

Welcome to my HTML Page! <html> <head> <title>Table </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> </script> </head> <body> <table ...

javajavascriptjqueryhtmlexcel

How can I run a TypeScript function within a JavaScript file?

I am working with a typescript file named file1.ts export function Hello(str: string) { console.log(str); } In addition, I have another file called index.js { require('./some.js'); } Furthermore, there is a script defined in the pack ...

javascripttypescriptecmascript-6

iOS Safari: Full-width header with fixed position exceeding viewport width

Encountered an issue specific to Safari on iOS. Creating a page with a fixed position header that spans the width of the viewport. The content consists of multiple images that should scroll horizontally while the header remains in place during scrolling. ...

htmlioscsssafari

Adjust the appearance of an element in a different parent when hovering over a specific element with a matching index

I have implemented a menu on my site in two different ways - one using text and the other using pictures. Users can click on both types of menus. Now, I am looking to create an interactive feature where hovering over a specific item in the text menu (such ...

javascripthtmljquerycsswordpress