Orthographic Mode with EDL Shader in Potree Viewer

Struggling with the EDL Shader in the Potree Viewer? While it performs well in perspective mode, I'm encountering issues when trying to utilize orthographic mode for my project.
Check out the accompanying GIF and example below for reference.

The EDL Renderer seems to malfunction when used in conjunction with orthographic mode. The problem arises when zooming into the point cloud, causing shadows to vanish and depth perception to be lost.

You should be able to replicate this issue on any public example by simply switching to orthographic mode using the Tools panel in the sidebar.

Any assistance would be greatly appreciated.

Take a look at how it appears in this GIF:

The example showcased in the GIF can be accessed here:

To explore Potree shaders, visit: https://github.com/potree/potree/tree/develop/src/materials/shaders

Refer to navigation controls that manipulate camera position here: https://github.com/potree/potree/blob/develop/src/navigation/OrbitControls.js

javascriptthree.jsshader

Answer №1

It appears that in the example you provided, the shading of the EDL effect stops when the camera's near plane is intersected. This phenomenon can be observed when switching between the perspective and ortho views; the shading abruptly ends when the particles are no longer visible in the perspective camera.

To address this issue, you may consider adjusting the value of camera.near to a lower value. It is even possible to set it as a negative value for Orthographic cameras.

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

What is the best way to style only numbers using CSS in jQuery?

Here is some HTML code that needs styling: <tr> <td>Test</td> <td>324</td> </tr> The default CSS setting is text-align:left However, I am looking to apply text-align:center to any <td> element that contai ...

javascriptjquerycss

How to Stop the Window from Closing with jQuery

Is there a way to prompt the user for confirmation before they leave the page if they click the close button, similar to how it's done in Google Docs? How can this be achieved using jQuery? ...

javascriptjquerywindow

Personalize Your Highcharts Legend with Custom HTML

Currently, I am working on a project with a highcharts graph where I need to gather data from the user regarding each line displayed. My goal is to include a text input box next to each label in the legend that relates to the series name. Once the user ent ...

javascripthighcharts

Unable to import a Module in React without curly braces, even when using 'export default'

I recently stumbled upon a question regarding module imports in React. Some sources mentioned that using curly braces around imports can increase the bundle size by importing the entire library. However, I had been successfully importing modules without cu ...

javascriptreactjsimport

How to make a node_module global with the power of Webpack 2

I'm currently utilizing a package in an Angular project that can be found at the following link: https://github.com/pablojim/highcharts-ng One of the requirements for this package is that highcharts needs to be included as a global dependency by add ...

javascriptangularjshighchartswebpackwebpack-2

Encountering difficulty with installing node_modules on Express js

Encountered an error while attempting to install node_modules from the package.json file. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_em ...

javascriptnode.jsexpressmongoose

Error Encountered in NextJS - Hydration Unsuccessful

Currently, I am utilizing NextLink in my project to generate links. However, it appears that using NextLink is causing the following error: Hydration failed because the initial UI does not match what was rendered on the server. Upon inspecting the console ...

javascriptreactjsnext.jschakra-uihydration

Is it feasible to showcase collections from MongoDB and every individual element from all collections on a single EJS page?

I am currently working on developing a forum for my website using NodeJs, Express, MongoDB, and EJS for HTML rendering. However, I encountered an error message saying: "cannot set headers after they are sent to the client." I am a bit confused about this i ...

javascriptnode.jsmongodbexpressejs

React - How to Close Material-UI Drawer from a Nested Menu

Currently, I am utilizing a fantastic example (here) to create a dynamic nested menu for my application. Taking it a step further, I am trying to integrate it into a Material UI appbar/temporary drawer. My goal is to close the drawer when the user clicks o ...

javascriptreactjsmaterial-ui

Failed to deploy JEST test using THREE JS OrbitControls due to ENOENT error

I have successfully implemented a new feature that utilizes the Orbit Controls library. Everything is functioning properly, and I imported the Three.js module as per the documentation: import { OrbitControls } from 'three/examples/jsm/controls/OrbitC ...

angularjestjsthree.jsenoentorbitcontrols

I am encountering an error message that states "Uncaught TypeError: Cannot read property 'use' of undefined."

https://i.sstatic.net/HcwYr.png Error: Unable to access the 'use' property of an undefined object ...

javascriptvue.jsframeworks

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

javascripthtmlcssimagemobile

How can I transition smoothly between two colors in three.js?

I am working with a three.js object that is currently a specific color and I would like to smoothly animate it to a different color. I want the animation to only display a direct transition between the initial and final colors without following a linear pa ...

javascriptanimationthree.jstweencolor-blending

What steps do I need to take to retrieve the passed slug in my API (slug=${params.slug})?

Is there a way for me to retrieve the passed slug in my API (slug=${params.slug}) while using the vercel AI SDK? const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({ api: `/api/conversation?slug=${params.slug ...

javascriptreactjsnext.js

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

How can we efficiently load and display all images from a directory using Node.js and JavaScript?

My strategy involves reading all image file names from a specific directory and passing them as an array to the front-end JavaScript. The front-end script then iterates through the array to dynamically create image elements. Step 1: node const path = requ ...

javascripthtmlnode.js

Interpreting binary decimal data using JavaScript

The Challenge Received data from an API contains binary information about colored points in 3D space. The goal is to decode these points and utilize them in a buffergeometry within Three.js. Working with binary formatted data is proving to be beyond my c ...

javascriptthree.jsbinary-dataarraybufferbuffer-geometry

Expecting a declaration statement for exporting React

When attempting to export my component, I encounter an error in my editor stating export declaration statement expected Here is the code snippet: export Header from './Header/Header'; However, if I modify it like this: export {default as Head ...

javascriptreactjs

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

javascripthtmlseleniumselenium-webdriverxpath

Add empty objects to an array using a push function following the Vue JS constructor function

During my learning journey with Vue JS, I encountered an issue while attempting to populate an array with objects using a constructor function and the push method. Surprisingly, in Vue JS, the push function inserts a blank object into the array instead of ...

javascriptvue.jsvuejs2