もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
『日本の巨大ロボット群像』を見てきた
python-twitterで自分のお気に入りを取得する
Theia：オープンソースのStructure from M...
WordPressプラグインによるサイトマップの自動生成
天体写真の3D動画
RSSフィードを読込んで表示するWordpressプラグイン...
Iridescence：プロトタイピング向け軽量3D可視化ラ...
iOSデバイスのためのフィジカル・コンピューティングツールキ...
OpenCV 3.3.0 contribのsfmモジュールの...
OpenGVのライブラリ構成
定数
Google App Engine上のWordPressでA...
Rerun：マルチモーダルデータの可視化アプリとSDK
Profilograph
UnityのTransformクラスについて調べてみた
機械学習で遊ぶ
Mechanizeで要認証Webサイトをスクレイピング
OpenMVSのサンプルを動かしてみる
デザインのリファイン再び
手を動かしながら学ぶデータマイニング
変形ロボットのデザイン
OpenAR：OpenCVベースのマーカーARライブラリ
Amazon Web ServicesでWordPress
iOSデバイスと接続して連携するガジェットの開発方法
タマムシっぽい質感
まだ続くブログの不調
UnityでShaderの入力パラメータとして行列を渡す
Webサイトのワイヤーフレームが作成できるオンラインツール
bpy-renderer：レンダリング用Pythonパッケー...
CGALDotNet：計算幾何学ライブラリ CGALのC#ラ...
MVStudio：オープンソースのPhotogrammetr...
ドットインストールのWordPress入門レッスン
OpenCVでPhotoshopのプラグイン開発
任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語...
OpenGV：画像からカメラの3次元位置・姿勢を推定するライ...
Math Inspector：科学計算向けビジュアルプログラ...
openMVG：複数視点画像から3次元形状を復元するライブラ...
OpenCV 3.1から追加されたSfMモジュール
ニューラルネットワークで画像分類
SONYの自律型エンタテインメントロボット『aibo』
C#で使える遺伝的アルゴリズムライブラリ『GeneticSh...
ZScript
コメント