html5のcanvasの可能性

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

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


スポンサーリンク


スポンサーリンク

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

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

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


スポンサーリンク

関連記事

WordPressのテーマを自作する
AfterEffectsプラグイン開発
Web経由でRaspberry PiのGPIOを操作したい
オープンソースのPhotogrammetryフレームワーク『Alice Vision』
OpenCV 3.1のsfmモジュールのビルド再び
動的なメモリの扱い
Unityの薄い本
Google製オープンソース機械学習ライブラリ『TensorFlow』のWindows版が公開された
ヒトデの骨格のような構造物を作成するシステム『KINEMATICS』
オープンソースの顔認識フレームワーク『OpenBR』
WordPressプラグインの作り方
オープンソースのSfM・MVSツール『COLMAP』
AndroidもopenGLも初心者さ (でもJavaは知ってるよ)
Pythonの自然言語処理ライブラリ『NLTK(Natural Language Toolkit)』
Mechanizeで要認証Webサイトをスクレイピング
機械学習に役立つPythonライブラリ一覧
ZScript
Mask R-CNN:ディープラーニングによる一般物体検出・Instance Segmentatio...
Unity ARKitプラグインサンプルのドキュメントを読む
ディープラーニングに対応したPythonの機械学習ライブラリ『Pylearn2』
3DCG Meetup #4に行ってきた
マンガで分かる JavaScriptプログラミング講座
OpenCVで顔のランドマークを検出する『Facemark API』
OpenCV バージョン4がリリースされた!
WordPress on Google App Engineを1週間運用してみて
組み込み向けのWindows OS 『Windows Embedded』
OpenCVベースの背景差分ライブラリ『BGSLibrary』
アクセス元IPアドレスから企業名が分かるアクセス解析『User Local スマートフォン解析』
サンプルコードにも間違いはある?
OpenCVでiPhone6sのカメラをキャリブレーションする
OpenCV 3.1から追加されたSfMモジュール
UnityでARKit2.0
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
UnityでPoint Cloudを表示する方法
歯を食いしばって見るべき動画
オープンソースのロボットアプリケーションフレームワーク『ROS (Robot Operating S...
このブログのデザインに飽きてきた
ブログをGoogle App EngineからAmazon EC2へ移行
スクレイピング
Seleniumを使ったFXや株の自動取引
UnityでLight Shaftを表現する
Unity Scriptコーディング→Unreal Engine Scriptコーディング

コメント