나는 metaballs이 매우 매력적이라는 것을 발견했다. 순수한 형상이 서로 융합되고 변형되어 이상한 점성 결과가 생겼다.이렇게 간단한 생각이지만, 나는 어떻게 아주 긴 시간 안에 그것을 실현할 수 있는지 모르겠다.
나는 canva.com 사이트에서 이 원구를 사용하는 멋진 상호작용 갤러리를 본 것을 기억한다.

캔바를 따라갈 때 갤러리가 작동하지 않는다는 것을 주의하십시오.com 직접 링크는 웹 archive 사이트에서 방문할 때 유효합니다.
이 글에서는 내가 이 공들을 통해 영감을 얻을 수 있는 한 가지 경로와 내가 그것을 어떻게 스스로 실현할 수 있는지, SVG 필터 두 개만 사용하는 방법을 여러분과 공유할 것이다.
만약 당신이 먼저 최종 결과를 보고 싶다면, 내 사이트의 놀이공원을 보십시오: https://garand.dev/projects/metaballs/

개시하다

뻔한 질문부터 시작해 봅시다. 무엇이 원구입니까?wikipedia의 정의가 명확하지 않습니다.

In computer graphics, metaballs are organic-looking n-dimensional isosurfaces, characterised by their ability to meld together when in close proximity to create single, contiguous objects.

요컨대 변형구는 물방울로 서로의 어떤 흡인력을 느낄 수 있고 서로 다가갈 때 하나의 실체로 융합될 수 있다.

1-FabricJS 및 형상 연산

이 섹션을 건너뛰고 최종 해결 방안으로 바로 들어가려면 here!
나의 첫 번째 생각은 순수한 기하학적 방법을 사용하는 것이다. 영감은 illustrator 플러그인this에서 나온다. 두 개의 반점(a와 B)은 하나의 직사각형(E)으로 교차할 수 있다. 그리고 나는 두 개의 동그라미(C와 D)를 빼서 반점 모양의 느낌을 만들 수 있다!

나는 얼마 전에 이 기능을 실현했다.FabricJS를 사용하면 놀이공원here(source code)을 찾을 수 있다.그것은 확실히 괜찮아 보인다!

프레임 사이에 완전히 업데이트되지 않았을 때, 너는 다른 부분을 볼 수 있는데, 나는 이것이 매우 재미있다고 생각한다.

하지만 그것도 나름대로의 문제가 있다.

실적이 지수 증가

모든 요소를 비교하고 이웃을 위해 다리를 만들어야 하기 때문에 그 규모는 다른 방법만큼 크지 않다.

연결과 분리 사이에 중간 입장이 없음

공을 서로 접촉시킬 수 있는 자성의 흡인력을 만드는 깨끗한 방법은 없다. 이것은 내가 절대로 원하는 것이다.

원형 또는 타원형

에만 적용

여러 번 부딪혔을 때 잘 처리되지 않았다

변형구가 소수의 다른 사람에게 접근할 때, 모든 다리는 서로 독립되어 있으며, 그것들이 중첩될 때 이상한 결과가 발생할 수 있다

그래서 나는 이런 방법을 포기하고 더 좋은 해결 방안을 찾았다.

구현 2

2년 후, 나는github에서의 낡은 실험을 통해 이 프로젝트를 찾았고, 다시 그것을 해결하기로 결정했지만, 이번에는 내가 첫 번째 버전에서 겪은 문제를 해결했다.
나는 웹플로우에서 this post를 찾았는데 그 중에서 blur와 contrast를 사용하여 그들의 반점을 실현했다. 먼저 반점 자체를 모호하게 한 다음에 밝기와 대비도를 높은 값으로 설정하여 불투명도가 낮은 구역을 제거하고 충분한 불투명도를 가진 구역의 가시성을 증가시켰다.

contrast 필터의 가장 큰 제한은 배경이 균일해야 하기 때문에 투명하거나 어떤 종류의 동적 착색도 지원하지 않는다는 것이다.이것들은 모두 내가 벗어나고 싶은 제한이다. 왜냐하면 나는 할 수 있기 때문이다.

출발하다.

이 새로운 지식을 고려하면 이 기술은 몇 가지 관건적인 절차가 있다.

모호원소

임계값보다 불투명도가 낮은 모든 객체의 불투명도를 0(으)로 설정합니다.이것을 뜯어라

임계값과 같거나 높은 불투명도를 가진 모든 객체의 불투명도를 1로 설정하여 완전히 표시합니다.

이러한 단계에서opacity는 서로 다른 층의 최종 불투명도를 가리키며, 이들alpha blended이 함께 있으면 원소층이 많을수록 색깔이 불투명해진다.

어렴풋하다

나는 첫 번째 단계부터 모호한 원소를 시작한다.이를 위해 나는 feGaussianBlur 필터를 사용했다.

<svg height="100%" width="100%">
    <defs>
        <filter id="gooify" width="400%" x="-150%" height="400%" y="-150%">
            <feGaussianBlur id="blurElement" in="SourceGraphic" stdDeviation="20" result="blur" />
        </filter>
    </defs>
    <g filter="url(#gooify)">
        <circle cx="200" cy="200" r="90" fill="red" />
        <circle cx="400" cy="200" r="90" fill="red" />
    </g>
</svg>

가장자리에 도달할 때 잘리지 않도록 필터의 폭과 높이를 모호하게 하기 위해 많은 공간을 추가했습니다.
예상대로 희미한 빨간색 동그라미를 만들었다!

불투명

다음 단계는 고체 배경이 필요 없는 상황에서 불투명도를 처리하는 것이다.
available filters를 확인한 후에 저는 feColorMatrix를 사용했습니다. 이것은 다른 채널에서 알파 데이터를 조작할 수 있습니다!
말하자면, 이것은 하나의 matrix 수조를 사용하는데, 본질적으로 2d 수조이며, 그 중에서 모든 값이 하나의 매개 변수를 제어한다.
총 4줄, 대표RGBA, 5열, RGBA마다 1열을 입력하고 하나는 추가 이동을 제어하는 데 사용된다.
좀 복잡하게 들리지만 이 예에서 가장 중요한 것은 두 개의 값, 마지막 두 개의 값이다. 이따가 내가 상세하게 설명할 것이다.
필요한 효과를 얻으려면 두 개의 값만 중요하다.

밑의 두 번째 값
이 값은 알파층(불투명도)을 그 값에 곱하여 모호한 이미지의 불투명도를 증가시킨다.

마지막 값
이 값은 덧셈을 통해 진행되는 최종 이동입니다. 값을 지정한 양과 덧셈

이 두 개의 값이 있으면, 우리는 높은 배율과 작은 마이너스 편이 값을 설정하여 불투명도 한도값을 시뮬레이션할 수 있다.
결과의 정확한 공식은 originalAlpha * multiplier + shift인데 그 중 하나shift 단위는 100%의 불투명도에 해당한다.
나는 이 두 값이 결과의 불투명도에 미치는 영향을 보여주기 위해 quick spreadsheet를 만들었다.

불투명도는 8자리 데이터이기 때문에 최대 값255이기 때문에 곱셈기로 사용하면 우리의 한도값에 완벽한 입도를 제공해야 한다.그리고 60%의 한도값에 대해 우리는 -153의 편이를 정의할 수 있다!

들어오는 그림을 바꾸지 않도록 Identity Matrix 부터 시작합시다.그런 다음 두 개의 수정자를 행렬에 추가하면 다음과 같은 명확한 결과를 얻을 수 있습니다.

<filter id="gooify" width="400%" x="-150%" height="400%" y="-150%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
                                                   0 1 0 0 0
                                                   0 0 1 0 0
                                                   0 0 0 255 -153" />
</filter>

이제 완전히 불투명하거나 완전히 투명한 픽셀만 있음을 주의하십시오.255의 곱셈기를 사용하면 모든 형태의 반점을 삭제하는 부작용이 발생할 수 있다anti aliasing.
약간의 매끄러움을 높이기 위해 나는 수량급의 값을 추가하여 곱셈을 25, 이동을 -15로 설정했다.

비록 교량의 일부 가장자리가 좀 모호하지만, 이것은 훨씬 매끄럽다.
나는 내가 조정을 통해 더 좋은 결과를 얻을 수 있을 것이라고 믿지만, 지금은 이미 충분하다.

상호작용

Metaballs를 가지고 있는 것은 좋지만, 우리가 그것들과 상호작용을 할 수 없다면 재미없다!
나는 아직 완전한 갤러리를 원하지 않지만, 간단한 마우스 드래그 제어부터 시작한다.
코드는 분명히 말해야 한다. 한 변수는 이동할 요소를 저장하고, 다른 변수는 원시적으로 클릭한 X와 Y의 편이와 이동원mousedown, mousemove과 mouseup 이벤트를 저장한다.
이상적인 경우에도 이동 이벤트touch[start|move|end]를 추가하지만 이 개념 검증에만 사용하려면 누르세요!

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

// Moving the circles using the mouse
let isMoving = false;
const offset = { x: 0, y: 0 };
$$("circle").forEach(circle => {
    circle.addEventListener("mousedown", (e) => {
        isMoving = circle;
        offset.x = e.clientX - circle.attributes.cx.value;
        offset.y = e.clientY - circle.attributes.cy.value;
    })
});
const svg = $("svg");
svg.addEventListener("mousemove", (e) => {
    if (!isMoving) return;
    const newPosition = {
        x: e.clientX - offset.x,
        y: e.clientY - offset.y
    }
    isMoving.setAttribute('cx', newPosition.x);
    isMoving.setAttribute('cy', newPosition.y);
})
svg.addEventListener("mouseup", () => isMoving = false)

이 값을 실시간으로 처리하기 위해 몇 개의 슬라이더를 추가했습니다. 관심이 있으면 언제든지 원본 코드를 보고 실현할 수 있습니다.
Here is the live playground 관심 있는 사람에게!

요약

Metaball은 매력적인 대상 유형입니다. 현재 이 두 개의 SVG 필터 덕분에 어디에나 추가할 수 있습니다.
필터를 사용하면 처음 시도한 형상 방법과 달리 다음과 같은 여러 가지 이점이 있습니다.

모든 모양을 지원합니다. 흐려지면

모양이 약간 바뀐다는 것을 기억하세요.

성능: 개체 수를 늘리는 데 드는 비용이 매우 적습니다!
항목마다 고스 모호함과 색 매트릭스 필터를 한 번만 실행하면 지수 증가

가 훨씬 아니다.

부분 전교를 지탱하여 자성효과가 발생한다

웹플로우가 사용하는 대비도와 달리 투명한 배경을 지원하며 반점의 색을 혼합할 수 있습니다!
현재, 이 Metaball들은 여전히 하나의 개념적 증명일 뿐이지만, 나는 그것들을 이용하여 몇 가지 재미있는 프로젝트를 하고 싶다. 예를 들어 용암등과 Canva와 유사한 갤러리이다.blur와 colormatrix 필터를 사용하여 Metaball을 만드는 방법을 처음 찾은 사람은 아니라는 것을 기억하세요.이 기술과 관련된 다른 프로젝트를 연구할 때 크리스 가논의this post와 루카스 베버의this one가 용암등을 만드는 메뉴에 5년이 넘는 역사를 가지고 있음을 발견했습니다!
이런 일들은 우리 모두가 어느 순간에 바퀴를 재발명할 운명이라는 것을 일깨워 주었다. 위대한 두뇌는 모두 이렇게 생각한다.