PixiJS和 Depth map通过 3D 创建

September / 2020

九月 / 2020

pixijs3d photoWebGLcanvas

PixiJS 라이브러리와 Depth map(깊이 정보 이미지)을 사용해 3D 이미지를 만들어 봅니다.이 포스트에서 사용된 이미지 출처는 각 이미지 하단에 표기했으며,

PixiJS 来自于 Depth map(深度信息)的使用来制作 3D 图像。这个帖子中使用的深度信息是一个深度信息，但提供了，

핵심 코드는 Red Stapler의 Create 3D Photo from Image JavaScript Tutorial을 참고했습니다.

예제를 더 쉽게 적용할 수 있는 NPM 모듈(pixi-3d-photo)을 만들어 배포했으니 사용해 보세요 :D

有意的可以使用NPM所有(pixi-3d-photo)来进行开发，请多多指教 :D

$ npm i pixi-3d-photo

pixi-3d-photo

PixiJS란?

PixiJS是什么?

PixiJS Homepage

PixiJS는 WebGL을 사용하는 고속 HTML5 2D 렌더링 라이브러리입니다.
Canvas 혹은 WebGL API를 Flash API와 유사하게 사용할 수 있습니다.

PixiJS是一个使用WebGL的轻量级HTML5 2D渲染库。
Canvas可以使用WebGL API替代Flash API进行渲染。

WebGL

WebGL은 별도 플러그인 없이도 자바스크립트를 사용해 브라우저에서 그래픽을 렌더링합니다.쉽게 OpenGL의 웹 버전으로, 실제 OpenGL ES 2.0 기반 API를 사용합니다.대부분의 최신 브라우저에서 지원하며, GPU 가속을 사용해 다양한 이미지 처리와 효과를 구현할 수 있습니다.

WebGL虽然没有完整的特性，但可以使用浏览器中的图形来进行图形的处理。特别是OpenGL的版本，使用OpenGL ES 2.0基本API。对于大部分的最新浏览器来说，使用GPU相关的处理来进行更高效的图片处理是可以的。

주의할 점은, 브라우저 옵션에서 GPU 가속을 여부를 확인해야 합니다.

主要的功能是通过浏览器实现对GPU的访问。

크롬의 경우,
‘고급’ 설정에서 해당 옵션(가능한 경우 하드웨어 가속 사용)을 제어할 수 있습니다.

图形的频率,
‘高频’设置下的相关参数(可以的频率处理器相关使用)将被提供。

chrome://settings

Hardware Acceleration in Chrome

Graphics Feature Status(그래픽 기능 상태)에서 WebGL 항목을 체크할 수 있습니다.

图形特性状态(그래픽 기능 상태)中 WebGL 相关的内容将被检查。

chrome://gpu

GPU options in Chrome

Depth map이란?

深度图是什么?

‘Depth map’은 주어진 시점에서 물체 표현의 거리에 대한 정보를 가진 이미지를 말합니다.
일반적으로 회색 톤(Gray scale)으로 표현하며, 색이 밝을수록 더 가까운 거리를, 어두울수록 더 먼 거리를 의미합니다.

‘深度图’是指在特定时间内获取的深度信息。
通常以灰度图的形式表示深度，深度值越大，颜色越亮。

Cubic

Image credit: https://en.wikipedia.org/wiki/Depth_map

图片来源: https://en.wikipedia.org/wiki/Depth_map

Cubic Map

Image credit: https://www.pvsm.ru/programmirovanie/309027

图片来源: https://www.pvsm.ru/programmirovanie/309027

예제

介绍

Sample

PixiJS를 사용해서 3D 피카츄 이미지를 만들어 봅시다.필요한 준비물은 피카츄 원본 이미지와 Depth map(이미지)입니다.

使用PixiJS来创建3D图片的过程。特别的资源是3D源图片和Depth map(图片)。

두 이미지의 크기 및 깊이 정보가 일치해야 제대로 동작할 수 있습니다.

每个页面的图形及其详细信息可以通过点击来动态获取。

Pikachu

코드는 다음과 같습니다.

代码是这样的。

your_project
├── pikachu.jpg
├── pikachu.map.jpg
└── index.html

!----

 <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script> <div id="pikachu"...