Shader Material in THREEJS has been replaced with new settings

I am facing an issue with my shader material setup. I have a shader material that is working properly and has a texture attached to it.

Now, I want to create two meshes using this shader material but with different textures for each mesh. However, when I try to render both meshes in the scene, the material of the first object somehow gets overwritten and ends up using the same material as the second object.

    var dataShader = VJS.shaders.data;
    var uniforms = dataShader.parameters.uniforms;
    // Setting texture size (currently 2048)
    uniforms.uTextureSize.value = stack._textureSize;
    // Array of 16 textures
    uniforms.uTextureContainer.value = textures;
    // Texture dimensions
    uniforms.uDataDimensions.value = new THREE.Vector3(stack._columns, stack._rows, stack._nbFrames);
    // World to model transformation
    uniforms.uWorldToData.value = stack._lps2IJK; 

    var sliceMaterial = new THREE.ShaderMaterial({
      'side': THREE.DoubleSide,
      'transparency': true,
      'uniforms': uniforms,
      'vertexShader': dataShader.parameters.vertexShader,
      'fragmentShader': dataShader.parameters.fragmentShader,
    });

    var slice = new THREE.Mesh(sliceGeometry, sliceMaterial);
    // Adding the mesh object to the scene
    this.add(slice);

Is this behavior expected? If so, is there a workaround to prevent the material overwriting issue?

Thank you.

Answer №1

To achieve this, it is necessary to generate two separate instances of the material while utilizing the identical shader, and then allocate the appropriate texture/uniforms for each instance.

update

Transferring uniforms can be a bit complex. It appears that the reference may be lost when duplicating the material, so caution is advised in how you handle them.

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

Embarking on the GSAP journey

I'm attempting my first animation using GSAP, but no matter what I try, nothing seems to be working. I've even tried using example code without success. Within my PHP file, I have the following code snippet: <head> <script src="https:/ ...

What is the best way to download an updated social media post for a Django user?

Objective A user has the ability to edit their own posts by clicking on the edit button, making edits, and then saving the changes. Issue Editing a social media post does not result in the changes being saved. Overview Create a new post similar to how ...

Tips for troubleshooting a Vue application using Google Chrome debugger

Instead of relying on console.log, I want to start using the Chrome Developer Debug Tool more frequently. I recently came across a helpful article about debugging in general (such as setting breakpoints and executing line by line) here. However, when atte ...

Comparing "this" and $scope within the context of Angular

I have gone through similar questions and their answers, but I am still struggling to understand this. Any assistance on this would be greatly appreciated. The code snippet below functions correctly. However, if I substitute $scope with this before the bi ...

Tips for achieving a seamless background texture alignment around a sphere with Three.js

https://i.sstatic.net/9SyRc.jpg I'm facing an issue with setting a texture on a large sphere in my code. Despite trying different wrapping options, the background still appears not to be smooth due to a visible seam where the two parts of the texture ...

Validation of Button Groups and Automatic Disabling after Initial Click with HTML, CSS, and JavaScript

Criteria: Upon clicking a button from the selection of four buttons, all other buttons should become disabled except for the Next button. An alert window must appear when the Next button is clicked without selecting any other buttons, preventing navigatio ...

Step-by-step guide on programmatically activating a radio button

I am working with a radio button and input field. I need the ability to programmatically toggle the radio button so that when this.iAreaOfCoverageForThresholdPasser.average-height is set to true, the radio button appears highlighted. Snippet of HTML: < ...

What is the best method for finding a button with an empty class name?

To access the search button on this page, follow this link: . Despite trying dr.findElement(By.cssSelector("button.button.cw-icon")), I was unable to locate the button labeled "搜索". Any suggestions on how to successfully locate it? ...

Ways to retrieve base64 encoded information from an image within an HTML document

On my registration form, users have the option to select an avatar from 2 choices: Select a default avatar Upload their own custom avatar This is how I have implemented it in my HTML page. <img id="preview" src="img/default_1.png"> The chosen av ...

Every time I attempt to submit data, I encounter a 404 error with AXIOS

Struggling to figure out why I keep encountering an error when trying to send form data from my website to the database using axios? Despite attempting various solutions, the problem persists. Although I can successfully retrieve manually entered data from ...

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

Utilizing Angular 5: Enhancing ngFor with a Pipe and a Click Event

Iterating through an array of objects using *ngFor, I apply various filters via pipes to manipulate the resulting list. One of these pipes relies on a user input from a search field. Upon clicking on one of the ngFor elements, the corresponding object is p ...

Having trouble uploading images using ReactJS on the web platform

I am currently in the process of developing a portfolio website using react js, but I'm experiencing an issue where the image I intended to display is not showing up on the live site. Despite thoroughly checking my code, I can't seem to identify ...

sending a updated variable to ajax after it has been modified within a function

Apologies if my question is not clear as I am new to this. I have a scenario with 3 drop-down select boxes. The first box allows the selection of width, the second for length, and the third for height. Each of these has pre-defined values. When a value is ...

Storing a class method in a variable: A guide for JavaScript developers

I am currently working with a mysql connection object called db. db comes equipped with a useful method called query which can be used to execute sql statements For example: db.query('SELECT * FROM user',[], callback) To prevent having to type ...

Looking to prevent printing and saving a webpage directly from the file menu using JQUERY or JavaScript

I am in need of assistance to find a code that can disable the ability to print and save a webpage using JQUERY or JAVASCRIPT ...

Unable to establish connection to MongoHQ using Node.js connection URL

I have successfully set up and run a Node.js app using my local development MongoDB with the following settings and code: var MongoDB = require('mongodb').Db; var Server = require('mongodb').Server; var dbPort = 27017; v ...

Utilizing Socket.io within secured routes

I'm currently working on a web application that involves user authorization and the ability to chat with others. I've encountered an issue where, despite including e.preventDefault() in my JavaScript code for the submit button, the page still ref ...

Comprehend the angular and in a confined scope and its brackets

I have been wondering why I have to use double brackets ()() when passing a method from an outer scope to a directive with an isolated scope using '&'. It seems like the function is returned with callThat() and then I need to call it with anothe ...

Material UI is failing to apply its styles

I tried customizing the default theme provided by Material UI, but unfortunately, the styles are not applying. Can anyone help me with this issue? In My Header.js file, I faced an issue where the customized style was not being applied as expected. const u ...