Boosting Performance in Three.js - Achieving a Faster Frame Rate

Utilizing Three.js alongside Nvidia's 3D Vision shutter technology has been an interesting experience for me. In my rendering process, I have implemented the following steps:

// Setting up the 3D Vision Camera (Shutter Glasses)
var eye_separation = 0.03; // adjusting based on individual eye distance
var cam_toggle = true;

function animate() {

    // Activating 3D Vision
    if (cam_toggle) {
        camera.position.x += eye_separation;
        cam_toggle ^= 1;
    } else {
        camera.position.x -= eye_separation;
        cam_toggle ^= 1;
    }

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

My observations have led me to realize that the GPU's frame refresh rate syncs perfectly with the shutter glasses. By toggling the camera between specific views along the x-axis, I am able to achieve a convincing stereoscopic effect. Although Nvidia recommends using a frame buffer to switch between views, I have chosen not to do so. However, I am encountering an issue where I am only achieving a maximum of 60 fps while working with a 120 Hz projector. How can I optimize the rendering process to reach 60 fps for each view, thus achieving a combined rate of 120 fps?

Answer №1

As per the information provided here and from this source, it is recommended to run the animation-loop at 120Hz when the monitor's refresh rate is set to 120Hz.

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

"Utilizing Node.js to slice and manipulate bits in a

I have a chip transmitting data via Bluetooth LE to a node.js server. Here's the firmware code snippet: uint16_t txBuf[5] top &= 0x3FF; bottom &= 0x3FF; txBuf[0] = top + (bottom << 10); txBuf[1] = bottom >> 2; The first 10 bits ...

What sets apart the method of assigning event handlers using bind() versus each() in jQuery?

Could someone explain the difference between using bind() to assign event handlers and using each() for the same task? $(function () { $('someElement') .bind('mouseover', function (e) { $(this).css({ ...

Having trouble bypassing the alert in Google Chrome after automatically logging into Facebook using selenium-webdriver. I am using Javascript / JS language

const {Builder, By, Key} = require('selenium-webdriver'); const {Options} = require('selenium-webdriver/chrome'); const options = new Options().setAlertBehavior('dismiss'); let driver = new Builder().forBrowser('chrome&a ...

MongoDB has incorrect date and time records

I've been working on a blog site where entries are logged with the time and date they were posted and stored in MongoDB. Everything was working fine on my local machine, but when I deployed the site to Heroku, I noticed that the date displayed is 8 ho ...

What strategies can be implemented to maximize the effectiveness of Office ribbon commands within an AngularJS application?

Currently, I have developed an Office add-in using AngularJS (version 1.4) and ASP.NET MVC 4.5. The Angular controller and service JS files contain a significant amount of functionality that has already been implemented. Lately, I have been exploring the ...

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized. var docHeight = $(document).height(); var winHeight; var zoomRatio; function z(number) { ...

Obtain JSON information using an underscore template

As someone fairly new to using Backbone and Underscore, and web development in general, I am seeking guidance on how to retrieve individual model data on-click from a template format in order to populate a pop-up modal. Any advice or direction would be gre ...

MongoDB does not always insert the complete array

For inserting 499 entries into a subdocument from an array, I have the following code snippet: var bodyParser = require('body-parser'); var express = require("express"); var path = require("path"); var session = require('express-session&apo ...

Tips for detecting parallel processes using Node/JS programming language

Many software packages claim to execute their methods in parallel, such as the async npm package. They assert that even for functions like concat, they are processed concurrently. How can we verify if their assertion holds true? I have written code to te ...

What are the steps to customize the Aframe Gizmo for translating styles?

I am looking to customize the aframe Gizmo to match the translate and rotation styles shown in the images linked below. view images here Can anyone provide guidance on how to modify TransformControls.js for https://github.com/aframevr/aframe-inspector/tr ...

A guide on invoking a servlet using a jQuery $.ajax() call

I am having trouble calling a servlet using jQuery's .ajax() function. It seems like the servlet is not being called or parameters are not being passed to it. Despite searching extensively online, I have not been able to find a solution. Any suggesti ...

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

Issue with PrimeNG Carousel width on mobile devices

Currently, I am in the process of developing a system interface with Angular and PrimeNG specifically for mobile devices. The main requirement is to have a carousel to display a set of cards. After evaluating different options, I decided to utilize the ngP ...

Combine the values of a second array in Javascript when the corresponding values in the first array are equal

Apologies if the title is a bit unclear. Explaining the concept of multiple arrays is a challenge for me. Consider the following array: [ [21, 1000], [21, 500], [18, 100], [18, 200] ] My goal is to obtain the resulting array: [ [21, 1500], [18, 300] ] H ...

Utilizing React to retrieve API data and implement search input filtering with autocomplete functionality

Hey there, I have a query regarding a React filter search input component. Currently, I am working with two components: FirstPageComponent.js import React from "react" import AutoComplete from "./AutoComplete" export class FirstPageComponent extends Re ...

In THREE.js, creating a line between two specific mouse click points on a canvas

In this scenario, I aim to showcase the distance between two mouse click locations on the canvas. While I have achieved this functionality, my struggle lies in creating a line connecting these points. I kindly request suggestions on what steps I should ta ...

Problem with Bootstrap multiselect: it only opens the first time, and stops working after an ajax call

I am having trouble using Bootstrap multiselect with jQuery ajax. When I run the ajax code, the multiselect button stops working properly. To see the issue in action, click here: and look at the last multiselect dropdown. Here is the ajax code snippet: ...

transforming blog into a data URL

I've been struggling to convert an image blob into a data URL using Vue.js, but I keep encountering this error: 'Error in v-on handler: "TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provide ...

I am having trouble retrieving the properties of "2d" objects using tiles[i-1], unlike standard objects in JavaScript

I've been working on constructing a random map generator by utilizing a grid composed of tiles within a canvas. In my process, I'm investigating the properties of each tile tiles[i] before handling tiles[i-1]. While this procedure seems to functi ...

Replacing text with new content when text is stored in a separate file

After organizing all the strings from my code, I compiled them into a file named constants.ts. export class Constants { public static API_URL = '/api/'; public static CREATE_CHILD_API_URL = Constants.API_URL + '%s' + '/create- ...