처음에는 스핀을 시험해 보려고 했지만 이미 재생된 것 같다.
거기서 비슷한 라이브 2D를 시도해봤어요.
결론은 버그가 있었지만 표시된 부분은 모두 완성되었다


(gif convert면 작은데...

Live2D SDK Cubism

라이브 2d의 웹 GL 버전이 공개됐기 때문에 조립하기가 간단하다고 생각합니다.
그러나 라이브 2D의 moc와 mtn 바이너리 파일의 파일 형식은 공개되지 않았다.
또한 가장 중요한 웹 페이지 GL을 사용하는 드로잉 부분은 압축되어 숨겨집니다.
함수 상세 정보를 사용자에게 알리지 않는 게 좋을 것 같아요.
실제 웹 페이지 GL 프로그램 라이브러리에 편입할 때 기존의 그래픽 시스템과 공을 치는 것을 볼 수 있다.
유닛판도 봤지만 엔진 표준의 묘사계에서 벗어나 처리하기 어려운 인상을 받았다.
그럼에도 일반 사용자나 소규모 기업이라면 무료가 큰 장점이다.
시간이 좀 걸렸지만 게임의 질이 크게 향상되겠죠.

pixi.jsv2에 삽입

먼저.jsv2의 example1-Basics에서Live2d 샘플 Simple을 시작합니다.
라이브 2DModel이 성공적으로 완료되었음을 나타냅니다.draw 내부에서 웹 페이지 context를 바꾼 것 같습니다.
pixi.js의 웹gl context가 다시 쓰는 것을 눈치채지 못했기 때문에 이상한 것 같습니다.
접근 방법으로 draw 전에 pixi.js 측은 flash 후gl context의 내용을 draw 후에 복원해야 합니다.
gl context의 내용을 저장, 반환하는 곳을 모르기 때문에
가상의 shader가 가지고 있는 PIXI.Sprite, pixi를 그립니다.js에게 웹 GL context를 바꾸는 방법을 알려주는 방법을 사용했어 (왼쪽 상단에 검은색은 RGBSplitFilter 면도기 녀석이야

RPG 쿨 뮤직비디오에 내장

https://dl.dropboxusercontent.com/u/7527575/qiita/Live2DTest.zip
나는 맨 위에 있는 유튜브 버전의 프로젝트 zip을 완성했다.
pluggin 로그인 순서에 주의하지 않으면 의존 관계의 오류가 발생합니다.
live2d.min.js의.min.js는 확장자로 오인되기 때문에 이름을 적당히 바꿉니다.
rpg_scene.js

Scene_Title.prototype.create = function() {
    Scene_Base.prototype.create.call(this);
    this.createBackground();
    this.createForeground();
    this.createlive2d();// 新規追加
    this.createWindowLayer();
    this.createCommandWindow();
};

Scene_Title.prototype.createlive2d = function(){
    this.live2DMgr = new LAppLive2DManager();
    this.live2DMgr.reloadFlg = true;
    this.live2DMgr.count++;

    var model = this.live2DMgr.createModel();
    model.load( Graphics._renderer.gl, LAppDefine.MODEL_HARU);
    this.addChild(model);
};

pixi.Scene에 로그인하는 순서가 그리는 순서이기 때문에 그것과 비슷한 곳에 삽입합니다.
편집기에서 시작하면 왠지 오류가 발생하여 Live 2D 역할을 표시할 수 없습니다.
index.직접 재생성 정상(brackets도 OK)
영문을 모르다.
rpg_scene.js

Scene_Title.prototype.terminate = function() {
    Scene_Base.prototype.terminate.call(this);
    SceneManager.snapForBackground();

    this.live2DMgr.releaseAll(Graphics._renderer.gl);
    Graphics._renderer.shaderManager.setShader(Graphics._renderer.shaderManager.complexPrimitiveShader);
    Graphics._renderer.gl.disable(Graphics._renderer.gl.CULL_FACE);
};

라이브 2D가 자신 앞에서 GL texture를 확보하고 있어 스스로 해방해야 하기 때문이다.
장면을 떠나기 전에 라이브 2DMgr.내가 너에게 release All을 줄게.
(Pixi.js의 texture를 계승하여 관리하는 것도 좋을 것 같습니다.setShader는pixi입니다.js shader가 변한 사고의 뜻을 알리기 위해
설정된 shader는 절대 사용되지 않는 가상 면도기일 텐데, 이번에는 내장된 compulex Priimitive Shader로 차를 혼탁시키고 있다.
왜냐면 라이브 2D 내부에서 수업이 잘 되는 경우가 있거든요.gl.disable(Graphics._renderer.gl.CULL_FACE)의 이름이 잘못되었습니다.

기타 고려 사항

Live 2D texture 제작 시gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); //imageを上下反転부르고 있어.
픽셀 저장 모드의 설정인 것 같지만, 이후 웹 GL에서 텍스트를 위아래로 반전시켜 읽습니다.
따라서 texture 제작이 완료되면 설정이 원상태로 돌아갑니다(PIXI.js 측에서도 반전 설정이 사용될 가능성이 있으니 주의하세요. 일반적으로 사용하지 않습니다.gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);RPG 유닛 뮤직비디오에서 라이브 2D를 재생할 수 있습니다.
라이브 2D의 모든 기능을 사용하려면 아직 해야 할 일이 많은 것 같다.
열정적인 웹 GL 다양한 사용법 알려주세요.