The combination of Threejs blending techniques with perspective and orthogonal matrices creates a

I am trying to align a perspective camera and an orthogonal camera in the same position and orientation, with the zfar plane set to the same value. However, despite having the same near and far values, I am encountering discrepancies in the z values and incorrect occlusions. What could I be missing?

const perspective_camera = new PerspectiveCamera(55, canvas.width / canvas.height, near, far);
const half_width = perspective_camera.far * Math.tan(perspective_camera.fov * 0.5 * (Math.PI / 180));
const half_height = half_width / perspective_camera.aspect;
const ortho_camera = new OrthographicCamera(-half_width, half_width, half_height, -half_height, near, far);
// Here is an example of the issue in the Z axis
const aux1 = new Vector3(0, 0, 1);
const aux2 = new Vector3(0, 0, 1);
console.log(aux1.project(ortho_camera), aux2.project(half_height));
// Object { x: -0.00003130777409465268, y: -0.000001186705638256526, z: -0.999202652754963 }
// Object { x: -0.07660902355148393, y: -0.0029038270148180447, z: 0.9510807024824749 }

Answer №1

The Z-coordinate of a perspective projection behaves non-linearly. Check out the following resources for more information: How to render depth linearly in modern OpenGL with gl_FragCoord.z in fragment shader? and Transpose z-position from perspective to orthographic camera in three.js. To address this issue, you will need to calculate a new coordinate that ensures the z-component remains consistent whether transformed with a perspective or orthographic projection. Since these projection matrices handle scene projection differently, there is no straightforward solution. One approach could involve implementing special transformations in the vertex shader and using a custom material to render the scene accordingly.

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

Writing a CSV file to AWS S3 proves to be unsuccessful

I have been working with TypeScript code that successfully writes a CSV file to AWS S3 when running locally. However, I have recently encountered an error message: s3 upload error unsupported body payload object NOTES: The code is not passing creden ...

Passing a map from the SpringBoot backend to the Angular view and storing it in LocalStorage

I'm facing a challenge with this task. I am trying to transfer a Map from my Spring Boot backend to an Angular application. Controller @GetMapping("/dict") public Map<String, String> getAll(){ return dictionaryService.getAll(); } @ ...

JavaScript - Output an undefined value of a property within a function

While the question of checking for null or undefined values has been raised before, I am encountering a unique issue. I have created a function to split a string, which works perfectly. However, when I pass a null or undefined value, the program stops. Ins ...

Issue: Nest is unable to export a component/module that is not included in the DatabaseModule module that is currently being processed

I am currently working on a simple app that involves implementing CRUD functionality on a PostgreSQL database using express. However, when I try to run my program, I encounter the following error message: Error: Nest cannot export component/module that is ...

What is the best way to tile textures in Three.js without causing distortion?

Despite trying various solutions, I am still facing an issue where my textures appear to be stretched or scaled based on the mesh size. In a bid to seek a resolution, here are some key points to note: All textures have dimensions of 64x64 pixels I have p ...

Determine the position of a nested object within a multidimensional array using JavaScript/TypeScript

My objective is to obtain the complete index of a complex object within a multidimensional array. For example, consider the following array: var arr = [ { name: "zero", children: null }, { name: "one", children: [ { ...

Swiper moves through different sections, while the navigation bar acts as pagination

I am currently utilizing next.js, typescript, and swiper. My goal is to highlight the current slide or section in the navigation bar. I was successful in achieving this with vanilla javascript at https://codepen.io/ms9ntQfa/pen/eYrxLxV but I'm unsure ...

What is the most effective method for converting all the keys in a nested array of objects to camel case?

I'm looking to convert all keys of my array of objects into camelCase using TypeScript. Here is the data I have: [ { "Name":"Custom property", "Details":{ "Address":"Huston" ...

Obtain the ViewContainerRef object from the Component

Looking to create nested components in Angular 4? This is the Chooser Component import {InputComponent} from './input/input.component' import {BlockComponent} from './block/block.component' export const FormChooser = { Block: Block ...

Error: The npm-link library encountered an invalid hook call

Problem Description: I am working on developing a package named eformless. To set up the package, I utilized CRA to create a directory named sandbox where I linked the package. However, I keep encountering an error when attempting to launch the sand ...

How do I assign a default value to an optional parameter in a derived class in Typescript?

One of my classes is called ClientBase: export class ClientBase { constructor(private uri: string, private httpClient: HttpClient) { } // Contains Various Methods } I have multiple subclasses that are derived from the ClientBase For instance: @I ...

Have you considered utilizing encodeURIComponent to encode both the key and parameter values?

When I use encodeURIComponent in this code snippet: export function getDownloadFileUrl(fid: string,bgColor: string) { const params = encodeURIComponent("id=" + Number(fid) + "&bgColor=" + bgColor); const config = { m ...

In Angular 6, triggering a reset on a reactive form will activate all necessary validators

As a beginner in angular 6, I am currently facing an issue with resetting a form after submitting data. Although everything seems to be functioning properly, when I reset the form after successfully submitting data to the database, it triggers all the req ...

What is the best way to retrieve the dataset object from a chart object using chart.js in typescript?

Currently, I am facing a challenge in creating a new custom plugin for chart.js. Specifically, I am encountering a type error while attempting to retrieve the dataset option from the chart object. Below is the code snippet of the plugin: const gaugeNeedle ...

Unable to locate 'reflect-metadata' module within Docker container on Production Server

I encountered an error: module.js:550 throw err; ^ Error: Cannot find module 'reflect-metadata' at Function.Module._resolveFilename (module.js:548:15) at Function.Module._load (module.js:475:25) at Module.require ( ...

Extracting data from a JSON object using Angular 2

I need advice on the most efficient way to handle JSON within my angular2 application. The JSON data I am working with includes: { "rightUpperLogoId": { "id": 100000, "value": "" }, "navbarBackgroundColorIdCss": { "id" ...

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

What is the process for classifying a nested object?

How can I specify a nested object? Click here for image description An error occurred: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ UA: {}; RU: {}; }'. No index ...

The specified instant cannot be located in 'moment' while attempting to import {Moment} from 'moment' module

Struggling in a reactJS project with typescript to bring in moment alongside the type Moment Attempted using import moment, { Moment } from 'moment' This approach triggers ESLint warnings: ESLint: Moment not found in 'moment'(import/n ...

Tips for effectively utilizing react-test-renderer/shallow in a TypeScript environment

Looking to utilize react-test-renderer/shallow for testing my react component. However, when I try to import ShallowRenderer from 'react-test-renderer/shallow'; tsc throws an error stating that 'Module '"/Users/dulin/workspace/react-t ...