Exploring the limits of values in WebGL and Three.js

As I embark on creating a galaxy using Three.js, my goal is to maintain a realistic scale for everything. This means that the values for position and size can become quite large.

The range of values I am working with typically falls between 0 and approximately 1 * 10^20. However, I have encountered issues with values greater than around 1*10^6 and less than around 1*10^-5, which affect features such as visibility, raycasting, and other functionalities.

Are there limitations on how large or small these values can be? Alternatively, are these problems stemming from another source that can be circumvented using a workaround?

javascriptthree.js

Answer №1

Make sure to check out this illustrative demonstration

Due to the large values involved, it is recommended to implement a logarithmic depth buffer.

Upon initializing your renderer with 

var renderer = new THREE.WebGLRenderer({logarithmicDepthBuffer: true });

Your code should function flawlessly

I am not familiar with raycasting, but it shouldn't pose any issues. Especially if you execute it via the graphics processing unit (GPU), as the outcome ought to match the rendered image

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 method to ensure that none of the select option values are left empty?

I have a total of 5 select option drop down menus currently, but this number may increase in the future depending on requirements. The issue I'm facing is that when I select the last element, it returns true even though the other elements are empty. I ...

javascriptjqueryhtmlcss

Setting up WebPack for TypeScript with import functionality

A tutorial on webpack configuration for typescript typically demonstrates the following: const path = require('path'); module.exports = { ... } Is it more advantageous to utilize ES modules and configure it with import statements instead? Or is ...

javascriptreactjstypescriptwebpackconfiguration

When utilizing the getIntersectionList function, IE 9 may experience a malfunction and cease functioning

I am currently working with SVG code and JavaScript, trying to achieve a specific intersection result. <svg id="svgSurface" width="500" height="500"> <defs> <marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="0" markerUnits ...

javascriptsvg

Choose an element based on its position in the index (multiple elements with the same class)

Can you use Javascript or jQuery to select an element by its index? For example: <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> If I have 4 elements with ...

javascriptjquery

Tips for incorporating PHP variables into Javascript code

Working with JavaScript: var counter = 1; var limit = 5; function addInput(divName){ if (counter == limit) { alert("You have reached the limit of adding " + counter + " inputs"); } else { var newdiv = document.createEle ...

phpjavascript

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

javascriptphphtmlcss

Learn the process of updating database information with AngularJS through a button click

As a newcomer to Angular, I am facing an issue in my mini project. The main goal of the project is to display data from a database. I have successfully set up the view to show current data by making API calls and connecting to the database. However, I am n ...

javascriptasp.netangularjsapidatagridview

Arrange images in a fluid manner around other images

Check out the website I'm currently working on: metroweb.tk I'm in the process of designing a website that mimics the Windows 8 metro UI. However, I've encountered an issue with larger app icons such as notes and clocks sticking out. Is the ...

javascriptjqueryhtmlcssmicrosoft-metro

Is there a way to maintain the original indexing of a list after users have selected a filtered item in React using Webpack?

After implementing a filter (filteredCat) for my catalogue, the visual display works as expected. One issue I am facing is that even though the items are filtered, the logged index does not correspond to the new filtered list but instead reflects the inde ...

javascriptreactjsfirebasewebpack

What is the reason behind the error "Uncaught SyntaxError: Malformed arrow function parameter list" when using "true && () => {}"?

When the code below is executed: true && () => {} it results in an error message stating: Uncaught SyntaxError: Malformed arrow function parameter list Why does this happen ? Update: I am aware that wrapping the function in parentheses reso ...

javascriptnode.jslogiclogical-operators

Using JavaScript, import the variable module object from a specific module

Is there a way to import a module object from a module if I am unsure of the specific objects I will need beforehand? How can I utilize a variable in place of fixed module names? import { dynamicVariable } from './module' The variable represents ...

javascriptnode.jsreactjsimportmodule

Use the slide bar to adjust the Angular filter value

I am diving into my very first AngularJS project and I must admit, I have zero experience with Angular. On my HTML page, I have implemented a slider bar with two handles to set a minimum and maximum value. Here is the snippet of code where this functionali ...

javascriptangularjsfilter

Ways to boost an array index in JavaScript

I recently developed a JavaScript function that involves defining an array and then appending the values of that array to an HTML table. However, I am facing an issue with increasing the array index dynamically. <script src="https://cdnjs.cloudflare. ...

javascripthtmlcssarrayshtml-table

Dynamic views loaded from ui-router can cause compatibility issues with running Javascript

Currently, I am facing an issue while attempting to load a template into a UI-View using UI-Router. Although the JavaScript is loaded, it does not run on the loaded views. The situation unfolds as follows: I have developed a template in HTML containing all ...

javascriptangularjsangular-ui-router

Tips for saving an image that has been dragged onto the browser locally

I recently started working with Angular and decided to use the angular-file-upload project from GitHub here. I'm currently in the process of setting up the backend for my application, but I'd like to be able to display dropped files locally in th ...

javascriptangularjsupload

Unable to locate the method within User.js

I'm encountering an issue with a method in express. I've included the error code below index.js app.post('/login', function (req, res) { User.findOne({ email: req.body.email }, function (err, user) { if (!user) { ...

javascriptnode.jsexpressauthentication

The function you are trying to call in Node.js is not defined

Just starting out with NodeJs and trying to implement async/ series, but encountering an error: task.save is not a function Here is the code snippet I am working with: async.series([ (cb) => { Task .findById(id) ...

javascriptnode.js

The Consequences of Using Undeclared Variables in JavaScript

What is the reason behind JavaScript throwing a reference error when attempting to use an undeclared variable, but allowing it to be set to a value? For example: a = 10; //creates global variable a and sets value to 10 even though it's undeclared al ...

javascriptjquery

Utilizing .trigger repeatedly within a loop

I am in search of a solution to iterate through items in a select box, checking if any of them already have quantity data saved in the API, and then appending those items to the page. My current code achieves this by using .trigger('change'), bu ...

javascriptjquery

"Error message: WebGL not found" encountered while using a cordova application with three.js framework

I attempted to develop a Cordova application that incorporates three.js. While it functioned properly on some mobile devices, it encountered a WebGL missing error on others (such as Lenovo...). I verified the functionality by visiting get.webgl.org and obs ...

cordovathree.jswebgl