イナヅマTVログ

CreateJS

おれメモ, Canvas系JavaScriptライブラリ一覧

| 0件のコメント

Canvas用のライブラリでたまにしか使わないのとか名前すら忘れてるし、あそこのTutorialステキじゃんてのもどこだったか忘れてしまうボンクラ脳のためのメモ。

2D

CreateJS

王道。
さすがに忘れること無いけど。
CreateJS

Paper.js

最近どかすかアップデートされてる。
むにむにした動きがCanvasらしく無くキモくて好感度高。
Paper.js

Processing.js

パフォーマンスが出ない、つうか出すノウハウを持ち合わせていないので使いづらい。
Processing資産をそのまま使えるのは魅力。
ちょこちょこっとモック作ったりするのにいいのかな。
でもそのモックを別のライブラリで実装し直すの大変そう。
Processing.js

Cocos2d-html5

Cocos2d-x派生プロジェクト。
使ったこと無いけど、どうなのと気になってる。
Cocos2d-html5

Starling JS

未だに姿を表さない幻のJavaScriptライブラリ。
まだかなー。。。
Starling JS

3D

three.js

Canvas 3Dライブラリならthree.jsが最強なのかしら?
WebGLだけでなく、Canvas, CSSと守備範囲が広いのは老舗故かも。
IE 11のデモでも使われてたし、iOS 7 Safariのデモにも登場してるし、あのGoogleのWorld Wide Mazeでも使われていたり、最近ではTVドラマ ガリレオの研究室のモニタ内で”もにもに”動いてたのもthree.jsで作られているらしく実績は申し分ないはず。
IE 11のWebGL対応宣言でちょっとWebGLな波が来るかもと当たらない予想をしとく。
three.js
Documentがぼよよんなのがな〜
ソースまで読まないと良くわかんないことあるのがツライ。

BabylonJS

ニューカマー!
どうなんでしょう、気になる!
BabylonJS

BabylonJSはWebGL Game Framework

x3dom

pronounced X-Freedomだって。
x3dom

PhiloGL

PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development.
てことらしい。
WebGLに特化したライブラリなのね。
PhiloGL

参考サイト

WebGL Browser Report
使ってるブラウザの対応状況を教えてくれる。

http://www.chromeexperiments.com/
Chrome Experiments.
外せない。
表現とかココまでできる、てのを調べるために。

http://docs.webplatform.org/wiki/webgl
WebGLのこと調べるのにいいんじゃないでしょうか。

Internet Explorer Dev Guide: WebGL
MicrosoftのWebGL Guide。

http://www.khronos.org/webgl/wiki/User_Contributions
WebGLライブラリが一覧されてる。
何年も前に開発が終わってるのもリストされてるのはしょうがないか。

http://learningwebgl.com/blog/
WebGLな人は要チェックなのかな。

HTML5 Canvas Tutorials
Canvas Tutorialが満載!

Udacity: Interactive 3D Graphics
オンラインビデオでレッスンを受けながら学習できる優れもの。
途中で挫折したけど。
通信教育を全うするのって難しいす。

CreateJS 日本ユーザーグループ
本家以上かもしれない充実ぶり!

やっぱり野中先生じゃないでしょうか。
http://fumiononaka.com/Business/index.html

時計職人さんにゃあさんのサイトには多数のCreateJSのヒントがあります。
ありがとうございます。

@IT: WebGLの能力を引き出すプログラマブルシェーダー
数少ないShaderの解説。

3Dプログラミングの基礎知識(1)
3まである。
OpenGL, WebGL, DirextX…で3Dプログラムをするための解説。

http://www.natural-science.or.jp/article/laboratory/cat467/webgl/
natural scienceさんのWebGL解説。
クォータニオンによる視点の移動 (WebGL(Three.js))
natural scienceさんの記事。
覚えた!「クォータニオン」、むずい。

その名もLearning WebGL
Lessonはこっち

StackOverflow: three.js
three.jsの悩みはほとんど解決するかも。

How to write portable WebGL
WebGL プログラミングのコツを解説している長文、難解(オレは)なありがたーい記事。
誰か噛み砕いてさらに解説してくれないかなー。

html5rocksさんの記事
HTML5 canvas のパフォーマンスの改善
オプティマイズの話。
Canvasの描画を効率良く行う方法についての記事。

Canvas effect

Canvas effect


canvas のタイポグラフィ効果
同じくhtml5rocksさんのエフェクトはどう付けるかの記事。

おまけ

他にもたくさんあるのは分かってるけどこれ位でかんべんしとく。
結局どれか、1~2個位しか使わないのかも。
これからさらにステキなライブラリとか出てくるのかも。

書き終わって気がついた。
ガッツリ使ったことあるのthree.jsだけだった。
CreateJSはver.1になる前にちょこちょこっと使っただけ。
Processing.jsはほんの少し使っただけだった。

他はほとんど使ってない。
道は険しい。

【追記】

Away3D Typescript

Away3D Typescript 4.1 Alpha
Away3D

Away3D の WebGL版がリリースされました。
typescriptで書かれています。
ソースはgithubに。
github: away3d-core-ts
Sample file
github: away3d-examples-ts

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください