주의사항

Cubism SDK for Web의 지원 OS는 Windows 또는 MacOS이며, 우분투는 공식적으로 지원되지 않습니다.

만약 이하의 순서로 진행해도, 잘 할 수 없는 경우도 있다고 생각하므로, 거기는 자기 책임으로 부탁합니다.

Cubism SDK for Web이란?

WebGL에서 구현 된 SDK.

Live2D 모델을 웹에서 볼 수 있습니다.

주요 웹 브라우저를 지원합니다.

소스 코드는 TypeScript로 작성되었습니다.

(인용: Cubism SDK )

Cubism SDK for Web을 사용해 보자(개요)

이하의 순서로 진행해 갑니다.

웹용 Cubism SDK를 사용할 때까지 설치 작업

웹 샘플 빌드 및 실행

이번 시도한 환경은 다음과 같습니다.
OS: Ubuntu 18.04 LTS
CPU: i3-4130 3.40GHz
메모리: 16GB

1. Cubism SDK for Web을 사용할 때까지 설치 작업

기본적으로는 Live2D Cubism/SDK 튜토리얼 를 참고로 하고 있습니다.
위의 것을 보다 자세하게 설명해 나가면 좋다고 생각하고 있습니다.

1.1 Visual Studio Code (VSCode) 설치

우분투에 VSCode를 설치하는 세 가지 방법 의 기사를 알기 쉽다고 생각합니다.
세 가지 설치 방법을 소개하고 있지만, 나는 세 번째가 매우 이해하기 쉬웠습니다.
설치를 실시해, 버전의 확인을 할 수 있으면 k입니다.

$ code --version
1.38.1
b37e54c98e1a74ba89e03073e5a3761284e3ffb0
x64

그런 다음 설치된 VSCode를 시작합니다.

$ code

실행하고 왼쪽 북마크의 Extensions를 클릭하고 검색 창에 다음 두 가지를 입력합니다.

Debugger for Chrome

Live Server

아래 그림과 같이 각각을 install하십시오.



install이 끝나고 VScode를 다시 시작하면이 설정이 종료됩니다.

1.2 Node.js 설치

우분투에 최신 Node.js를 어려움없이 설치 의 기사를 알기 쉽다고 생각합니다.
이쪽도 인스톨을 실시해, node와 npm의 버젼의 확인을 할 수 있으면 k입니다.

$ node -v
v12.13.0
$ npm --version
6.12.0

1.3 TypeScript 설치

다음 코드를 실행하여 설치를 수행하고 버전을 확인할 수 있으면 k입니다.

$ npm install -g typescript
$ tsc --version
Version 3.7.2

1.4 빌드에 필요한 각 패키지 설치

먼저 Cubism SDK for Web 다운로드에서 라이센스 계약에 동의하고 웹용 Cubism SDK를 다운로드합니다.
다운로드 한 zip 파일을 압축 해제하고 압축을 푼 파일로 이동합니다.

$ unzip CubismSdkForWeb-4-beta.1.zip
$ cd CubismSdkForWeb-4-beta.1

이동하여 ls 명령에 "package.json"이 있는지 확인하십시오.

$ ls
CHANGELOG.md  README.md        framework.webpack.config.js  sample.webpack.config.js
Core          Sample           package-lock.json
Framework     cubism-info.yml  package.json

확인할 수 있으면 다음 코드를 실행합니다.

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

상기의 warning이 나온다고 생각합니다만, 스루 해 k입니다.
여기까지가 필요한 설치 작업이 됩니다.

2. 웹 샘플 빌드 및 실행

이쪽의 조작은 직접 Live2D Cubism/SDK 튜토리얼 를 참고로 진행해 받을 수 있으면 문제 없다고 생각합니다.
위의 링크의 "빌드"와 "실행"을 순서대로 진행하면 다음과 같이 브라우저가 시작되고 화면에 모델이 표시됩니다.

요약

우분투에서 Live2D 모델을 웹에 표시했습니다.

솔직히 언제 고장이 나올지 모르기 때문에 별로 기대하지 않는 것이 좋다.

향후 이 계속을 쓸지는 불명.