CODEWITHSUNDEEP
javascriptthree.jstextureswebglshader
Nicolas
Nicolas

Reputation: 2281

THREEJS Shader Material overwritten

I have a shader material that works as expected. This shader has a texture attached.

I want to create 2 meshes using this shader material, with a different texture for each mesh.

Problem is that if I try to render my 2 meshes in the scene, the first object's material got overwritten somehow and uses the same material as the second object.

    var dataShader = VJS.shaders.data;
    var uniforms = dataShader.parameters.uniforms;
    // texture size (2048 for now)
    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
    uniforms.uWorldToData.value = stack._lps2IJK; //new THREE.Matrix4();

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

    var slice = new THREE.Mesh(sliceGeometry, sliceMaterial);
    // this is an Object3D that is added to the scene
    this.add(slice);

Does it make sense? Is it the expected behavior? If so, is there a good way to bypass this issue?

Thanks

enter image description here

Upvotes: 0

Views: 735

Answers (1)

pailhead
pailhead

Reputation: 5431

You need to create two instances of the material, using the same shader, and assign the appropriate texture/uniforms for each.

edit

Copying uniforms is a bit tricky. You lose the reference i think when you clone the material, so you might want to be careful how you manage them.

Upvotes: 1

Related Questions