Measure the exact moment when the objects in Three.js come into view on the screen

Is there a way to accurately measure the moment when my objects are displayed on the screen?

Similar to an onLoad event for the graphics processing unit (GPU).

I am looking to evaluate the performance differences between various implementations in order to make an informed decision on how to handle my geometries.

This is mainly to compare the effectiveness of differently constructed buffer geometries (indexed, non-indexed, native buffer geometries, or converted buffer geometries).

UPDATE:

I attempted to use console.time('loading') and console.timeEnd('loading'), but I have struggled with placing them at the correct moment. It seems that timeEnd fires once parsing is complete, which occurs before the objects actually appear on the screen. I just need guidance on where to position these methods.

javascriptperformancethree.jsgpuonload-event

Answer №1

Prior to adding the specific object to the scene, measure the time it takes to render an empty scene by timing the call to 

renderer.render( scene, camera );
Next, include the object in question using scene.add();, and record the new duration of 
renderer.render( scene, camera );
. Calculate the difference between the two times.

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

Disabling collapse in Bootstrap 5 is impossible using stopPropagation() when clicking on a particular element

I'm attempting to prevent an element from collapsing/expanding when clicking a checkbox inside it. In my example on codepen, my code worked fine with Bootstrap v4, but after switching to v5, the stopPropagation function doesn't seem to work. Yo ...

javascripthtmlbootstrap-5

Strange problem in older versions of Internet Explorer (IE9 and below) when using JavaScript (specifically jQuery)

Encountering an unusual issue in IE (versions 9 and below). A form on my website contains a select and radio button. When a user makes changes to either the select or radio button, it calculates the total price. Here is the code snippet for reference: ht ...

javascriptjquery

Using linear-gradient() in the border-image property does not actually generate a border

I am attempting to add a linear gradient border around a dynamically created div using JavaScript. However, I am not seeing the border show up as expected and it is not displaying in black. Check out my code snippet below: const devlogList = document.cre ...

javascripthtmlcssborder

Issue with Angular2's Two-Way-Binding functionality has suddenly ceased to work

I'm struggling with updating my view. During ngOnInit, I am resolving a promise. If the HTTP request fails (e.g., due to no internet connection), the catch block should look into local storage to retrieve the user information and display it in the vie ...

javascriptangular

Obtain the incremented input's value

Seeking advice: I have a dilemma with two buttons that increase or decrease an input value. How can I retrieve the value upon submission of the result? Previous attempts have yielded 'undefined' or '0' values. Your insights and guidanc ...

javascriptjqueryhtmlbuttoninput

A more efficient method for communicating with the database using an array

I have posted my current code below, but I suspect that it may not be the best approach. While it gets the job done, I am concerned about potential SQL injection vulnerabilities with this setup. Being a newcomer to Javascript and SQL, I apologize for any n ...

javascriptsqlnode.jspostgresqlexpress

Mongoose Express: Limiting increments to a maximum of 5

Currently, the essential functionality implemented is 1 click = 1 vote. The system successfully updates a vote parameter in MongoDB and increments it as expected. However, after approximately 5 votes, the incrementing process halts. Upon refreshing the bro ...

javascriptnode.jsmongodbexpress

Tips for preserving @typedef during the TypeScript to JavaScript transpilation process

I have a block of TypeScript code as shown below: /** * @typedef Foo * @type {Object} * @property {string} id */ type Foo = { id: string } /** * bar * @returns {Foo} */ function bar(): Foo { const foo:Foo = {id: 'foo'} return f ...

javascripttypescript

The mongoose static function yields a Bluebird promise

Creating a mongoose static method 'load' to be used by the main controller function for chaining and error handling. UserSchema.load('54ae92dd8b8eef540eb3a66d') .then(....) .catch(....); Encountered an issue with the ID being incorrec ...

javascriptmongodbmongoosepromisebluebird

Combining data from an object within an array in JavaScript

I am looking for a way to incorporate values from an Object (weekdayMap) into an existing array (vehicleAvailabilities) that contains objects. I require the value Montag on day one and Dienstag on day two. This pattern continues for each day of the week. ...

javascriptarraysjsonobject

What is the best way to showcase the array data of two description values in a Vue v-for loop?

An array called ledgerDetails contains 32 data elements. These details are displayed in a vue v-for loop. However, within the loop, I need to show specific details from invoiceDescriptions (23 data elements) and paymentDescriptions (1 ...

javascriptvue.jsvuejs2

Endless spinning using snap.svg

How do I make an SVG element rotate endlessly? Is there a way to make it rotate continuously without stopping? While Snap provides a way to rotate an SVG element by a specific amount, I want to know how to create an infinite rotation effect. Is there a so ...

javascriptjquerycsssvgsnap.svg

What is preventing me from posting data using Express with Node.js?

Here is the code I have written: var express = require("express"); var app = express(); var session = require('express-session'); var login = express.Router(); var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: f ...

javascriptnode.jsexpress

The element type is not valid: it should be a string for built-in components or a class/function for composite components, but it is currently an object in a React project

In the process of developing a React app to explore MUI capabilities, I encountered an error in my browser: The issue reported is: Element type is invalid - expected a string (for built-in components) or a class/function (for composite components), but rec ...

javascriptreactjsreact-router-dom

Merge topics together in RxJS like zip

Is it possible to create an observable that combines two subjects in a unique way, different from the zip function? The goal is to combine two subjects so that when both have emitted values, the latest of their values is emitted. Then, after both emit at ...

javascriptangulartypescriptrxjs

Creating interactive button groups with responsive design in a Material UI and ReactJS web application

Is it possible to make ButtonGroup Buttons responsive? I heard about an attribute called "Orientation" in material-ui's ButtonGroup, but I'm not sure how to use it with media queries for changing orientation based on the device width. I'm st ...

javascriptreactjsmaterial-ui

Node: Exploring folders through recursive traversal

Node.js is a new world to me, and I'm determined to grasp its async behavior and callback structure. Here's where I'm currently struggling: // IMPORT ------------------------------------------------------------------------ fs = r ...

javascriptnode.jsrecursioncallbacktraversal

Adding up the elements of an array that match with elements in another array

In my JavaScript code, I am facing a challenge that I have been struggling to solve. I have attempted various methods, but none have proven successful for me so far. The situation is as follows: I have two arrays of equal length. For example: var years = ...

javascriptarrays

The utilization of several skeletal animations in Three.js

Currently, I am dealing with two skeletal animations: one based on the entire body (such as walking) and the other focused only on the arms. I am trying to figure out how to integrate keyframes from the arm animation into the full body animation while it ...

animationthree.js

Is there an issue with the JSON string? I'm trying to decode it with Rails and ActiveSupport

We're currently on Rails 3.0.6. An error is being triggered for the following JSON string when we try to decode it in a controller using ActiveSupport::JSON. It seems that something related to the 'draw_data_url' key is causing this error, ...

javascriptruby-on-railsrubyjson