What is the location where Three.js establishes the default shaders for materials?

I've been attempting to locate the exact location where the fragment and vertex shaders are being assigned after creating a Three.js material, but haven't had much success. Using the ParticleSystemMaterial, I have

material = new THREE.ParticleSystemMaterial();
console.log(material);

When inspecting the developer console in Firefox, I can see that fragmentShader and vertexShader are both set with default values:

However, I am curious as to where these values are originating from. While examining the source code in ParticleSystemMaterial.js and Material.js, I have not found any explicit statements indicating where these shaders are being assigned. My assumption is that they are being retrieved at some point from ShaderLib.js, but there is no evidence of this in either of the source codes.

Does anyone have any insights on this?

javascriptthree.jsshader

Answer №1

The shader used for ParticleSystemMaterial is 

THREE.ShaderLib[ 'particle_basic' ]
. You can locate this shader in the files ShaderLib.js and ShaderChunk.js.

If you are looking for the material-to-shader assignments, check out the method WebGLRenderer.initMaterial() in the file WebGLRenderer.js.

Version: three.js. r.67

Important note: In the upcoming version r.68dev, ParticleSystem will be renamed to PointCloud, and ParticleSystemMaterial will be known as PointCloudMaterial.

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

Using the v-for directive to loop through a list of items and adding a v-autocomplete with

I am facing a challenge with using a dropdown menu within a loop to select the region for each office in my list of offices. The problem lies in passing the index value to the updateRegion method so that I can correctly associate the selected region with t ...

javascriptvue.jsvuetify.js

Updating a particular column in a table with Jquery

In this table : $('#listview-table tr').each(function() { var status_id = $(this).find(".listViewEntryValue").$('[data-name~="cf_1525"]').text(); alert(status_id); }); <table id="listview-table" class="table listv ...

javascriptjquery

Utilize npm to incorporate external JavaScript libraries into Meteor 1.3

Trying to integrate the OpenSeadragon library into my Meteor app has been a bit challenging. After successfully installing it via npm using meteor npm install openseadragon, I found that the OpenSeadragon docs only offer an example using the script tag. T ...

javascriptnode.jsmeteornpmecmascript-6

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Encountering an issue while working with Next.js 13: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <html>. Every time I attempt to r ...

javascripthtmlreactjsnext.js

Angular sends a blank object to the server

Utilizing angular along with spring boot 2 has presented a challenge for me. Each time I attempt to send a POST request, spring validation messages pop up indicating that my fields cannot be empty or null. Here is the form structure of my POST request: < ...

javascriptnode.jsangularintellij-idea

Node.js user attempting to upload and handle files without any external libraries, solely relying on traditional JavaScript and HTML techniques

Previously, my Node.js code seamlessly integrated with any javascript+HTML project I worked on, leading me to believe there was a direct correlation between Node.js and vanilla Javascript+HTML. However, this misconception was shattered when attempting to u ...

javascripthtmlnode.jsfileupload

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

asp.netjavascripthtmlcssvisual-studio-2008

Manipulate state in parent component from child component using onClick function with React hooks

Hello, I am facing a challenge trying to store data from a modal (child function) within the main (parent) function. Depending on which button is clicked, the modal loads specific HTML content (all buttons perform the same action). export default function ...

javascriptreactjslocal-storagereact-hooksuse-state

Blending ASP.NET Core 2.0 Razor with Angular 4 for a Dynamic Web Experience

I am currently running an application on ASP.NET Core 2.0 with the Razor Engine (.cshtml) and I am interested in integrating Angular 4 to improve data binding from AJAX calls, moving away from traditional jQuery methods. What are the necessary steps I need ...

javascriptangulartypescriptasp.net-core-mvcrazorengine

Transferring information to the controller and refreshing the interface (Single-page design)

I'm stuck on a personal project and could really use some help. If anyone has any feedback, it would be greatly appreciated. Thanks in advance. In my index.php file, I have a div with the id main-container. Inside this container, there are two separa ...

javascriptphpjqueryhtmlajax

Attempting to dynamically add an image to a template snippet

Struggling with inserting images dynamically from database paths in templates. How can I display them when a user clicks the Show More button on an expense page? New to templates and unsure about syntax. Show More Button displayed in the HTML template sho ...

javascripthtmldeno

How to optimize updating object properties with setState?

Is there a more efficient way to rewrite this code? For example, would using setState(ContentStore.getAll()) achieve the same outcome? I believe this approach appears overly cluttered and any method to simplify the code for readability would be greatly app ...

javascriptreactjsecmascript-6

What strategies can I use to keep an element in place while implementing parallax scrolling?

Looking for some assistance with my Codepen project. I am attempting to replicate a layout similar to this BBC article design from the past, but hitting a roadblock with getting my image to be position fixed based on scrolling. I believe that if I can suc ...

javascriptjqueryparallax

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

javascriptjqueryhtml

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...

javascriptangulartypescript

I designed my higher-order component to allow for dual invocations. How can I integrate Redux within this framework?

I have implemented my higher-order component (HOC) in such a way that it can be invoked twice, emphasizing the concept of "functional programming". However, I am facing challenges in connecting Redux to access state and certain functions. I would greatly ...

javascriptreactjsreact-reduxhigher-order-functionshigher-order-components

Issue with Tabulator: The top and bottom calculations do not shift position when a column is toggled. Seeking a solution to toggle a column and refresh the table without losing the current

My main objective is to toggle the visibility of toggles while maintaining consistent formatting. However, I currently face an issue where using a filter achieves this but results in losing the current scroll position of the tabulator, which is not accepta ...

javascriptjquerytabulator

The process of authenticating route parameters in Nuxt

I'm having trouble validating route parameters in my page component using the following code: async validate({ params, store }) { await store.dispatch(types.VALIDATE_PARAMS_ASYNC, params.id) } And here's the corresponding code in the store: ...

javascriptvue.jsasync-awaitnuxt.js

The cookies() function in NextJS triggers a page refresh, while trpc consistently fetches the entire route

Is it expected for a cookies().set() function call to trigger a full page refresh in the new Next 14 version? I have a chart component that fetches new data at every interval change, which was working fine when fetching the data server-side. However, since ...

javascriptreactjsnext.jsnext.js13trpc

Retrieve the body's coordinates when dragging an element using the jQuery UI library

How can I obtain the coordinates of a dragged div upon drag and drop action, including left, right, and top positions? Additionally, how do I then use Ajax to post these coordinates? An example link can be found at jsfiddle.net/qPw92 <html> &l ...

javascriptjqueryajaxdrag-and-dropjquery-ui-draggable