もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
MVStudio：オープンソースのPhotogrammetr...
Rerun：マルチモーダルデータの可視化アプリとSDK
2D→3D復元技術で使われる用語まとめ
Theia：オープンソースのStructure from M...
オープンソースの人体モデリングツール『MakeHuman』の...
Raspberry PiのGPIOを操作するPythonライ...
IronPythonを使ってUnity上でPythonのコー...
UnityでLight Shaftを表現する
スクラッチで既存のキャラクターを立体化したい
Python拡張モジュールのWindows用インストーラー配...
Raspberry Piでセンサーの常時稼働を検討する
ドットインストールのWordPress入門レッスン
WordPressのサーバ引っ越し方法を考える
iOSデバイスのためのフィジカル・コンピューティングツールキ...
Unityの各コンポーネント間でのやり取り
3Dグラフィックスの入門書
ニューラルネットワークで画像分類
オープンソースの顔認識フレームワーク『OpenBR』
書籍『仕事ではじめる機械学習』を読みました
ROSの薄い本
BGSLibrary：OpenCVベースの背景差分ライブラリ
書籍『ゼロから作るDeep Learning』で自分なりに学...
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
HTML5・WebGLベースのグラフィックスエンジン『Goo...
Unity ARKitプラグインサンプルのチュートリアルを読...
Kornia：微分可能なコンピュータービジョンライブラリ
歯を食いしばって見るべき動画
Unreal Engineの薄い本
Super Resolution：OpenCVの超解像処理モ...
日本でMakersは普及するだろうか？
Python.NET：Pythonと.NETを連携させるパッ...
Geogram：C++の3D幾何アルゴリズムライブラリ
OpenCVでカメラ画像から自己位置認識 (Visual O...
RSSフィードを読込んで表示するWordpressプラグイン...
CycleGAN：ドメイン関係を学習した画像変換
PyDataTokyo主催のDeep Learning勉強会
iOSで使えるJetpac社の物体認識SDK『DeepBel...
線画を遠近法で描く
ブラウザ操作自動化ツール『Selenium』を試す
OpenCVで動画の手ぶれ補正
iOSデバイスと接続して連携するガジェットの開発方法
TensorSpace.js：ニューラルネットワークの構造を...
コメント