Custom VR/Cardboard effect using THREE.js

I am currently working on developing a custom VR panorama viewer using THREE.js. So far, I have successfully created:

  • 2 scenes,
  • 2 materials and meshes (with different images loaded for the left and right eyes),
  • a renderer with scissors (using 2 perspective cameras).

The current result of my work can be seen here: https://i.sstatic.net/kNf0c.jpg

While everything seems to be working well, I would like to enhance the experience by adding a "black VR cardboard frame" to both cameras. Although I'm not exactly sure what this effect is called, here is an example of what I aim to achieve:

https://i.sstatic.net/sDb4I.jpg

If anyone could provide me with some tips or guidance on how to implement this effect, it would be greatly appreciated.

javascriptthree.jsgoogle-vrperspectivecamera

Answer №1

Could the term you are seeking be "barrel distortion"? You can observe a practical application of this concept in the WebVR-polyfill here. It might appear complex if you aren't fully versed in raw webgl.

Here is a flexible method involving two render-passes:

  • The split-image you possess is rendered into a framebuffer (example here) rather than directly to the screen. This framebuffer will serve as a texture in the subsequent render pass.
  • Create another scene and camera for the second pass. The camera should be an orthographic one spanning from -1 to 1 on the x-axis (similar to this).
  • Set up two meshes (using a PlaneBufferGeometry) for the dual viewports, with UV-coordinates configured such that the left mesh utilizes the left side of the framebuffer as its texture, while the right mesh uses the opposite half.
  • Add these meshes to the second scene-instance and position them alongside each other.
  • Apply barrel distortion to the vertices of the meshes, similar to what's demonstrated in the WebVRPolyfill code.
  • Render the second Scene to the screen.

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

Executing Python script in a web browser

I have a Python script that reads biometric information from identity cards using a card reader. This script uses the library available at https://github.com/roeften/pypassport. I am interested in creating a web application with Django that can run this ...

javascriptpythondjangoreadercard

Best practices for implementing the map function with TypeScript

I'm currently working on mapping types in a DB using the Map function in JavaScript. This is my first time trying to do this, and I'm eager to learn but I've hit a roadblock. Here is the structure of the DB: const db = { data: [ { ...

javascriptreactjstypescripttypes

After setting up Tailwind, the previously deleted styles from both Vite and the CSS file continue to be applied

After following the instructions in the Tailwind documentation, I successfully installed tailwind and other necessary tools using npm install -D tailwindcss postcss autoprefixer vite. I then proceeded to configure my tailwind.config.js file as shown below ...

javascriptcssreactjstailwind-cssvite

Steps for pinning a note and organizing it within an array

I'm working on a notes app in React that includes a pin functionality. When I click on the pin icon of a note, that note is displayed first. Users are limited to pinning only 2 notes, and I've implemented this restriction successfully. However, I ...

javascriptreactjsarrayssorting

Unique Google Maps API V3 PEGMAN Customization

Can custom zoom controls and Pegman controls be styled with the same design? To add custom zoom controls, follow the instructions provided in this question's answer: <!DOCTYPE html> <html> <head> <meta name="viewport" cont ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Click on the child element while it is already being clicked by manually implementing the 'declick' function in Javascript

Hey there, I'm looking for suggestions on a better title for this issue. I couldn't come up with the right wording myself. Problem I currently have a Google Maps element with pointer events set to none, preventing it from being scrolled when ho ...

javascriptjqueryhtmlgoogle-mapsclick

Switch the background image with a single click

How can I change the background image of my horizontal menu when a user clicks on a link? Here is the code I have been working with: <div class="grid_16" id="menu"> <ul id='menuTab' class='sqglDropMenu'> <li>& ...

javascripthtmlcssbackground-image

Exploring the world of React-Bootstrap elements and properties

I'm currently diving into a Bootstrap home project and it's my first time working with Bootstrap. I came across a tag that has an 'inverse' attribute among others like 'fixedTop', 'fluid', and 'collapseOnSelect& ...

javascriptreactjs

Securing data in the browser using JavaScript encryption and decrypting on the server side using Node.js

After hours of trying to encrypt a message using AES256 in the browser, send it to the server, and then decrypt it, I keep encountering this server-side error: error:06065064:digital envelope routines:EVP_DecryptFinal_ex:bad decrypt Despite using crypto- ...

javascriptnode.jsencryption

What could be the reason for my https source being restricted from accessing the navigator Geolocation service?

While trying to retrieve a user's location using the code below: var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(BingMap.map); geoLocationProvider.getCurrentPosition( { showAccuracyCircle: false, timeout: 6000, successCa ...

javascriptioshtmlsafarigeolocation

Issue with Next JS router.push not functioning unless the page is refreshed

I'm currently running Next.js 14.2 in my project with the page directory structure. After building and starting the application using npm start, a landing page is displayed with a login button that utilizes the <Link> component. I have also disa ...

javascriptnext.js

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

javascriptjqueryhtmlcss

If variable is greater than, hide the division element

I have a variable called lineNum that increases each time I click on an h1 element I'm attempting to use an 'if' statement to hide a div by setting its display to none, but for some reason, I can't seem to get the 'if' code r ...

javascriptjqueryif-statementvar

Issue with Google map displaying incorrectly when attempting to print

I am experiencing an issue with printing a Google Map using the JavaScript API V3. The problem I am facing is that the map is split into two parts, with the top and bottom sections overlapping each other. Here is the code snippet: var geocoder; var ...

javascriptgoogle-maps

What could be the reason for data.map not being recognized as a function?

I developed the following React component: import React, { useState } from 'react'; export default function Example(){ var friend = function (id, firstName, lastName){ this.id = id; this.firstName = firstName; this.lastName = lastN ...

javascriptreactjs

Sending files correctly using Node.js

Here is a simple middleware to consider: (req, res, next) => { const stream = fs.createReadStream(req.filePath) await new Promise((resolve, reject) => stream .on('error', reject) .on('end', resolve) .pipe(res ...

javascriptnode.jsexpressnode-streams

Updating a list of books from a form in another component: Step-by-step guide

Hello everyone, I am fairly new to using React and am currently following a tutorial on creating a book library. In this project, I have an AddNewBook Component which is essentially a form structured as follows: function AddNewBook(){ const [name, setNam ...

javascriptreactjsreact-hooks

Managing checkbox behavior using ajax

Currently, I am utilizing a CSS toggle button to display either active or inactive status. This toggle button is achieved by using an HTML checkbox and styling it with CSS to resemble a slide bar toggle. The assigned functionality involves binding the onCl ...

javascriptphpjqueryajaxcheckbox

How come this React DatePicker component is not appearing on the screen?

Check out this awesome component: import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; class CustomDatePicker extends Component { constructor(props){ super(props); } render() { ...

javascriptreactjsdatepickerreact-datepicker

Leveraging Window Object in Custom Hooks with NextJS

ReferenceError: window is not defined This issue arises on the server side when NextJS attempts to render the page. However, it is possible to utilize window within the useEffect hook by following the guidance provided here. I am seeking advice on creati ...

javascriptreactjstypescriptreact-hooksnext.js