Close the spaces between the points in the cloud by increasing their size as you approach them

Something interesting happens when I view my point cloud from a distance - all the points seem to merge together, creating the optical illusion of a continuous surface. This is the effect I am aiming for. However, upon closer inspection, the individual points and the gaps between them become visible. How can I eliminate these gaps? Perhaps adjusting the point size to increase as the camera approaches?

Take a look at this live example. If you use the up arrow to zoom in, you will notice the transition from a continuous cloud to distinct individual points.

For a more detailed explanation, you can refer to a lengthier version of this query here. It provides additional context on the issue.

Thank you for your assistance.

Best regards, Niall

javascriptthree.jsglslwebgl

Answer №1

In my Cubes project, I implemented a solution in the particle vertex shader that may be overly verbose. You can find the code here.

// Calculate pixel scale for points
vec4 testPosition = eyePosition;
testPosition.x = uPixelsPerClipUnit.x / uTileSize * 1.2/*appearance fudge factor*/;
testPosition.y = 0.0;
testPosition = uPMatrix * testPosition;
gl_PointSize = testPosition.x / testPosition.w * animationScale;

The necessary variables to provide as inputs (those starting with u were uniforms) are:

  • eyePosition: point location in eye space, particularly the z axis

  • uPixelsPerClipUnit: a vec2 representing half the viewport pixel dimensions, converting from clip space scale to pixels

  • uTileSize and animationScale: parameters specific to point size in the game

  • uPMatrix: the projection matrix

This calculation combines the eye-space-to-clip-space scale at the point's z-depth with the clip-space-to-pixel scale to determine point size.

(While I'd like to provide a complete example, I'm just offering the code snippet with a brief explanation.)

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

Having issues with images not loading and receiving a 401 error with the API while using Vite in a production build

While working on my React project with Vite, I've encountered a few challenges during the production build process. Everything seems to be running smoothly when I use npm run dev, but when I try to build the project using npm run build and then previ ...

javascriptnode.jsreactjsviteopenai-api

Comparison between JSON Serializers and .NET Serialized Classes for Retrieving jQuery AJAX Result Data

What is the best method for transferring data from a .NET (C#, VB.NET) Web Service to the client-side using JQuery AJAX? A) Utilizing Newtonsoft JSON serialization, for example: <WebInvoke(Method:="*", ResponseFormat:=WebMessageFormat.Json, UriTemplat ...

c#javascriptjqueryajaxjson

Steps for establishing a thread pool for workers

I have been exploring the experimental functionality of the worker threads module in Node.js. After reading through the official docs and various articles (although limited in number), I decided to create a simple example. This example involves spawning te ...

javascriptnode.js

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

javascriptcssreactjsantd

Ordering a string of whole numbers using JavaScript

I'm currently working on a form that takes a string of numbers, splits them at each semi colon and space, sorts the numbers, and then displays the sorted list. However, when I click the button, the value in the text box doesn't get posted. Can ...

javascripthtmlarraysstringparsing

Converting human-readable dates into a Date object

How can I reliably convert human-entered dates into a Date() object for my project that utilizes a ML text extractor? Although seemingly straightforward, the issue lies in the wide variety of formats used by individuals when entering dates, ranging from " ...

javascriptnode.jsdate

Error: Google Plus Cross-Origin Resource Sharing Issue

I recently developed an AngularJS application that utilizes Google's server-side flow for authentication. The issue arises when my AngularJS app is hosted on one server and the Rest API is hosted on another. After successfully logging in, I encounter ...

javascriptangularjsapioauthcors

Is there a way to manipulate CSS to update automatically when new content is loaded via ajax?

I need help with customizing the CSS for 4 image links on my website. Each link is represented by a small image in its normal state and a larger image when hovered over. The content for each link is loaded using ajax. My question is how can I modify the C ...

javascripthtmlcssajax

ExpressJS - The execution of JavaScript in this framework does not strictly follow a top-down approach

Having issues with this particular script not running as expected, particularly in the variable reassignment section. Below is the code snippet and output: // Code to Create New Open Market in the game let latestRowId = 1; var sqlQu ...

javascriptmysqlnode.jsexpress

Unexpected Errors Occurring on CRM 2016 Forms

Ever since our upgrade from CRM 2011 to CRM 2016, we've been encountering random script error messages during form loading. Despite properly including all dependency scripts in the form properties, we haven't been able to resolve the issue. I cam ...

javascriptcustomizationdynamics-crm-2016

Issue with the rendering of a mirrored (flipped) three.js model

I have uploaded two *.obj models to my application. Although they appear to be identical, one of them is actually a mirrored version of the other. https://i.sstatic.net/yY0SM.png The first picture shows the original model, while the second one displays th ...

3dthree.js

I am encountering an issue with running my Mocha tests. Can anyone provide assistance on how to solve this problem?

https://i.sstatic.net/kLnxs.png Could the issue be with the package.json file or am I not executing the proper command to run it? ...

javascriptselenium-webdrivermocha.js

Tips for showing an alert when incorrect login credentials are entered on a login form

<?php include('includes/config.php'); if(isset($_POST["submit"])){ $empid=$_POST["empid"]; $pass=$_POST["password"]; $query=mysqli_query($conn,"SELECT employee_id, fname,lname,empid,password, status, role FROM employee where empid='$emp ...

javascriptphp

A Step-by-Step Guide on Sending Response to ajaxError Callback in Perl

When working with JavaScript, I have a method of capturing errors that looks like this: $(document).ajaxError(function(event, jqxhr, settings, thrownError) { handleError(MSG_SAVE_ERROR); }); Now, my question is how can I retrieve an error message fro ...

javascriptjqueryajaxperl

Using JavaScript to post data to a PHP script, then triggering the execution of another

My website has two distinct pages with different purposes. On one page, there is a button that, when clicked, sends data to finalizecontract.php. The other page, contract.php, creates a TCPDF form populated with the database information and saves the resu ...

javascriptphpjquery

What is the best way to emphasize an element on a webpage with Selenium and Python?

Recently, I inherited an existing selenium framework that utilizes Python for scripting. In order to aid in debugging and other tasks, I am interested in implementing a feature that highlights the element currently being acted upon (such as an input box, l ...

javascriptpythonseleniumautomation

Testing an ExpressJS route and their corresponding controller individually: a step-by-step guide

I have set up an Express route in my application using the following code snippet (where app represents my Express app): module.exports = function(app) { var controller = require('../../app/controllers/experiment-schema'); app.route('/a ...

javascriptnode.jsunit-testingasynchronousexpress

"How can I update a table in Flask using Chart.js and Pandas

I have developed a basic Flask application that includes a bar chart using Chart.js and a data table displayed below it. Check out the setup below: https://i.sstatic.net/QB6jQ.png (Live view: ) The bar chart I created counts the number of items for each ...

javascriptpythonflaskchart.js

Displaying Material UI textboxes in multiple columns for dynamically created forms using ReactJs from an array

I am working with an API to retrieve a list of cars, and I have come up with the following code snippet to generate labels and textboxes for editing the car codes. {!carQuery.loading && carDefinitions?.map((car: ICarType, idx: number ...

javascriptreactjsmaterial-ui

Can someone explain the function of statements such as (function () { // code; }.call(this)); within a JavaScript module?

By utilizing the Function.prototype.call() method, it becomes possible to create a function that can be applied to various objects. I delved into the code of , which had been minified and required to be un-minified for examination. The structure of the co ...

javascripthtmlnpmminifiedjsfunction.prototype