Struggling to incorporate a map into a point material with a colored texture in Three.js. Attempted using additive blending and the map attribute to create a rounded point rather than a square one, but it results in the texture color blending with the white color of the point. Is there a more effective way to blend the two elements to maintain the particle shape and texture color?
https://i.sstatic.net/qyUfT.png This is particle.png
let pointShape = new THREE.TextureLoader().load("./models/particle.png");
m = new THREE.PointsMaterial({
size: pointSize,
map: pointShape,
blending: THREE.AdditiveBlending,
depthTest: false,
opacity: 0.9,
onBeforeCompile: shader => {
shader.uniforms.tex = {value: new THREE.TextureLoader().load("./textures/earthlores.jpg")};
shader.vertexShader = `
varying vec2 vUv;
${shader.vertexShader}
`.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
vUv = uv;
`
);
//console.log(shader.vertexShader);
shader.fragmentShader = `
uniform sampler2D tex;
varying vec2 vUv;
${shader.fragmentShader}
`.replace(
`vec4 diffuseColor = vec4( diffuse, opacity );`,
`
vec3 col = texture2D(tex, vUv).rgb;
col *= diffuse;
vec4 diffuseColor = vec4( col, opacity );`
);
//console.log(shader.fragmentShader);
}
});The current outcome of the code presents a pale, colorless globe. https://i.sstatic.net/kLZwQ.jpg
Disabling additive blending restores the correct color but loses the desired point shape.
https://i.sstatic.net/EAX80.png
Is there a need to adjust the blending mode via custom blending, modify the shader, or perhaps explore another overlooked approach? Previous attempts with different blend modes have proven ineffective, and grasping custom blending remains a challenge. Any assistance or guidance provided would be greatly appreciated. Thank you!