3D Photo Effect from 1 Image JavaScript Tutorial

안녕하세요 빨간색 스테이플러에 오신 것을 환영합니다

이 튜토리얼에서는 채널을 보여 드리겠습니다 javascript와 pixijs를 사용하여 한 장의 사진에서 3D 효과를 만드는 법 WebGL 라이브러리에서 확인해 봅시다 그래서 사진을 3 차원으로 변환하기 위해서는 다음과 같이 깊이 맵을 사용해야합니다 이름은지도가 3D의 각 픽셀의 깊이를 보여주는 이미지 파일이라고 이 예에서 볼 수 있듯이 세계는 화면에 가깝습니다

따라서 밝은 색은 차고의 나머지 부분은 그들의 색에 따라 더 어둡습니다 거리를 계산 한 다음 깊이 맵을 전달하여 최종 결과를 얻습니다 이건 내가 만든 이전 비디오와 같은 기술이야 물 파급 효과는 지금 우리의 채널에 대한 튜토리얼을 확인하십시오 이 튜토리얼에서는 pixi

js를 사용하여 2 차원 WebGL 라이브러리를 사용할 것입니다 원한다면 기본 WebGL을 사용하십시오 그러나 WebGL을 사용하면 훨씬 빠르고 쉽게 라이브러리는 최신 버전을 다운로드하고 페이지에 포함 시키십시오 pixijs 응용 프로그램을 만듭니다

이것은 pixijs를 사용하는 가장 빠른 방법입니다 현재 뷰포트를 해상도로 전달한 다음 추가 할 것입니다 HTML 페이지에서 브라우저가 캔버스 요소로 볼 것이며 여기에 장면에 추가 할 이미지를 이미지 URL에서 스프라이트를 만들어 보겠습니다 현재 뷰포트로 해상도를 설정하십시오

다음 스테이지를 추가하고 다음 단계는 깊이 맵을 생성하는 것입니다 일부는 변위 맵이나 높이 맵을 호출 할 것입니다 저는 Photoshop을 사용하여 먼저 원본 이미지를 연 다음 새 레이어를 만들어 다음과 같이 채 웁니다 검은 색으로 표시 한 다음 불투명도를 줄이면 원본 이미지가 간신히 보입니다 아래 가이드를 누른 다음 흰색 브러시를 선택하십시오

및 20 % 불투명도로 화면에 가장 가까운 이미지 영역을 그립니다 더 가까워 질수록 더 많이 강조 할 필요가 없습니다 100 % 정확하므로 경계와 약간의 세부 사항에 대해 걱정할 필요가 없습니다 결과를보기 위해 레이어의 불투명도를 조정합니다 초과 부분을 제거하고 완성 된 깊이 맵이지만 완벽한 작업이지만 다음 단계는 깊이 맵에서 스프라이트를 만드는 것입니다 무대에 추가 우리의 깊이 맵에서 변위 필터를 만들고 무대에 적용하십시오

이미지를 이동해야하기 때문에 3D 효과가 아직 표시되지 않습니다 마우스 이동은 마우스 이동 수신기를 추가하고 스케일을 적용하여 쉽게 수행 할 수 있습니다 우리는 마우스 위치에 따라 변위 필터를 빼야합니다 화면 크기의 절반으로 마우스 x 및 y 위치로 마우스가 움직일 때 화면 오른쪽에 결과가 부정적으로 나타나고 카메라가 오른쪽으로 이동하면 왼쪽으로 이동합니다 결과를 몇 가지 고정 숫자로 나눠서 감도를 줄이십시오

환경 설정에 맞게 조정하면 여기에 최종 결과가 표시됩니다 이 비디오는 여러분이 이런 종류의 튜토리얼을 좋아한다면 즐겁기를 바랍니다 잊지 마세요 좋아하는 사용자는이 채널을 처음 보시고 더 감사드립니다 다음에 너를보고보고 뵈러 간다