Ordering BufferGeometries in Three.js for Accurate Rendering

After consulting the discussion on the previous inquiry, I have been working on constructing models in BufferGeometry and have come to understand that the transparent flag plays a role in the rendering order: objects with transparent materials will be rendered after those without transparency.

In addition, I came across this forum post, conducted a test on JSFiddle, and found out that the rendering order of faces in BufferGeometry corresponds to the order they are specified in the buffers, rather than their distance from the camera. (For example, in the aforementioned test, I specified a closer triangle first in the buffer, which ended up obscuring others located behind it.)

Therefore, my query is: can the render order of faces in BufferGeometry be manually adjusted? In my scenario, I anticipate the need to dynamically alter the transparency of building components. (As per the discussion I read, it is possible to set the renderOrder of Object3D.)

Thank you.

javascriptthree.jsbuffer-geometry

Answer №1

The order in which faces are rendered is based on their appearance in the BufferGeometry.

If you need to adjust the transparency of elements in your scene dynamically, it's best to use separate geometries with their own materials.

When rendering, the objects with transparent = false will be rendered first, followed by those with transparent = true.

For better results with transparent materials, consider these settings:

material.transparent = true;
material.opacity = 0.5; // adjust as needed
material.depthTest = true; // default setting
material.depthWrite = false; // use for transparent materials only

Dealing with self-transparency, like with a semi-transparent cube, can be tricky. One solution is to render the object twice: once with material.side = THREE.BackSide and then with material.side = THREE.FrontSide. Use object.renderOrder to control the rendering order between objects.

Using version r.75 of three.js

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

Is it necessary to encode the content before transmitting HTML in JSON from the server to the client?

When it comes to sending HTML content from the server to the client for displaying user comments in a rich JS app that communicates through a JSON API, there are some considerations to keep in mind. One important question is how to handle the content with ...

javascripthtmljsonescapingsingle-page-application

Error: Attempting to access the 'clipboard' property on an undefined object results in a TypeError when invoking this.$q.electron.clipboard

I'm currently working on incorporating copy to clipboard functionality into my app using Electron. This is the command I am using: methods: { copyToClipboard () { if (process.env.MODE === 'electron') { this.$q.electro ...

javascriptnode.jsvue.jselectronquasar-framework

Error encountered with the OpenAI API: "The module 'openai' does not have a defined export for 'Configuration'"

I'm encountering an issue while attempting to make an API call to the GPT-3.5 API from OpenAI; all imports from OpenAI are resulting in a 'has no exported member' error. import { Configuration, OpenAIApi } from "openai"; import { a ...

javascriptreactjsnode.jsnext.jsopenai-api

What is the best way to prevent an HTML form from being submitted when a user is not logged in, but still allow submission when the user is signed

One of the requirements for users of my application is to be signed in before they can submit form information. Upon clicking on the submit button, my jQuery script verifies if the user is already signed in. If the user is not signed in, an error message ...

phpjavascriptjquery

Changing the text color of Material UI Accordion Summary upon expansion

How can I update the color of an Accordion summary text in Material UI when it is expanded? <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.root}> <AccordionSummary ...

javascripthtmlreactjsmaterial-uiaccordion

Display all pages in the DataTables plugin while utilizing responsive tables and additional features

I am struggling to combine the responsive and fixed header attributes of my current function with the "Show All" list feature, similar to what is demonstrated in this example: https://datatables.net/examples/advanced_init/length_menu.html I need assistanc ...

javascriptjquerycssdatatables

Exploring the Differences Between NPM Jquery on the Client Side and Server

I'm still getting the hang of node and npm, so this question is more theoretical in nature. Recently, I decided to incorporate jQuery into my website by running npm install jquery, which placed a node_modules directory in my webpage's root along ...

javascriptjquerynpm

Issue with jQuery AJAX call: When submitting an HTML form, control is not being returned to the calling

I am facing an issue with my HTML form where it is loaded correctly into the DOM through a jQuery ajax call. The problem arises when I submit the form data to a PHP module using another jQuery ajax call. Even though the network traffic shows that the form ...

javascriptphpjqueryhtmlajax

What is the best way to display "No results found" in Mat-select-autocomplete?

I am working with the mat-select-autocomplete for a multiselect dropdown. When searching for values that are not in the list, I want to display a message saying "No results found". Can someone please help me achieve this? Link to Code ...

javascriptangularnpmmat-select

Revise the calculation output when a specific input is missing

As I work on creating a basic web page for computing values based on selected options, I've encountered an issue with the calculation process. The result does not immediately appear; instead, I have to input a value like 0 and then delete it in order ...

javascriptjquerycalculation

Activating the onclick function to open a tab and automatically position the cursor inside a textfield

I have a requirement to automatically place the cursor on a specific field whenever a rich tab is navigated to. I attempted using onclick and onlabelclick on the richTab, but it did not work as expected. Then, I tried utilizing ontabenter, which called my ...

javajavascriptjqueryhtmljsf

Obtaining the MasterTableView Edit Form within a Radgrid to acquire a reference to a textbox

Can anyone help me with two things, please? I am struggling to access the currently edited existing row in the Radgrid and also the index of the Edit form when attempting to add a new record to the table. function OnClientSelectedIndexChanged(sen ...

javascriptasp.netajaxtelerikradgrid

Dealing with CORS policy challenge

I am encountering an issue with Access to XMLHttpRequest at 'http://demo.equalinfotech.com/Iadiva/images/product/1634623781ladiva_barbara_01.glb' from origin 'http://localhost:8100' being blocked by CORS policy due to the absence of the ...

javascriptphpangularcodeigniterionic-framework

Upgrading from Sequelize V5 to V6: TypeScript bug - Property 'x' is not recognized in type 'y'

Updating from sequelize 5.x.x to 6.x.x has caused some issues for me. In version 5, everything was working fine but after the upgrade, I started facing TypeScript errors with properties generated via associations when trying to use objects from the include ...

javascriptnode.jstypescriptsequelize.js

There seems to be an issue with the location.href function in the server-side code of

I'm encountering an issue in the code below where I am attempting to redirect to the login page, but it seems to not be functioning as expected. app.get('/current-pass', (req, res) => { res.sendFile(path.join(staticPath, "currentPass ...

javascripthtmlnode.jsfirebasenpm

Creating an environment variable using the package.json script

I'm trying to set the process.env.ENV variable as either TEST or null using a script in my package.json file. The command below is not working when I run it through package.json (though it works fine when directly executed in cmd). script { "star ...

javascriptnode.jsnpmpackage.json

`Using top-level await in a module can interfere with the firing of the `onload` event

It seems that the load event is not triggering when I use await for an IndexedDB opening at the top level within an indirectly loaded module. Interestingly, if I remove the await, the load handler works as expected. Similarly, replacing the openDB call wi ...

javascriptfirefoxasync-awaitindexeddb

How do I retain the user's color choice using jQuery cookies for future visits?

I've created a jQuery color picker that allows users to save their color selection with just one click. You can see the color picker in action here: http://prntscr.com/7rnafa . To handle the saving of color selections, I'm using a helpful jQuery ...

javascriptjquerycookies

Download function in Express.JS failing to retrieve file

I have been working on a Node.JS server using Express to generate and download PDFs based on user input. Previously, I used the <form action=""> method to call my API, but switched to Axios due to Netlify not supporting NuxtAPI. The program ...

javascriptnode.jsexpressnuxt.js

Ways to stop VoiceOver from selecting the background content when a modal is open

Is there a way to prevent VoiceOver from reading the content behind a modal? I tried using aria-modal=true, but it seems VoiceOver does not support this feature by default like NVDA and JAWS do. I found more information about this on . According to the in ...

javascripthtmlaccessibilitywai-ariavoiceover