もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
SVM (Support Vector Machine)
OpenCV 3.1のsfmモジュールを試す
3Dモデルを立体視で確認できるVRアプリを作っている
C++の抽象クラス
映画から想像するVR・AR時代のGUIデザイン
Google製オープンソース機械学習ライブラリ『Tensor...
OpenCVで顔のモーフィングを実装する
マンガで分かる JavaScriptプログラミング講座
iOSデバイスと接続して連携するガジェットの開発方法
GAN (Generative Adversarial Ne...
今年もSSII
スクレイピング
Dlib：C++の機械学習ライブラリ
AMIMOTO（PVM版）で作成したインスタンスをAMIMO...
Raspberry PiのGPIOを操作するPythonライ...
WinSCP
Math Inspector：科学計算向けビジュアルプログラ...
UnityでARKit2.0
オープンソースの顔の動作解析ツールキット『OpenFace』
ZBrushで作った3Dモデルを立体視で確認できるVRアプリ...
BGSLibrary：OpenCVベースの背景差分ライブラリ
WebGL開発に関する情報が充実してきている
OpenGVのライブラリ構成
まだ続くブログの不調
OpenSfM：PythonのStructure from ...
CycleGAN：ドメイン関係を学習した画像変換
Russian3DScannerのトポロジー転送ツール『Wr...
変形ロボットのデザイン
WordPress on Google App Engine...
第1回 3D勉強会＠関東『SLAMチュートリアル大会』
プログラミングスキルとは何か？
Managing Software Requirements...
Unityからkonashiをコントロールする
手を動かしながら学ぶデータマイニング
生物の骨格
Structure from Motion (多視点画像から...
Deep Learningとその他の機械学習手法の性能比較
Live CV：インタラクティブにComputer Visi...
法線マップを用意してCanvas上でShadingするサンプ...
Alice Vision：オープンソースのPhotogram...
WordPressの表示を高速化する
OpenGVの用語
コメント