What is causing the lag when using 3D on an iPad3 with Cocoon JS?

When testing the Gangnam Style Doom demo through CocoonJS on a Nexus 7, it runs smoothly at a steady 35 FPS. However, when running the same demo on an iPad 3, the frame rate drops significantly to just 5 FPS!

My own project built with ThreeJS performs exceptionally well on the Nexus 7, reaching speeds of 50-60 FPS, and even on a budget Android handset like the Cubot P9, it runs at a respectable 30FPS. Surprisingly, on an iPad 3, the performance dips down to around 15 FPS.

This discrepancy in performance on the iPad is puzzling, especially since most 3D games run smoothly on the device.

Based on my tests, it seems that the issue might be linked to the number of 3D objects rather than the total number of polygons. For example, rendering 100 low-poly cubes (1200 polys) results in slower performance compared to rendering one object with 6000 polygons.

It's worth noting that I don't believe this is a ThreeJS-specific problem, as the Gangnam Doom demo utilizes PlayCanvas.

I find it surprising that no one else has reported similar issues. Has anyone tried running the Gangnam demo on an iPad 4 or Air?

Any insights or thoughts on this matter are greatly appreciated.

Answer №1

From my understanding, the iPhone/iPad currently lacks 3D acceleration capabilities, which is why you may experience low FPS. In the case of three.js, you have the option to select between using the WebGLRenderer (for devices with acceleration) or the CanvasRenderer (for those without acceleration). On the contrary, Android does support 3D acceleration, so the speed performance you observe is solely dependent on the device's processing power.

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

Highcharts JavaScript - Sankey Graph Axis Orientation

As I work on developing a Sankey Diagram using the Highcharts JS library, I have encountered an issue with setting the axis. Can anyone advise whether it is feasible to utilize xAxis and yAxis in a Sankey diagram? I attempted to define the axis as shown b ...

Promise of a repeating sequence of serial calls

I am looking to create a recursive serial call to the promise method times, which will return the result of calling the fn function N times and storing the results in an array. To achieve this, I have added a new attribute called results to the times func ...

Surprisingly stumbled into the 'restricted' directory while switching the current directory to a temporary folder

I've encountered a strange issue while attempting to create and switch the working directory to a temporary folder using Node.js. Check out the code snippet below: var path = require('path') var fse = require('fs-extra') var TEST ...

Preventing loss of context in jQuery ajax when mixing HTML/JS and opening a <script> tag

I've encountered a situation where I'm using ajax to communicate with the backend, which is responding with a mix of HTML and JavaScript code. To load this content into a div, I'm using the html() function like so: $("#mydiv").html(ajaxRespo ...

Discover the process of navigating a component without revealing the root component

https://i.sstatic.net/V6NT1.png App-routing.module.ts const routes: Routes = [ {path:'candidate', component: SearchbyNameComponent}]; CandidateList.component.html <div class="Candidates"> <table class="list" c ...

Error: The property 'initializeApp' cannot be read because it is undefined

Recently, I decided to integrate Firebase libraries into my Vue project by installing them using npm install firebase. I then proceeded to add these Firebase libraries in my main.js file: import { Firebase } from 'firebase/app' import 'fir ...

Unable to conceal iFrame ribbon in Sharepoint Online

Attempting to conceal an Office 365 ribbon in SharePoint, but encountering an issue... TypeError: document.getElementById(...) is null This is the snippet I'm experimenting with; I plan to implement display:none later... document.getElementById(&ap ...

Effective approach for managing a series of lengthy API requests

I am developing a user interface for uploading a list of users including their email and name into my database. After the upload process is complete, each user will also receive an email notification. The backend API responsible for this task is created u ...

The execution of 'observe' on 'MutationObserver' failed because parameter 1 is not the correct type of 'Node'. Ensure to use select2() instead

Attempting to implement select2 for dynamically loaded data via ajax, I am encountering the error mentioned above. What could be the issue? Below is the code snippet in question: $(document).on('change', '[name="country"]', fu ...

Remove the class attribute from the ancestor element using jQuery

Hey everyone, I'm facing an issue trying to remove the class attribute from the parent element of an input field. Here is the HTML snippet: <div class="settings"> <div class="settings-content"> <ul class="general-settin ...

extract the data stored in the Firebase database

I followed this tutorial to create a basic function: https://medium.com/@jamesmarino/getting-started-with-react-native-and-firebase-ab1f396db549 export function getUserToEliminate(userID, gameID, callback) { let path = '/games/' + gameID + &ap ...

Basic jQuery Element Selection

1) Is there a way to trigger an alert only when images like 1_1.jpg, 1_2.jpg, 1_3.jpg or 2_1.jpg, 2_2.jpg, 2_3.jpg are selected and none of the others? (similar to *_1.jpg, *_2.jpg, *_3.jpg) 2) How can I shuffle the order of the image positions randomly ( ...

merging 4 arrays in a specified order, organized by ID

i have below 4 array objects var dataArray1 = [ {'ProjectID': '001', 'Project': 'Main Project 1', 'StartYear': '2023', 'EndYear': '2023', 'StartMonth': 'Sep&apo ...

The jQuery equalTo function is throwing an error because it doesn't recognize that the two emails are identical

Why is it that even though both email addresses are exactly the same, I still get an error message saying they don't match? The error seems to be with email2 specifically. * Email: <input type='text' name='email' /> <br/ ...

Using JavaScript to dynamically invoke a function and pass parameters dynamically

Exploring a dynamic method call with parameters in JavaScript. let obj = { method: 'foo1', params: ['one', 'two'] } foo1(p1, p2) { // do something } To execute it => [obj.method](obj.params) Is there a way to dyn ...

A Step-by-Step Guide to Retrieving the Route of a Controller Function in Express

When working with Express.js, it is possible to retrieve the names of all controllers from an app. However, these names are usually in an unfamiliar format (such as handle: [AsyncFunction: login]). I have been unable to figure out how to destructure this i ...

Similar to session_start() and $_SESSION in Node.js/Express

I'm on a quest to discover the equivalent of session_start() and $_SESSION in Node.js/Express so I can store the current user's id in the session. Most tutorials and videos recommend using express-session, but I've come across a warning: ...

How to Retrieve Values from HTML Using the onkeyup Function in jQuery with Element ID?

Having trouble retrieving values from HTML to jQuery using the onkeyup function to capture key pressed data by ID. I've attempted it, but I can't seem to get the value to display in an alert. Unsure what's going wrong with my code. Can someo ...

Sending property value to computed properties within a component

Is it considered a best practice to utilize a prop value within a computed property function of a component? If so, how can I construct the return statement using this prop? Carousel.vue props: [ 'source', ], computed: { items () { re ...

The import 'react-router' does not include an export called 'browserHistory'. This issue is coming from the /src/App.js file

I've recently started diving into the routing section of learning react, but I'm a bit puzzled by the error message I encountered. Error: Failed to compile ./src/App.js 31:19-33 'react-router' does not contain an export named 'bro ...