[카테고리:] 미분류

작성일자

원하는 매쉬에 대한 에니메이션 ZoomIn 함수

먼저 사용하는 함수는 다음과 같습니다. (에니메이션을 위하 GSAP 라이브러리를 사용하였음)

_zoomFit(object3D, viewMode, bFront, viewAngle) {
    const box = new THREE.Box3().setFromObject(object3D);
    const sizeBox = box.getSize(new THREE.Vector3()).length();
    const centerBox = box.getCenter(new THREE.Vector3());
    
    const offset = new THREE.Vector3(viewMode==="X"?1:0, viewMode==="Y"?1:0, viewMode==="Z"?1:0);
    if(!bFront) offset.negate();
    offset.applyAxisAngle(new THREE.Vector3(1,0,0), THREE.Math.degToRad(viewAngle));

    const newPosition = new THREE.Vector3().copy(centerBox).add(offset);
    const halfSizeModel = sizeBox * 0.5;
    const halfFov = THREE.Math.degToRad(this._camera.fov * .5);
    const distance = halfSizeModel / Math.tan(halfFov);
    const direction = (new THREE.Vector3()).subVectors(newPosition, centerBox).normalize();
    newPosition.copy(direction.multiplyScalar(distance).add(centerBox));

    const oldPosition = this._camera.position.clone();
    gsap.to(this._camera.position, { duration: 0.5, x: newPosition.x, y: newPosition.y, z: newPosition.z});

    // camera.lookAt(centerBox.x, centerBox.y, centerBox.z); // OrbitControls를 사용하지 않은 경우
    // this._controls.target.copy(centerBox); // OrbitControls를 사용하고 있는 경우
    gsap.to(this._controls.target, { duration: 0.5,  
        x: centerBox.x, y: centerBox.y, z: centerBox.z});        
}

사용은 줌인 대상을 마우스로 클릭해 선택한다고 할때.. 먼저 RayCaster 객체를 하나 정의하구요.

_setupPicking() {
    const raycaster = new THREE.Raycaster();
    this._divContainer.addEventListener("click", this._onClick.bind(this));
    this._raycaster = raycaster;
}

클릭 이벤트인 _onClick은 다음과 같습니다.

_onClick(event) {
    if(!event.ctrlKey) return false;
    const width = this._divContainer.clientWidth;
    const height = this._divContainer.clientHeight;
    const xy = {x: (event.offsetX / width) * 2 - 1, y: -(event.offsetY / height) * 2 + 1};
    this._raycaster.setFromCamera(xy, this._camera);
    const targets = this._raycaster.intersectObjects(this._scene.children);
    if(targets.length > 0) {
        const mesh = targets[0].object;
        this._zoomFit(mesh, "Y", true, 50);
    }
}

이 애니메이션 ZoomIn 기능을 이용해 만든 단위 기능에 대한 예제 영상은 다음과 같습니다.

작성일자

분석의 핵심은 시각화다.

먼저 이 글은 사이토 고키의 세번째 딥러닝 서적인 Deep Learning from Scratch에 대한 내용(p225)의 코드의 변형된 내용을 언급하고 있습니다. 이 책은 텐서플로나 파이토치 자체를 구현하기 위한 핵심 내용을 다루고 있습니다. 이 글은 이 책에서 다루는 내용 중 역전파에 대한 시각화를 보여주는 코드를 토대로 어떤 수식에 대한 역전파를 통해 미분값을 계산하는데 수행되는 계산 흐름을 시각화하는 내용이며 시각화에 대한 중요성을 언급합니다.

sin 함수의 미분은 해석적으로 볼 때 cos입니다. 다른 방법으로 테일러 급수를 이용해서도 미분값을 구할 수 있고 코드는 다음과 같습니다.

def my_sin(x, threshold=0.00001):
    y = 0
    for i in range(100000):
        c = (-1) ** i / math.factorial(2 * i + 1)
        c = Variable(np.array(c))
        c.name = "c"
        t = c * x ** (2 * i + 1)
        y = y + t
        if abs(t.data) < threshold:
            break
    return y

위의 sin 값을 얻기 위한 함수를 실행하고, 미분값을 얻기 위한 코드는 다음과 같습니다.

x = Variable(np.array(np.pi/4), "x")  
y = my_sin(x)
y.name = "y"
y.backward()

print(y.data)
print(x.grad)

plot_dot_graph(y, verbose=False, to_file="diagram.svg")

위의 코드가 실행되면 PI/4에 대한 sin 값과 PI/4에 대한 sin 미분값이 얻어집니다. 그리고 미분값을 얻기 위해 계산된 처리 과정이 다음처럼 diagram.svg으로 시각화됩니다.

테일러 급수를 통한 sin 값을 얻기 위한 실제 계산의 흐름은 위의 시각화를 통해 좀 더 이해할 수 있습니다.

시각화는 이처럼 무언가를 좀 더 이해하고, 이러한 과정을 통해 더 깊고 정확하게 이해할 수 있는 기회를 제공합니다. 또한 이러한 이해를 통해 더 나은 방법을 찾을 수 있는 최적화와 그 다음 단계로 나아갈 수 있는 입구를 마련해 줍니다. 분석은 어떤 복잡한 현상을 보다 쉽게 이해하기 위해 작은 것들로 나눠 풀어 놓는 작업이라고 할 때 분석에서 매우 중요한 핵심 도구는 시각화입니다. 시각화가 되지 못한 분석은 타인을 이해 시키기도 힘들 뿐더러 과연 그 분석이 정확히 이뤄졌는지도 확인하기 어렵기 때문입니다.