もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
openMVG：複数視点画像から3次元形状を復元するライブラ...
Swark：コードからアーキテクチャ図を作成できるVSCod...
Unityで画面タッチ・ジェスチャ入力を扱う無料Asset『...
Raspberry Pi 2を買いました
サンプルコードにも間違いはある？
OpenAR：OpenCVベースのマーカーARライブラリ
Mayaのプラグイン開発
Rerun：マルチモーダルデータの可視化アプリとSDK
オープンソースの顔認識フレームワーク『OpenBR』
WordPress on Google App Engine...
ZBrushで人型クリーチャー
Unityからkonashiをコントロールする
Live CV：インタラクティブにComputer Visi...
続・ディープラーニングの資料
OpenCV 3.1のsfmモジュールを試す
Pylearn2：ディープラーニングに対応したPythonの...
オープンソースの顔の動作解析ツールキット『OpenFace』
まだ続くブログの不調
3Dモデルを立体視で確認できるVRアプリを作っている
Math Inspector：科学計算向けビジュアルプログラ...
OpenCV 3.3.0-RCでsfmモジュールをビルド
フォトンの放射から格納までを可視化した動画
OpenFace：Deep Neural Networkによ...
Boost オープンソースライブラリ
WordPressプラグインによるサイトマップの自動生成
GitHub Pagesで静的サイトを作る
ディープラーニング
機械学習で遊ぶ
BlenderProc：Blenderで機械学習用の画像デー...
2D→3D復元技術で使われる用語まとめ
UnityからROSを利用できる『ROS#』
CGALDotNet：計算幾何学ライブラリ CGALのC#ラ...
Blendify：コンピュータービジョン向けBlenderラ...
IronPythonを使ってUnity上でPythonのコー...
Composition Rendering：Blenderに...
書籍『ROSプログラミング』
python-twitterで自分のお気に入りを取得する
Google App Engine上のWordPressでA...
TorchStudio：PyTorchのための統合開発環境と...
SONYの自律型エンタテインメントロボット『aibo』
Super Resolution：OpenCVの超解像処理モ...
『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハ...
コメント