Displaying spherical objects (or individual points) within a particle network

Question

Displaying spherical objects (or individual points) within a particle network

In my project, I am utilizing the Three.JS library to showcase a point cloud on a web browser. The point cloud is created once at the beginning and remains static with no additional points being added or removed. However, it does require functionality for rotation, panning, and zooming. I have referred to a tutorial on creating particles in Three.js which has been quite helpful here

Upon experimentating with the example provided, I was able to generate particles in the form of squares or utilize an image of a sphere as a texture. While the image option aligns more closely with my vision, I am curious if it is feasible to produce the point clouds without relying on an image, such as using a sphere geometry.

One issue encountered with using images is that when dealing with a large number of points, they tend to overlap each other around the edges, presumably due to the black region in a point's PNG file blocking the underlying image right behind the current point (though transparent to points farther back).

To address this overlapping concern, I made attempts to swap out particles = new THREE.Geometry() with

THREE.SphereGeometry(radius, segments, rings)

, aiming to alter the vertices into spheres.

Therefore, my query is how can I tweak the sample code to render spheres (or points) instead of squares? Additionally, I am uncertain whether a particle system remains the most efficient choice for my specific scenario, or would it be better to directly generate the particles and set their individual positions. It's worth noting that the points are generated only once, following which they are subjected to rotation, zooming, and panning (utilizing the TrackBall sample code for mouse event integration).

I appreciate any guidance you can provide.

javascript 3d three.js

Answer 1

Answer №1

Using a particle system instead of rendering a point cloud with spheres can greatly improve efficiency. You could utilize a texture or a small canvas program to draw circles for a more optimized approach.

Take a look at one of the initial examples in three.js that employs a canvas program:

var PI2 = Math.PI * 2;
var program = function ( context )
{
    context.beginPath();
    context.arc( 0, 0, 1, 0, PI2, true );
    context.closePath();
    context.fill();    
};
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
    color: Math.random() * 0x808008 + 0x808080,
    program: program
} ) );

Feel free to modify the code for use with the WebGL renderer.

Another innovative approach I've come across in the examples is utilizing an encoded webm video to store data and passing it to a GLSL shader for rendering through a particle system in three.js

If you are working with a Kinect-generated point cloud, these resources may be helpful:

DepthCam
KinectJS

Answer 2

Using a particle system instead of rendering a point cloud with spheres can greatly improve efficiency. You could utilize a texture or a small canvas program to draw circles for a more optimized approach.

Take a look at one of the initial examples in three.js that employs a canvas program:

var PI2 = Math.PI * 2;
var program = function ( context )
{
    context.beginPath();
    context.arc( 0, 0, 1, 0, PI2, true );
    context.closePath();
    context.fill();    
};
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
    color: Math.random() * 0x808008 + 0x808080,
    program: program
} ) );

Feel free to modify the code for use with the WebGL renderer.

Another innovative approach I've come across in the examples is utilizing an encoded webm video to store data and passing it to a GLSL shader for rendering through a particle system in three.js

If you are working with a Kinect-generated point cloud, these resources may be helpful:

DepthCam
KinectJS

Answer 3

Answer №2

Upon reviewing my code in comparison to this example on the Three.js website, I noticed one key discrepancy:

vec4 outColor = texture2D( texture, gl_PointCoord );
if ( outColor.a < 0.5 ) discard;
gl_FragColor = outColor;

Including this snippet in the fragment shader resolved the issue.

The problem was not related to z-fighting as some corners were mysteriously overlapping distant particles. material.alphaTest = 0.5 failed to resolve it, and disabling depth writes/tests caused visual scrambling in terms of object rendering order.

Answer 4

Upon reviewing my code in comparison to this example on the Three.js website, I noticed one key discrepancy:

vec4 outColor = texture2D( texture, gl_PointCoord );
if ( outColor.a < 0.5 ) discard;
gl_FragColor = outColor;

Including this snippet in the fragment shader resolved the issue.

The problem was not related to z-fighting as some corners were mysteriously overlapping distant particles. material.alphaTest = 0.5 failed to resolve it, and disabling depth writes/tests caused visual scrambling in terms of object rendering order.

Answer 5

Answer №3

An issue with the image arises when there are numerous points, as they can sometimes block each other along the edges. It appears that the black region in a point's png file obstructs the immediate area behind the point, but not those further away.

To solve the problem of overlapping transparency in the background square structure, you can disable

depthTest:false

However, this may lead to issues if additional objects are added to the scene, as the depth-testing will fail and the PointCloud may end up rendering in front of other objects regardless of their actual order. To address this, you can also disable

depthWrite:false

Answer 6

An issue with the image arises when there are numerous points, as they can sometimes block each other along the edges. It appears that the black region in a point's png file obstructs the immediate area behind the point, but not those further away.

To solve the problem of overlapping transparency in the background square structure, you can disable

depthTest:false

However, this may lead to issues if additional objects are added to the scene, as the depth-testing will fail and the PointCloud may end up rendering in front of other objects regardless of their actual order. To address this, you can also disable

depthWrite:false

Displaying spherical objects (or individual points) within a particle network

Answer №1

Answer №2

Answer №3

Similar questions

Ways to establish a default option in a dropdown menu using JavaScript

Ways to ensure CSS affects icon inside main element?

Navigating through an array of objects with Node.js

The Ajax readyState consistently displaying a value of 0

It appears that the collection.add() method in connector/node.js only successfully executes one time

Using JavaScript to Generate Formatting Tags Based on User Selections from a Multiselect Dropdown

Converting a TypeScript class to a plain JavaScript object using class-transformer

What could be the reason for the Express function Router() returning a value of undefined?

MongoDB not being updated

Transferring variables from the $(document).ready(function(){}) to the $(window).load(function(){} allows for seamless and

JS Tips for using the .push() function with Multidimensional Arrays in JavaScript

Divide the array of words into segments based on the maximum character limit

Webpack is ejected from watch mode

Remove all Visual Composer Shortcodes while preserving the content

Embed the Nest API into your HTML5 code

Implementing the decrement functionality within an onclick event handler for a variable

Alter the component and then refresh it

issue with react prop causing my function to function in one scenario but fail in another

The transition from material-ui v3 to v4 results in a redux form Field component error stating 'invalid prop component.'

Why doesn't the 'javascript' named directory have access to my localhost?