After following a tutorial on ThreeJS from , I decided to test my creation on my Nexus 5 Android phone. Unfortunately, the performance was extremely slow and I can't figure out why.
I noticed that other ThreeJS games on the website run smoothly on mobile devices, such as the "Hello Run" example.
Why is my Pong game running so slowly on mobile? And what steps can I take to improve its performance?
It's not just Android that's slow, my iPhone 6+ also experiences performance issues.
Based on my own experiences, here are a few tips to improve performance with three.js:
Large files like vertices, triangles, and textures can slow down loading times due to network resource consumption.
Using BufferGeometry instead of Geometry can significantly boost performance.
Utilize the Geometry.merge method whenever possible.
Avoid using geometry utilities like ExtrudedGeometry as they consume CPU and memory resources. Buffered geometry instances are recommended.
Tools like mesh lab can help simplify mesh vertices without altering the appearance much.
Invest time in optimizing shading program coding to maximize GPU usage.
Are you experiencing poor performance on your device due to lack of WebGL support? Don't worry, I have a solution that will allow you to run ThreeJs and access the GPU with ease.
Unfortunately, this can't be achieved using the native browser of the device.
If you're interested in packaging everything into a mobile app, my recommended setup includes Cordova, Crosswalk, and ThreeJs.
It's worth mentioning that Crosswalk is an innovative technology supported by Google and Intel, similar to what they do for Cordova. Cordova provides native device interaction while Crosswalk unleashes the power of WebGL.
You can check out a demo of an HTML5 application running with Threejs on the Google Play Store (Note: The demo is from Ludei, but I prefer Crosswalk since it's open source).
Demo Three JS
Setting up a project is straightforward - just create a Cordova project, add the platforms you need, integrate the Crosswalk Cordova plugin, and you're all set!
I am in the process of developing a single-page web application that must be completely restful, which is new territory for me. One challenge I'm facing is determining how to efficiently render the user interface for different roles using React. With ...
For my Vue front-end app, I'm attempting to integrate wavesurfer.js. However, upon receiving the audio file link from the backend, I encounter the following error: wavesurfer.js?8896:5179 Uncaught (in promise) TypeError: Cannot read property 'isP ...
Here's what I'm trying to achieve in the code below: Set up Google Analytics on the page Add a jQuery click event based on specific query strings and domain characters Trigger a Google Analytics tracking event with the click event Implement cod ...
I am facing an issue where I have an id called "test" as a parameter and I pass it to the index.js store. The error I see in the console is users?id=[object%20Object]. I tried converting the id with this.id.toString(), but unfortunately, it did not resolve ...
I'm setting up multiple featherlight instances when the page loads jQuery('.feedback').featherlight(jQuery( "#feedback-box" ), { closeIcon: 'close'}); jQuery('#imprint').featherlight(jQuery( "#imprint-box" ), { closeIcon ...
Here is my HTML code. I have just created a unique controller for a specific part of the code. <div class="mdl-grid" ng-controller="ValueController"> <div class="mdl-card mdl-shadow--4dp mdl-cell--12-col"> <div class ...
Currently working on developing a straightforward video streaming application using Node.js and integrating the WebChimera plugin. The player configuration is done in QML with Chimera, and I am facing numerous errors during the compilation process in Jade. ...
I am experimenting with creating a unique effect where two rectangular shapes, each containing text and with rounded ends, move towards each other, merge to form a single rounded rectangle as the page is scrolled down, and then separate back when scrolling ...
Here's a method that I have: getFiveObjectsFromArray(array: T[]) { return array.slice(0, 5); } I've been using this method multiple times. Is there a way in TypeScript to pass a generic argument instead of using multiple types? Also, when ...
While using createGlobalStyle from styled-components for global styling, everything seems to be working fine except for applying Google fonts. I have tried multiple ways but can't seem to get it to work. Here's the code snippet: import { createG ...
Trying to utilize PHP to send variables into the onclick of an element is resulting in an "Unterminated string literal" error due to long strings. Below is a snippet of my PHP code: $query = $conn->prepare("SELECT Name, Image, Description, Link, Price, ...
While Soundmanager2 is a useful app, many find the code to be overly complex and difficult to navigate. It almost seems as if it was purposely written in a way to confuse rather than clarify. Are there any recommended alternatives to Soundmanager2 that are ...
I've been experimenting with some solutions, but I'm having trouble extracting the exact browser name and version: Here's the code I'm using: $browserAgent = $_SERVER['HTTP_USER_AGENT']; echo $browserAgent; The output of th ...
I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as w ...
Consider this example project where a timezone name needs to be converted to a more readable format. For instance: input: America/Los_Angeles output: America Los Angeles While "America/Los_Angeles" may seem human-readable, the requirement is to convert ...
I have a JSON stored on the server like this: [{"a":1}, {"a":2}] and I'm wondering if there is a way to add an object at the end without having to rewrite the entire file on the server. As a workaround, I have been omitting the brackets and adding the ...
I'm encountering a problem with my first AJAX attempt and my first time using a .php file. I'm working through an exercise in the text, but things aren't going as expected. To troubleshoot, I've been using the alert function extensively ...
<div class="A"> <svg> ... </svg> <button> <svg> ... </svg> </button> <svg> ... </svg> </div> <div class="A"> <svg> ... </svg> <button> ...
As I embark on creating my debut Discord bot to enhance my coding skills, I have encountered numerous hurdles along the way. While most of these challenges were overcome by me independently, this particular issue has left me stumped. The objective of the ...
While working on MVC4, I attempted to implement a jstree but encountered an issue where the tree view was not displayed when running my application. Upon investigating with Firebug, I came across the following error message: "TypeError: $(...).jstree is ...