Три. ⇐ Javascript

[Anonymous]

Я имею систему частиц в трех.js 0,173.0 с мягкими краями частиц, и когда Z -сор происходит, непрозрачные пиксели перезаписывают сцену, а не в дополнение к вершине, когда порядок частицы выше, чем в первоначальном месте в порядке лирирования. Я попробовал пару вещей, двойной проход, разные материалы ... но проблема, казалось, сохранилась. Я сделал код, демонстрирующий проблему. Please check it out and leave a comment if you have any ideas how to resolve it.
Codepen example



let camera, scene, renderer, material, points;

const vertexShader = `
attribute float u_id;
varying vec2 vUv;
varying vec3 vColor;

void main() {
vec3 newPosition = position;

//
// THE CIRCLES HAVE TO BE POSITIONED IN THE SHADER
//

if (u_id == 0.0) {
newPosition = vec3(-0.6, 0.0, 1.2);
vColor = vec3(1.0, 0.0, 0.0);
}
if (u_id == 1.0) {
newPosition = vec3(0.0, 0.0, 1.0);
vColor = vec3(0.0, 1.0, 0.0);
}
if (u_id == 2.0) {
newPosition = vec3(0.6, 0.0, 1.1);
vColor = vec3(0.0, 0.0, 1.0);
}
vUv = newPosition.xy;
gl_PointSize = 200.0; // Control the circle size
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
`;

const fragmentShader = `
precision mediump float;
varying vec2 vUv;
varying vec3 vColor;

void main() {
vec2 uv = gl_PointCoord - vec2(0.5); // Center the UVs in the circle
float dist = length(uv);
float alpha = smoothstep(0.5, 0.1, dist); // Smooth fade at edges

vec3 color = vColor; //vec3(1.0, 0.0, 0.0); // Red color

if (dist > 0.5) discard; // Make the circle smooth
gl_FragColor = vec4(color, alpha);
}
`;

const VERTEX_COUNT = 3;

// Initial vertex positions are [0, 0, 0]
const getInitialVertices = () => {
const vertices = new Float32Array(VERTEX_COUNT * 3);
return vertices;
};

// Generate vertex IDs
const getVertexIds = () => {
const ids = new Float32Array(VERTEX_COUNT);
for (let i = 0; i < VERTEX_COUNT; i++) {
ids = i;
}
return ids;
};

function init() {
scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(
50,
window.innerWidth / window.innerHeight,
1,
10000
);
camera.position.z = 4;
scene.add(camera);

const uniforms = {};

const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(getInitialVertices(), 3));
geometry.setAttribute("u_id", new THREE.BufferAttribute(getVertexIds(), 1));

material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
transparent: true,
//
// THE OPACITY CUT OCCURES WHEN DEPTH TEST IS ON
//
depthTest: true,
});

points = new THREE.Points(geometry, material);
scene.add(points);

renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}

function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}

window.addEventListener("load", () => {
init();
animate();
});```



Подробнее здесь: https://stackoverflow.com/questions/794 ... -depthtest