The problem of transparency in Three.js when using PointClouds and textures

Seeking assistance with a project involving two PointCloud objects, each representing a specific structure and texture. One of them should be clickable while the other should not. Let's refer to them as P1 and P2, respectively.

P1 is set up using a THREE.ShaderMaterial like so:

var p1Material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    attributes: attributes,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    transparent: true
});

On the other hand, P2 utilizes a THREE.PointCloudMaterial:

var p2Material = THREE.PointCloudMaterial({
    size : SIZE,
    map : THREE.ImageUtils.loadTexture("icons/myAwesomeIcon.png"),
    sizeAttenuation : true,
    transparent: true
});

Both resulting THREE.PointCloud objects have their sortParticles property set to true.

Encountering issues with transparency, such as shown below:

(REMOVED - SEE EDIT)

The textures in this scenario include a Sphere texture utilized in P2, contrasting with the textures in P1.

It can be observed that the textures in P2 do not exhibit proper transparency against those in P1. However, they display transparency among themselves, as depicted in the second image. Conversely, a similar situation occurs between the textures in P1. Nevertheless, within the same scene, there is a different example:

(REMOVED - SEE EDIT)

Some of the textures in P1 behave correctly, whereas the ones in P2 seem to be misbehaving.

The decision to separate the textures into different PointClouds was made for performance reasons, with the elements in P2 not requiring clickability. Notably, selection is achieved by clicking on an object and utilizing a THREE.Raycaster.

Any insights on what might be going wrong?

Thank you in advance!

EDIT: The issue appears to be related to the usage of BufferGeometry...

Below are two JSFiddle links that are identical except for the geometry used:

http://jsfiddle.net/vf6uu90t/3/

http://jsfiddle.net/2uh0q8Lr/2/

Is there something I'm overlooking?

I had to remove some previous links due to stackoverflow limitations... --'

Answer №1

Check out this ThreeJs GitHub problem and a likely fix.

https://github.com/mrdoob/three.js/issues/5668

The key solution involved adjusting alphaTesting. It appears there may be a bug associated with this in version r69.

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

Why is the Slick Slider displaying previous and next buttons instead of icons?

I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears ...

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

Utilizing Translation (i18n) in AngularJS Controller to Implement Popups

I'm currently working on an AngularJS app and need to implement i18n. Everything is running smoothly except for error handling, specifically with utilizing translations in controller for popups. Here is a snippet of my controller: function showError ...

Executing directives in a sequential manner

I am facing a challenge with my HTML view that is filled with multiple Angular directives, each triggering numerous HTTP requests. This has resulted in high CPU usage due to the heavy load. Our proposed solution is to load one directive at a time, allowing ...

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

"Can someone guide me on where to place the JavaScript code within this Bootstrap snippet when working with CakePHP

I'm currently delving into CakePHP and am eager to incorporate this Bootstrap code snippet from onto my website. I've successfully added the HTML to the .ctp file in the Pages directory and styled it with custom.less, but I hit a roadblock when ...

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Recently, I incorporated the Basic jQuery slider into my website, which can be found at . As a novice in jQuery but well-versed in HTML and CSS, I have managed to make it work seamlessly on my site. However, I am curious to know if there is a way to displa ...

Utilizing an AngularJS service to communicate with a web API

Having trouble retrieving data from a web api and passing it back to a JavaScript file. I've tried using http://localhost:8584/api/Testing/5 to see if there are any results, but no luck so far. //This is the JavaScript controller that calls the serv ...

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

Scope challenges with making multiple rest calls in Angular.js

As a beginner in Angular.js, I am facing an issue with $scope not receiving additional value from one of two $resource rest calls. Below is the code snippet: controller: function ($scope, $modalInstance, $route) { $scope.server = {} ...

What could be the reason for the malfunctioning of the "subscribe" button?

Whenever the subscribe button is clicked, it should send an email to the "subscriptions" section of the database. Unfortunately, when I click the button, nothing seems to happen. My understanding of this is very limited and I can't seem to troubleshoo ...

Ways to retrieve the initial value and proceed with a subsequent subscription method

I have created a basic angular 7 web application with Firebase database integration. In my code, I am attempting to store the initial list in an array using the subscribe method and then display that array using console.log(). However, there seems to be a ...

Moodle API feedback

Is there a way to extract specific data from the API response by targeting a particular response field? var domainname = 'https://sandbox.moodledemo.net'; var token = '234bc817adf979e93f442946c00aa223'; var fu ...

What could be causing JavaScript's wrapInner function to throw an error?

Somehow, the Firefox add-on I've been working on isn't functioning as expected. The initial line of code is executing without issues, which wraps content in a div element with an id of 'content_cont'. However, any subsequent lines of co ...

an unsuccessful attempt to retrieve data was made

After using the fetch function to retrieve a list of notes, nothing appears when I console.log it. I have double-checked the URL and it is correct. Here is the code snippet: import React, { useState, useEffect } from 'react' const NotesListPage ...

Creating a custom data type with a specific value in GraphQL

I am new to graphQL and have some questions regarding it. After going through the documentation, I decided to build something of my own. Currently, my setup is quite simple. At the beginning of my application, I have the following code: const express = ...

ERROR: Unexpected issue occurred with v8::Object::SetInternalField() resulting in an internal field going out of bounds while utilizing node-cache in Node.js

I recently started working with API exports that contain a large amount of data, so I decided to utilize the node-cache in order to speed up the API response time, as it was taking more than 2 minutes to retrieve the data. Being new to this, I came across ...

Passing Props in Material-UI v5xx with ReactJS: A Beginner's Guide

Struggling with the fact that useStyle() isn't functioning properly in my material-UI v5xx version, I found myself at a loss on how to pass props in this updated edition. In Material-UI v4, it was as simple as: const Navbar = () => { const [open ...

Utilizing the map function to modify the attributes of objects within an array

I have a data structure with unique IDs and corresponding status keys. My goal is to count how many times each status repeats itself. Here's an example of my data structure: const items = { id: 2, status_a: 1, status_b: 1, status_c: 3 }; Below is the ...

Tips for submitting a request following a change in the variable

I am in the process of developing a React application and I have implemented Auth0 for authentication. My goal is to initiate an HTTP request upon page refresh, but only if the variable isLoading is false. This way, I can access the user object once the ...