Here is my code:
scene.background = new THREE.Color(0x003300);
var geom = new THREE.SphereBufferGeometry(50, 10, 10);
const mat_P = new THREE.PointsMaterial({
color: 0xff0000,
opacity: 0.3,
size: 10,
transparent: true,
fog: false,
});
const mat_M = new THREE.MeshBasicMaterial({
color: 0xff0000,
opacity: 0.3,
transparent: true,
fog: false,
});
var sphere_P = new THREE.Points(geom, mat_P);
sphere_P.position.set(-70, 0, 0);
scene.add(sphere_P);
var sphere_M = new THREE.Mesh(geom, mat_M);
sphere_M.position.set(70, 0, 0);
scene.add(sphere_M);
And here is the result (with drawings of top of it):
For the mesh sphere it makes sense: I’m blending src = [255,0,0,0.3] with destination [0,51,0,1.0] and I get [77, 36, 0] as per
_gl.blendEquation(_gl.FUNC_ADD);
_gl.blendFuncSeparate(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA);
But the Points object color is [225,6,0], how this one comes into being?
I can even use Mesh with PointsMaterial like so:
var sphere_M = new THREE.Mesh(geom, mat_P);
sphere_M.position.set(70, 0, 0);
scene.add(sphere_M);
and still get the sphere on the right and the color is correct, but PointMaterial with Points objects - I get strange result.