html5のcanvasの可能性

もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか?」って思うようになった。

端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。


スポンサーリンク


スポンサーリンク

html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
Javascript ビジュアル・リファレンス 改訂版

さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ

ということで、こういう考えでWordPressテーマを自作したいのであった。


スポンサーリンク

関連記事

Google XML Sitemap Generatorプラグインを3.4.1へダウングレード
TensorFlowでCGを微分できる『TensorFlow Graphics』
HerokuでMEAN stack
Unity MonoBehaviourクラスのオーバーライド関数が呼び出される順番
UnityのMonoBehaviourクラスをシングルトン化する
Verilog HDL
konashiのサンプルコードを動かしてみた
ブログをGoogle App EngineからAmazon EC2へ移行
『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハンズオンセミナーに行ってきた
OpenCVの超解像(SuperResolution)モジュールを試す
マンガで分かる JavaScriptプログラミング講座
adskShaderSDK
GitHub Pagesで静的サイトを作る
画像からカメラの3次元位置・姿勢を推定するライブラリ『OpenGV』
変形ロボットのデザイン
Unityの薄い本
JavaScriptとかWebGLとかCanvasとか
OpenCV バージョン4がリリースされた!
オープンソースの取引プラットフォーム
OpenCVのfindEssentialMat関数を使ったサンプルを読んでみる
CGレンダラ研究開発のためのフレームワーク『Lightmetrica (ライトメトリカ)』
オープンソースの物理ベースGIレンダラ『appleseed』
今年もSSII
スクラッチで既存のキャラクターを立体化したい
書籍『ゼロから作るDeep Learning』で自分なりに学ぶ
WordPressプラグインの作り方
OpenCV 3.1から追加されたSfMモジュール
2D→3D復元技術で使われる用語まとめ
.NETで使えるTensorFlowライクなニューラルネットワークライブラリ『NeuralNetwo...
機械学習で遊ぶ
オープンソースの顔の動作解析ツールキット『OpenFace』
FreeMoCap Project:オープンソースのマーカーレスモーションキャプチャ
オープンソースの物理ベースレンダラ『Mitsuba』をMayaで使う
UnityプロジェクトをGitHubで管理する
PyDataTokyo主催のDeep Learning勉強会
pythonもかじってみようかと
UnityでShaderの入力パラメータとして行列を渡す
定数
Google Chromecast
Raspberry Pi 2のGPIOピン配置
書籍『OpenCV 3 プログラミングブック』を購入
SDカードサイズのコンピューター『Intel Edison』

コメント