ChatGPTの教科書

ChatGPT、生成AIなどで困ったことを調べたブログ

【JavaScript】画像認識からアニメ・3Dまで、おすすめライブラリ31選!

JavaScriptにはいろんなライブラリがあってほとんどは無料で利用可能。ここではジャンル別にどんなものがあるか紹介します。

機能別おすすめ紹介

Library 1

さすがに定番すぎるJqueryは省いています。

 

グラフィック系

p5.js

f:id:apicode:20220210102206p:plain

グラフィック表現、サウンド表現をサポート。

【JavaScript】音楽作成用ライブラリ「p5.js」のダウンロード、デモ - Windows11の教科書.net

 

 

canvas-sketch

f:id:apicode:20220210124243p:plain

グラフィック補助ライブラリ。

【JavaScript】グラフィック用ライブラリ「canvas-sketch」のダウンロード、デモ - Windows11の教科書.net

 

imagefx.js

f:id:apicode:20220212171819p:plain

キャンバスにフィルター処理。

【JavaScript】画像処理ライブラリ「imagefx.js」のダウンロード - Windows11の教科書.net

 

Granim.js

f:id:apicode:20220212173240p:plain

グラデーション作成に便利なライブラリ。

【JavaScript】ライブラリ「Granim.js」のダウンロード、デモ - Windows11の教科書.net

 

Resemble.js

f:id:apicode:20220210095110p:plain

RGB、輝度分析や2枚の画像を差分で処理します。

 

アニメーション

Anime.js

f:id:apicode:20220212172158p:plain

アニメーション表現をサポート。

【JavaScript】ライブラリ「Anime.js」のダウンロード、デモ - Windows11の教科書.net

 

PixiJS

f:id:apicode:20220210132919p:plain

スプライト合成などに便利なライブラリ。

【JavaScript】グラフィック用ライブラリ「PixiJS」のダウンロード、デモ - Windows11の教科書.net

 

3D系

Three.js

f:id:apicode:20220210124618p:plain

3D表示用ライブラリの定番。

【JavaScript】3Dライブラリ「Three.js」のダウンロード、デモ - Windows11の教科書.net

 

Babylon.js

f:id:apicode:20220210124943p:plain

3D生成のライブラリ定番の1つ。

【JavaScript】3Dライブラリ「Babylon.js」のダウンロード、デモ - Windows11の教科書.net

 

Regl

f:id:apicode:20220210103649p:plain

WebGLを簡素化したもの。

【JavaScript】WebGL高速化ライブラリ「Regl」のダウンロード、デモ - Windows11の教科書.net

 

Twgl.js

f:id:apicode:20220210125438p:plain

WebGLを簡素化したもの。

【JavaScript】WebGLライブラリ「Twgl.js」のダウンロード、デモ - Windows11の教科書.net

 

 

物理シミュレーション

物理属性を付けたアニメーションなどが可能となります。

Box2D

f:id:apicode:20220211135003p:plain

物理エンジンBox2DのJS版。

【JavaScript】物理ライブラリ「Box2D.js」のダウンロード - Windows11の教科書.net

 

Planck.js

f:id:apicode:20220212173622p:plain

こちらも衝突判定などをもつJSライブラリです。

【JavaScript】物理ライブラリ「Planck.js」のダウンロード、デモ - Windows11の教科書.net

 

liquidfun

f:id:apicode:20220210103413p:plain

【JavaScript】粒子シミュレーション用ライブラリ「liquidfun」のダウンロード、デモ - Windows11の教科書.net

 

 

画像分析・認識

clmtrackr.js

顔認識。

【JavaScript】顔認識ライブラリ「clmtrackr.js」のダウンロード、デモ - Windows11の教科書.net

 

Pico.js

顔認識。複数人でも判定可能。

【JavaScript】顔認識ライブラリ「Pico.js」のダウンロード、デモ - Windows11の教科書.net

 

face-api.js

顔認識。

【JavaScript】顔認識ライブラリ「face-api.js」のダウンロード、デモ - Windows11の教科書.net

 

Kittydar

f:id:apicode:20191201093723p:plain

猫の顔認識

【JavaScript】顔認識ライブラリ「Kittydar」のダウンロード、デモ - Windows11の教科書.net

 

TensorFlow.js models

f:id:apicode:20220210095443p:plain

 

Movement.js

f:id:apicode:20220210103006p:plain

立った、しゃがんだなどを識別。

【JavaScript】ジェスチャー識別用ライブラリ「Movement.js」のダウンロード、デモ - Windows11の教科書.net

 

Handsfree.js

f:id:apicode:20220211142558p:plain

ハンドトラッキング。

【JavaScript】ハンドトラッキング用ライブラリ「Handsfree.js」のダウンロード、デモ - Windows11の教科書.net

 

Handtrack.js

ハンドトラッキング。

【JavaScript】ハンドトラッキングライブラリ「Handtrack.js」のダウンロード、デモ - Windows11の教科書.net

 

js-handtracking

ハンドトラッキング。手は塊として認識。

【JavaScript】ハンドトラッキングライブラリ「js-handtracking」のダウンロード、デモ - Windows11の教科書.net

WebGazer.js

アイトラッキング。

【JavaScript】視線認識用ライブラリ「WebGazer.js」のダウンロード、デモ - Windows11の教科書.net

 

動画・サウンド系

Bideo.js

f:id:apicode:20220212172855p:plain

フル画面動画などに。

【JavaScript】ライブラリ「Bideo.js」のダウンロード、デモ - Windows11の教科書.net

 

Tone.js

f:id:apicode:20220210090726p:plain

音階を鳴らす定番のライブラリ。

【JavaScript】音楽作成用ライブラリ「Tone.js」のダウンロード、デモ - Windows11の教科書.net

 

tonal.js

f:id:apicode:20220210090057p:plain

こちらも音階を鳴らします。

【JavaScript】音楽作成用ライブラリ「tonal.js」のダウンロード、デモ - Windows11の教科書.net

 

Magenta

AIを活用した音楽作成。

【JavaScript】ライブラリ「Magenta」のデモ - Windows11の教科書.net

 

 

ビジネス・ユーティリティ系

Chart.js

f:id:apicode:20220212173112p:plain

棒グラフ、折れ線グラフ、バブルチャートなどいろんなチャート作成の定番。

【JavaScript】ライブラリ「Chart.js」のダウンロード、デモ - Windows11の教科書.net

 

Tesseract

OCR機能を使います。

【JavaScript】OCRライブラリ「Tesseract.js」のダウンロード - Windows11の教科書.net

 

Stats.js

FPS表示。

【JavaScript】FPS計測用ライブラリ「Stats.js」のダウンロード、デモ - Windows11の教科書.net

 

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

利用規約・プライバシーポリシー |〇問い合わせ