Система частиц Threejs с соединительными линиями. Логика программирования?
Основываясь на предыдущем вопросе, который я недавно опубликовал: как создать линии между соседними частицами в ThreeJS?
Мне удалось создать отдельные линии, соединяющие соседние частицы. Тем не менее, линии рисуются дважды из-за логики системы частиц. Это из-за того, как работала оригинальная 2D система частиц: https://awingit.github.io/particles/
Это также рисует линии дважды. Для каждой пары частиц, соединяющих линию, линия рисуется.
Я не думаю, что это идеально для производительности. Как бы я нарисовал линию только один раз для каждой точки соединения?
PS Вот именно тот эффект, которого я хотел бы достичь, но не могу понять смысл кода: http://freelance-html-developer.com/clock/
Я хотел бы понять основную логику.
ОБНОВИТЬ:
Я создал jsfiddle с моим прогрессом.
var canvas, canvasDom, ctx, scene, renderer, camera, controls, geocoder, deviceOrientation = false;
var width = 800,
height = 600;
var particleCount = 20;
var pMaterial = new THREE.PointsMaterial({
color: 0x000000,
size: 0.5,
blending: THREE.AdditiveBlending,
//depthTest: false,
//transparent: true
});
var particles = new THREE.Geometry;
var particleSystem;
var line;
var lines = {};
var lineGroup = new THREE.Group();
var lineMaterial = new THREE.LineBasicMaterial({
color: 0x000000,
linewidth: 1
});
var clock = new THREE.Clock();
var maxDistance = 15;
function init() {
canvasDom = document.getElementById('canvas');
setupStage();
setupRenderer();
setupCamera();
setupControls();
setupLights();
clock.start();
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
createParticles();
scene.add(lineGroup);
animate();
}
function setupStage() {
scene = new THREE.Scene();
}
function setupRenderer() {
renderer = new THREE.WebGLRenderer({
canvas: canvasDom,
logarithmicDepthBuffer: true
});
renderer.setSize(width, height);
renderer.setClearColor(0xfff6e6);
}
function setupCamera() {
camera = new THREE.PerspectiveCamera(70, width / height, 1, 10000);
camera.position.set(0, 0, -60);
}
function setupControls() {
if (deviceOrientation) {
controls = new THREE.DeviceOrientationControls(camera);
controls.connect();
} else {
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(0, 0, 0);
}
}
function setupLights() {
var light1 = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
var light2 = new THREE.PointLight(0xffffff, 1, 0);
light2.position.set(100, 200, 100);
scene.add(light1);
scene.add(light2);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
animateParticles();
updateLines();
render();
}
function render() {
renderer.render(scene, camera);
}
function onWindowResized(event) {
width = window.innerWidth;
height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
function createParticles() {
for (var i = 0; i < particleCount; i++) {
var pX = Math.random() * 50 - 25,
pY = Math.random() * 50 - 25,
pZ = Math.random() * 50 - 25,
particle = new THREE.Vector3(pX, pY, pZ);
particle.diff = Math.random() + 0.2;
particle.default = new THREE.Vector3(pX, pY, pZ);
particle.offset = new THREE.Vector3(0, 0, 0);
particle.velocity = {};
particle.velocity.y = particle.diff * 0.5;
particle.nodes = [];
particles.vertices.push(particle);
}
particleSystem = new THREE.Points(particles, pMaterial);
particleSystem.position.y = 0;
scene.add(particleSystem);
}
function animateParticles() {
var pCount = particleCount;
while (pCount--) {
var particle = particles.vertices[pCount];
var move = Math.sin(clock.getElapsedTime() * (1 * particle.diff)) / 4;
particle.offset.y += move * particle.velocity.y;
particle.y = particle.default.y + particle.offset.y;
detectCloseByPoints(particle);
}
particles.verticesNeedUpdate = true;
particleSystem.rotation.y += 0.01;
lineGroup.rotation.y += 0.01;
}
function updateLines() {
for (var _lineKey in lines) {
if (!lines.hasOwnProperty(_lineKey)) {
continue;
}
lines[_lineKey].geometry.verticesNeedUpdate = true;
}
}
function detectCloseByPoints(p) {
var _pCount = particleCount;
while (_pCount--) {
var _particle = particles.vertices[_pCount];
if (p !== _particle) {
var _distance = p.distanceTo(_particle);
var _connection = checkConnection(p, _particle);
if (_distance < maxDistance) {
if (!_connection) {
createLine(p, _particle);
}
} else if (_connection) {
removeLine(_connection);
}
}
}
}
function checkConnection(p1, p2) {
var _childNode, _parentNode;
_childNode = p1.nodes[particles.vertices.indexOf(p2)] || p2.nodes[particles.vertices.indexOf(p1)];
if (_childNode && _childNode !== undefined) {
_parentNode = (_childNode == p1) ? p2 : p1;
}
if (_parentNode && _parentNode !== undefined) {
return {
parent: _parentNode,
child: _childNode,
lineId: particles.vertices.indexOf(_parentNode) + '-' + particles.vertices.indexOf(_childNode)
};
} else {
return false;
}
}
function removeLine(_connection) {
// Could animate line out
var childIndex = particles.vertices.indexOf(_connection.child);
_connection.parent.nodes.splice(childIndex, 1);
deleteLine(_connection.lineId);
}
function deleteLine(_id) {
lineGroup.remove(lines[_id]);
delete lines[_id];
}
function addLine(points) {
var points = points || [new THREE.Vector3(Math.random() * 10, Math.random() * 10, Math.random() * 10), new THREE.Vector3(0, 0, 0)];
var _lineId = particles.vertices.indexOf(points[0]) + '-' + particles.vertices.indexOf(points[1]);
var lineGeom = new THREE.Geometry();
if (!lines[_lineId]) {
lineGeom.dynamic = true;
lineGeom.vertices.push(points[0]);
lineGeom.vertices.push(points[1]);
var curLine = new THREE.Line(lineGeom, lineMaterial);
curLine.touched = false;
lines[_lineId] = curLine;
lineGroup.add(curLine);
return curLine;
} else {
return false;
}
}
function createLine(p1, p2) {
p1.nodes[particles.vertices.indexOf(p2)] = p2;
addLine([p1, p2]);
}
$(document).ready(function() {
init();
});
Я действительно близок, но я не уверен, оптимизирован ли он. Кажется, что есть мерцающие линии, а иногда линия просто остается на месте.
Итак, вот мои мысли. Я нажал, что все, что мне нужно сделать, это сделать точки Vector3 линий равными точкам Vector3 соответствующих частиц. Мне просто нужно обновить каждую строку geometry.verticesNeedUpdate = true;
Кроме того, как я управляю линиями, я создаю уникальный идентификатор, используя индексы двух точек, например, линии ['8-2'] = линия
1 ответ
Проблема, которую вы на самом деле пытаетесь решить, состоит в том, что, просматривая свой список очков, вы удваиваете количество успешных матчей.
Пример:
Рассмотрим список точек, [A, B, C, D], Ваш цикл проверяет каждую точку против всех других точек. Для этого примера A а также C единственные точки достаточно близки, чтобы их можно было рассмотреть поблизости.
Во время первой итерации A против всего, вы обнаружите, что A а также C рядом, поэтому вы добавляете строку. Но когда вы делаете свою итерацию для CВы также обнаружите, что A находится поблизости Это вызывает вторую строку, которую вы хотите избежать.
Исправляя это:
Решение простое: не посещайте уже проверенные узлы. Это работает, потому что ответ distance from A to C ничем не отличается от distance from C to A,
Лучший способ сделать это - настроить индексирование для цикла проверки:
// (Note: This is example code, and won't "just work.")
for(var check = 0, checkLength = nodes.length; check < checkLength; ++check){
for(var against = check + 1, against < checkLength; ++against){
if(nodes[check].distanceTo(nodes[against]) < delta){
buildThatLine(nodes[check], nodes[against]);
}
}
}
Во внутреннем цикле индексация установлена на:
- Пропустить текущий узел
- Пропустить все узлы до текущего узла.
Это делается путем инициализации внутреннего индексирования внешним индексом + 1.
Предостережение:
Эта конкретная логика предполагает, что вы отбрасываете все свои строки для каждого кадра. Это не самый эффективный способ достижения эффекта, но я оставлю его в качестве упражнения для вас.