After a prolonged period of running, rendering webgl in requestAnimationFrame was only achieving 1 frame per second

While trying to render a WebGL animation using requestAnimationFrame, I noticed that it runs at 60fps for a period of time before suddenly dropping down to 1 fps. After approximately 500-1000ms, it goes back up to 60 FPS again. I am utilizing three.js to handle matrix calculations and render the model, but I am quite baffled by this behavior. Any assistance on this matter would be greatly appreciated. Thank you for taking the time to help.

You can find my codepen link here:

https://codepen.io/xiaoshaung/pen/MOgXmN

https://i.sstatic.net/0vRAi.jpg

javascriptthree.jswebglrequestanimationframe

Answer №1

After some observation, I've realized a considerable decrease in performance whenever the canvas/iframe is either focused or left (clicked into the area). My theory is that this decline may be attributed to the fact that the code is being executed within an iframe with cross-origin restrictions on CodePen. Would you be willing to test this outside of the iframe on your local server and report back here with the findings?

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

How can a variable that is potentially undefined be converted to lowercase in Node.js?

My latest project involves developing a discord.js bot with commands that can take different parameters like mc!start vanilla, mc!start tekkit. However, the bot is designed to handle only singular string entries. So, when a user inputs just mc!start with ...

javascriptnode.js

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

I am completely new to the world of web development. I'm encountering an issue where my JavaScript code (specifically alerts) is loading before my HTML/CSS page has fully loaded. I've been using sample alerts to test this out, and ideally, they s ...

javascripthtmlcssfrontend

What is the total amount within a specified date range when retrieved as JSON?

Consider the following JSON structure: { "timesheets": [ { "user": { "username": "erik", "first_name": "Erik", }, &q ...

javascriptdjangovue.jsdjango-rest-framework

How can I stop jQuery mobile from updating the document title?

It appears that jQuery mobile automatically uses the text content of data-role="header" to set the document.title. For example: <div data-position="fixed" data-role="header"> <h1>This text</h1> </div> To work around this, I ha ...

javascriptjqueryhtmljquery-mobile

An error occurred while attempting to save a new entry using the New Entry Form in DataTable, stating that the variable "

I have encountered an issue with a table that includes a bootstrap modal containing a form. After filling out the form and saving the data or closing the modal, I want to refresh the table data. However, I am receiving the following error: TypeError: c i ...

javascriptjqueryajaxtwitter-bootstrapdatatables

Can next.js rewrites be configured with environment variables?

Currently, I am in the process of developing my application with a next.js frontend and express.js backend. During development, I simply run the relevant dev servers in the terminal. However, now I am looking to deploy my app using Docker for production. I ...

javascriptnext.js

Display the div only when the time variable reaches zero

I want to display a div when the difference between the time imported from the database and the current time is 0. How can I achieve this? Here is the code snippet: while ($row = mysqli_fetch_array($result)) { echo "<div class='alert' id= ...

javascriptphpjquery

Obtaining personalized error messages from the backend with express: A step-by-step guide

I'm currently developing a Login App and I'm looking to implement custom error messaging on the Front End. Specifically, I want to display custom error messages when attempting to register with an email that is already in use or when entering a p ...

javascriptnode.jspostgresqlexpress

Validation of minimum and maximum character length using jQuery

I am trying to implement a validation that requires a minimum length of 8 and a maximum length of 14 characters. Can anyone guide me on how to achieve this? Here is the code snippet in HTML: <input type="text" name="354" id="field"> And here is th ...

javascriptjqueryhtml

Using PHP to reset variables for dynamic display in JavaScript

I've been working on retrieving values from a database and storing them in JavaScript variables. While I was successful in accomplishing this task, I encountered an issue when the values in the database are updated - the values of the variables remain ...

phpjavascriptdatabasevariablesreset

Update the div on the current page using externally retrieved information

Once again, I find myself stuck on a problem. Allow me to explain. Within this div, I have retrieved data using HTML SIMPLE DOM from another site. Like so: <div id="data">.....</div> Currently, the data refreshes whenever the user reloads th ...

phpjavascripthtml

Tips for inserting line breaks within a <p> element in a contentEditable division

When I press enter or shift+enter on my contentEditable div, the new line is shown as a textNode within the div. However, I prefer the new line to be inside a p element. Seeking a straightforward solution Utilizing React Js, I store the content of the co ...

javascriptreactjsdomnext.jscontenteditable

Ways to trigger a Vue.js method after a delay of 500 milliseconds

Currently, I am developing a search system that triggers an ajax call with every key press. However, I would like to implement a delay of 500ms before the ajax call is made after typing begins. Any ideas on how this can be achieved? ...

javascriptvue.js

JavaScript - Capture the Values of Input Fields Upon Enter Key Press

Here's the input I have: <input class="form-control" id="unique-ar-array" type="text" name="unique-ar-array" value="" placeholder="Enter a keyword and press return to add items to the array"> And this is my JavaScript code: var uniqueRowsArr ...

javascriptphpjqueryarrays

Tips for loading a webpage directly to the center instead of the top position

Is there a way to make the page open at a specific div halfway down the page instead of starting from the top? Here is an example: <div id="d1"> <div id="d2"> <div id="d3"> <div id="d4"> <div id="d5"> <div id="d6"> Do ...

javascripthtmlcss

Using the MongoDB aggregate framework to determine the total employee count per unique state

I'm currently working on displaying the total number of employees for each state within companies located in the USA. I aim to showcase this information for all states included in the dataset using sample numbers as a reference: AZ : 1234 CA : 30000 ...

javascriptmongodbaggregation-framework

The MaterialUI table pagination feature is experiencing an issue where the "Next" button is

Every time I attempt to search for a record with a lower value, such as 6, 14, 19, or 20, the Next button does not become active. However, when dealing with larger records, it functions perfectly fine. I am uncertain about what mistake I might be making. ...

javascriptreactjsmaterial-uipagination

Leverage the power of Angular and Node.js to dynamically generate and configure a new subdomain on an

Currently, I am tackling a project that involves generating sub domains dynamically based on the prefixes entered by users on my website. While everything is functioning properly on my localhost using diet.js and express-subdomain, errors are being encount ...

javascriptangularjsnode.jsamazon-web-servicessubdomain

How can PHP effectively interpret JSON strings when sent to it?

When working with JavaScript, I am using JSON.stringify which generates the following string: {"grid":[{"section":[{"id":"wid-id-1-1"},{"id":"wid-id-1-4"}]},{"section":[{"id":"wid-id-1-5"}]},{"section":[{"id":"wid-id-1-2"},{"id":"wid-id-1-3"}]}]} I am ma ...

javascriptphpajaxjson

My website keeps crashing because the "wheel" event is being constantly triggered

import React, { useEffect, useState } from "react"; import "./Skill.css"; import { Fade } from "react-reveal"; function Skill({ name, color }) { const [style, setStyle] = useState({ borderBottom: `4px solid ${color}` }); ...

javascripthtmlcssreactjs