前端中的Live2D與技術

Live2D,即為2D繪圖渲染技術,游戲中例如崩壞3,碧藍航線中與老婆交互就利用了live2d,通過前端的渲染,拼接,移動即可做出類似3d的效果,但是始終還是有缺陷,例如無法實現(xiàn)3d的轉身,跳躍。
L2D的制作成本遠低于3D,3D需要的建模,渲染,L2D可以方便完成,只需要對人物切片,然后前端重組,移動動畫即可達到效果

Web中的L2D結構
案例:www.arsrna.com
這是Live2D的材質結構



Exp,即為表情的動作,都是json文件,任意打開一個:F_FUN_SMILE.exp.json
通過格式化json文件,看得出這是控制每一個貼圖材質的控件




MOC文件夾:

這是一個存儲模型和材質的文件,moc即為模型

材質中包括了人物的所有外飾信息

mtn文件夾


這個是控制組件淡入淡出,角度,比如人體的x,y,z軸的旋轉,以及防止動作突發(fā)詭異現(xiàn)象,使用淡入淡出

assets根目錄的兩個json文件:

model.json即定義了模型,Physics.json即定義了物理效果model.json即定義了模型,Physics.json即定義了物理效果


這里相當于總控制器,控制了什么情況下對應什么動作的json,而動作的json定義了材質切片的運動,Physics物理效果就能更加真實地顯示動畫,比如頭發(fā)搖擺

Web中的呈現(xiàn):
核心:live2d.js

可惜是加密的

我們無法進一步研究,但根據(jù)官方的文檔來看,是運用webGL技術進行渲染的

注意:json等模型是具有版權的,要不自己制作,要不就請求授權,尤其是應用于商業(yè)用途要及其注意

到此,介紹結束,更多可能需要大家一同探索
我是Ar-Sr-Na,個人網(wǎng)站www.arsrna.cn
標簽: