Using square patterns for round particles in three.js

Question

Using square patterns for round particles in three.js

Having some trouble with rendering particles correctly in my three.js project. I've been trying to follow a tutorial on setting up particles, but the issue is that even though they appear in the right position and are visible, they have a rectangular shape instead of being circular. https://i.sstatic.net/5mO8c.png Here's the code snippet related to the material:

var texture = new THREE.TextureLoader().load(   
"textures/disc.png",
function(texture) {

  var material = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    size: 16,
    map: texture,
    transparent: true,
    blending: THREE.AdditiveBlending,
  });

  particles = new THREE.Points( geometry, material );
});

If you want to take a look at the full code, it's available here.

I'm quite perplexed as to why the particles are displaying like this, especially since the tutorial's example works perfectly fine.

javascript three.js

Answer 1

Answer №1

The problem arises when the fog affects your particles. To fix this, set the fog property to false in the PointMaterial.

var scene,
        camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
        renderer, container;

function createScene() {
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;

  scene = new THREE.Scene();

  scene.fog = new THREE.Fog(0xf7d9aa, 100, 950)
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = 1;
  farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
  );

  camera.position.x = 10;
  camera.position.z = 290;
  camera.position.y = 25;

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });

    renderer.setClearColor(new THREE.Color(0, 0, 0));
  renderer.setSize(WIDTH, HEIGHT)
  renderer.shadowMap.enabled = true;

  container = document.getElementById('world');
  container.appendChild(renderer.domElement);

  window.addEventListener('resize', handleWindowResize, false);
}

function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}


var hemisphereLight, shadowLight;

function createLights() {
}

var sphere;
function createSphere() {
    var geometry = new THREE.SphereGeometry( 150, 32, 32 );
    var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
    sphere = new THREE.Mesh( geometry, material );
    sphere.visible = false;
    scene.add( sphere );
}

function createParticles() {
    var loader = new THREE.TextureLoader();
    var texture = loader.load(      
        "https://i.imgur.com/9fW07EI.png",
      function(texture) {
        editGeometry = sphere.geometry;
        var geometry = new THREE.Geometry();
        for ( i = 0; i < editGeometry.vertices.length; i ++ ) {

          geometry.vertices.push(editGeometry.vertices[i]);

        }

        var material = new THREE.PointsMaterial({
          color: 0xFFFFFF,
          size: 16,
          map: texture,
          transparent: true,
          blending: THREE.AdditiveBlending,
          fog: false,
          depthTest: false,
        });

        particles = new THREE.Points( geometry, material );
        particles.sortParticles = true;
        scene.add( particles );
    });
}

function loop() {
  renderer.render(scene, camera);
    requestAnimationFrame(loop);
}


function init() {
    createScene();
    createLights();
    createSphere();
    createParticles();
    loop();
}
init()

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<div id="world">
</div>

Please note that if your image is hosted on a different domain than your webpage, you will need cross-origin access and permission from the server hosting the image to use it in WebGL.

Also, using images from third-party domains requires CORS headers to be sent by the server hosting the image. In this case, the imgur server granted permission, but the postimg.org server did not.

To avoid blocking out points drawn in the back, remember to disable depthTest, especially when drawing with transparency and additive blending.

Answer 2

The problem arises when the fog affects your particles. To fix this, set the fog property to false in the PointMaterial.

var scene,
        camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH,
        renderer, container;

function createScene() {
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;

  scene = new THREE.Scene();

  scene.fog = new THREE.Fog(0xf7d9aa, 100, 950)
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = 1;
  farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
  );

  camera.position.x = 10;
  camera.position.z = 290;
  camera.position.y = 25;

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });

    renderer.setClearColor(new THREE.Color(0, 0, 0));
  renderer.setSize(WIDTH, HEIGHT)
  renderer.shadowMap.enabled = true;

  container = document.getElementById('world');
  container.appendChild(renderer.domElement);

  window.addEventListener('resize', handleWindowResize, false);
}

function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}


var hemisphereLight, shadowLight;

function createLights() {
}

var sphere;
function createSphere() {
    var geometry = new THREE.SphereGeometry( 150, 32, 32 );
    var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
    sphere = new THREE.Mesh( geometry, material );
    sphere.visible = false;
    scene.add( sphere );
}

function createParticles() {
    var loader = new THREE.TextureLoader();
    var texture = loader.load(      
        "https://i.imgur.com/9fW07EI.png",
      function(texture) {
        editGeometry = sphere.geometry;
        var geometry = new THREE.Geometry();
        for ( i = 0; i < editGeometry.vertices.length; i ++ ) {

          geometry.vertices.push(editGeometry.vertices[i]);

        }

        var material = new THREE.PointsMaterial({
          color: 0xFFFFFF,
          size: 16,
          map: texture,
          transparent: true,
          blending: THREE.AdditiveBlending,
          fog: false,
          depthTest: false,
        });

        particles = new THREE.Points( geometry, material );
        particles.sortParticles = true;
        scene.add( particles );
    });
}

function loop() {
  renderer.render(scene, camera);
    requestAnimationFrame(loop);
}


function init() {
    createScene();
    createLights();
    createSphere();
    createParticles();
    loop();
}
init()

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<div id="world">
</div>

Please note that if your image is hosted on a different domain than your webpage, you will need cross-origin access and permission from the server hosting the image to use it in WebGL.

Also, using images from third-party domains requires CORS headers to be sent by the server hosting the image. In this case, the imgur server granted permission, but the postimg.org server did not.

To avoid blocking out points drawn in the back, remember to disable depthTest, especially when drawing with transparency and additive blending.

Answer 3

Answer №2

For me, the solution was to utilize a ShaderMaterial. Setting depthTest: false worked perfectly.

let material = new THREE.ShaderMaterial({
                uniforms: {
                    uColor: { value: new THREE.Color(0xffffff) },
                    uPointTexture: { value: new THREE.TextureLoader().load(require('./res/spark1')) }
                },
                vertexShader: _me.vertex_shader,
                fragmentShader: _me.fragment_shader,

                depthTest: false,
                transparent: true,
                // fog: false
            })

Answer 4

For me, the solution was to utilize a ShaderMaterial. Setting depthTest: false worked perfectly.

let material = new THREE.ShaderMaterial({
                uniforms: {
                    uColor: { value: new THREE.Color(0xffffff) },
                    uPointTexture: { value: new THREE.TextureLoader().load(require('./res/spark1')) }
                },
                vertexShader: _me.vertex_shader,
                fragmentShader: _me.fragment_shader,

                depthTest: false,
                transparent: true,
                // fog: false
            })

Using square patterns for round particles in three.js

Answer №1

Answer №2

Similar questions

Styling multiple Higher Order Components (HoCs) using Material UI withStyles

Is there a way to concatenate arrays without using the Array.flat method?

Vuex is throwing a mysterious ReferenceError that is leaving developers

Navigating through various JSON arrays using Angular

How can you determine when a download using NodeJS HTTPS.get is complete?

When modifying a form that contains a FileField, the file will be automatically

Is it no longer possible to use v-for to iterate over translations in Nuxt 3 and @nuxtjs/i18n?

Evaluating two arrays and adding elements if the criteria are satisfied

Using React Router can sometimes lead to an issue where the React components are

Tips for transferring a variable from Next.js to a plain JavaScript file

Loop through a nested array of objects within the same row using ng-repeat

Is this example a strong demonstration of implementing simple inheritance in JavaScript?

What is the reason for jQuery's inability to recognize ":not(#menu *)" in a selector?

verify the current version of your web browser

How can communication be established between JavaScript and a .NET app?

Why is my Ajax utilizing PHP _POST not functioning as expected?

Calculating the sha1 hash of large files using JavaScript in the browser without causing excessive memory usage

The functionality of HTML5 Camera is experiencing issues while being used with Tomcat7

Encountering the error "Invalid URL. Please provide only absolute URLs" while trying to integrate the Airtable JavaScript library in a Next.js application

Avoid storing js files in cache during the development phase