translucent three.js texture with shader material

I'm currently using a circular texture to display particles:

The circle texture contains transparent pixels. I'm leveraging ShaderMaterial and BufferGeometry to assign custom sizes and colors to each node. However, I'm encountering issues with the proper z-index rendering. In the provided image below:

The white particle appears to be the closest to the camera, followed by the cyan particle (0x00ffff) and the hibiscus-colored particle in the top right corner (0xC3206F has a pinkish hue) being the farthest away.

As demonstrated, the layering order is not as expected. Ideally, the white circle should completely overlap the cyan circle and partially cover the hibiscus one. When I enable depthTest: true for the ShaderMaterial, the transparent areas of the texture become opaque:

For the complete source code, you can refer to this link: http://jsbin.com/mikimifipi/edit?js,output

I suspect that I may have overlooked something related to blending or encountered issues with the shaders. Any assistance you could provide would be greatly appreciated.

javascriptthree.js

Answer №1

  1. The order in which the particles are rendered is determined by the BufferGeometry.

  2. When depthTest = true, the material does not become solid; rather, particles positioned behind it (and rendered later) are simply not displayed at all.

  3. To reduce certain artifacts, you can utilize the following code: 

    if ( tColor.a < 0.5 ) discard;
    .

  4. It is advisable not to multiply the fragment shader output RGB by alpha. This is not the correct approach when using the default alpha-blending in three.js, and it is the cause of the ring appearing around the white disk.

Version: three.js r.71

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

After applying styling, the modal close button refuses to be clicked

I'm currently facing an issue where I am trying to enhance a modal window with a close button, but encounter problems once styling is applied. The unique aspect of this problem arises from the fact that the close button is not directly in the page HTM ...

javascripthtmlangularjsbootstrap-modal

Utilizing an array to pass a series of items to a function parameter

I am currently working on an Angular project that involves a controller and service. In this setup, the controller sends data and an endpoint to the service. As of now, the service handles the http request. However, I am in the process of refactoring my ...

javascriptarraysangularjsperformancejavascript-objects

HTML Multi-Column List Box

Can a List Box be created with List Items displayed in Multiple Columns? I know there are other options available, but I'm curious if this is achievable using the <select> tag ...

javascriptjqueryhtmlcss

Rails 4 application encountering issues with rendering views when making a $.ajax request

I am a beginner in Rails and I am in the process of sending model data to a controller method from JavaScript for rendering a list of results... function submitResults() { resultURL = "/result"; resultData = JSON.stringify(results); $.ajax({ typ ...

javascriptjqueryruby-on-railsajax

Vue.js is displaying an error message stating that the data property is

I am struggling to access my data property within my Vue.js component. It seems like I might be overlooking something obvious. Below is a condensed version of my code. The file StoreFilter.vue serves as a wrapper for the library matfish2/vue-tables-2. &l ...

javascriptlaravelvue.jsvuejs2vue-component

Set a unique class for several elements depending on a given condition

Is there a way to assign a color class based on the element's value without looping through all elements? Check out my jsfiddle HTML <div> <ul> <li class="MyScore">90</li> <li class="MyScore"> ...

javascripthtmlcss

Managing redundant asynchronous data in AngularJS

Imagine this scenario: In your AngularJS application, a user is spamming input which triggers numerous asynchronous data calls on the backend. This results in constant changes to the displayed data as each fetch request completes. Ideally, we want the fina ...

javascriptangularjsasynchronous

Unable to retrieve information from the API

I have created some Graphs using Graph js and now I want to visualize the data within them. Even though I am able to fetch the data and display it in the console, I am facing issues with displaying it in the actual graph. Despite trying multiple methods, ...

javascriptreactjs

Why isn't the Head component producing any visible results in the DOM when using Next.js?

Struggling to get the <Head> component working, but it's not reflecting any changes in the DOM. Take a look at my page.js: import Head from 'next/head' export default function Home() { return ( <> <Head> & ...

javascriptreactjsnext.js

Iterating over objects within a nested array using ng-repeat

My back-end is sending me an array of string arrays (Java - CXF-RS). The length of each array within the string arrays ranges from 1 to n. In order to display this data on my front-end, I am utilizing ng-repeat. Everything is functioning correctly with o ...

javascriptarraysangularjsobject

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

javascripthtmlcssinternet-explorertabs

When using three.js orbitControl, inputting text into textboxes in a Ruby on Rails application is

My three.js application seems to be causing issues with my text field in my Ruby on Rails application. I am unable to write anything in the text field or even click on it. Does anyone know why this is happening? Here is a snippet of my three.js application ...

javascriptruby-on-railsthree.js

Why does the onBlur event function in Chrome but fails to work in Safari?

I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error m ...

javascriptreactjstypescriptreact-typescript

How can I make sure to consider the scrollbar when using viewport width units?

I've been working on developing a carousel similar to Netflix, but I'm facing an issue with responsiveness. I've been using a codepen example as a reference: Check out the example here The problem lies in the hardcoded width and height use ...

javascriptcss

Eliminate unnecessary scrollbar from fancybox iframe

I am trying to display content in an iframe using Fancybox, but I am encountering an issue. Despite all the content being contained within the iframe, horizontal and vertical scroll bars are appearing. When inspecting the element in Firefox, I noticed th ...

javascripthtmlcssfancybox

What is the reason for the square brackets in my json data?

My current project involves exploring the usage of JSON in conjunction with jQuery and MVC2. My goal is to generate JSON data for an AJAX post request to my controller. I have created an array using the following function: function getArguments() { var ar ...

javascriptjson

Sending multiple unique forms with the same structure using JavaScript and Ajax on a single PHP page

In my PHP page, there are 12 individual forms with unique form IDs, checkboxes, and dropdowns. Take a look at this image: https://i.stack.imgur.com/pODzk.png Each form has an Update Zone that fetches Name, Enable status, Time, Dim information, and sends ...

javascriptphpjqueryhtmlajax

Disassociate all globally linked modules in npm network

If I want to display a list of all npm modules linked globally using npm link ..., I can execute the following command: npm ls -g --depth=0 --link=true But is there a way to remove or unlink all of these linked modules at once? With over 10 dependencies, ...

javascriptnode.jsnpm

Determining when props are updated in Vue.js 2 when passing an object as a prop

Let's say there is an array feedsArray, with a sample value like this: this.feedsArray = [ { id: 1, type: 'Comment', value: 'How are you today ?' }, { id: 2, type: 'Meet', name: 'Daily ...

javascriptvue.jsvuejs2

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 ...

javascripthtml