Implemented IK and skinning on WebGL

as_kuya

License: MIT License

Fork
1
Fav
4
View
1390
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 581 lines
  • HTML 90 lines
  • CSS 44 lines

Skinning Animation with JavaScript + WebGL

Discription

This program is Inverse Kinematices and skinning animation implementation demonstrator.

Implementation

Load the model

I create the 3D model data on original format by use of 3DCG application at the Blender.

Skinning Animation

It linear interpolation between frames that it transform and the it apply to each vertices by CPU processing.

Inverse Kinematics (IK)

I implement the inverse kinematics by use of Cyclic-Coordinate-Descent(CCD).

Model Data

borrow a model data from the follow URL.

Gosupan IA (Kagayasu)

Author

GitHub

Home Page


JavaScript + WebGLでスキニングアニメーション (Japanese)

概要

汎用ライブラリを使用しない全て自前のスキニングアニメーションスキニングアニメーションのデモンストレーション。

実装

モデルデータの読み込み

3DCGアプリケーション「Blender」を使用して独自形式の3Dデータを生成し、それをJavaScript上で展開して表示。

スキニングアニメーション

キーフレーム間を線形保管して、その変形をCPU処理により各頂点に適用。

今後はGPUで処理するように改良予定。

逆運動学 (IK)

Cyclic-Coordinate-Descent(CCD)法を使用した逆運動学を実装。

モデルデータ

下記のURLからお借りしました。

ゴスパンIA(かがやす様)

開発者

GitHub

ホームページ

  • Implemented IK and skinning on WebGL
  • Implemented IK and skinning on WebGL

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

as_kuya

Author

プログラミングが趣味の職業プログラマ。 過去はソシャゲー系統のゲームプログラマだったが最近転職してシステム系統にクラスチェンジ、専門分野はAndroid, iOS系統、JavaScriptとかは完全に趣味です。 私生活はゲーム、アニメ、日曜プログラミングをゆるく嗜みながら生きています。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by