もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
AmazonEC2のインスタンスをt1.microからt2....
BGSLibrary：OpenCVベースの背景差分ライブラリ
WebGL開発に関する情報が充実してきている
Deep Fluids：流体シミュレーションをディープラーニ...
OpenMVSのサンプルを動かしてみる
オープンソースの顔の動作解析ツールキット『OpenFace』
Accord.NET Framework：C#で使える機械学...
CGALDotNet：計算幾何学ライブラリ CGALのC#ラ...
konashiのサンプルコードを動かしてみた
ブログをGoogle App EngineからAmazon ...
OpenCVで顔のランドマークを検出する『Facemark ...
生物の骨格
映画から想像するVR・AR時代のGUIデザイン
『日本の巨大ロボット群像』を見てきた
Live CV：インタラクティブにComputer Visi...
Math.NET Numerics：Unityで使える数値計...
cvui：OpenCVのための軽量GUIライブラリ
ZBrushで人型クリーチャー
Model View Controller
Google App Engine上のWordPressでF...
pythonの機械学習ライブラリ『scikit-learn』
R-CNN (Regions with CNN featur...
変形ロボットのデザイン
Google Colaboratoryで遊ぶ準備
Unityからkonashiをコントロールする
Super Resolution：OpenCVの超解像処理モ...
Russian3DScannerのトポロジー転送ツール『Wr...
Theia：オープンソースのStructure from M...
UnityでPoint Cloudを表示する方法
Structure from Motion (多視点画像から...
定数
Konashiを買った
openMVG：複数視点画像から3次元形状を復元するライブラ...
OpenFace：Deep Neural Networkによ...
CGレンダラ研究開発のためのフレームワーク『Lightmet...
OANDAのfxTrade API
NumSharp：C#で使えるNumPyライクな数値計算ライ...
サンプルコードにも間違いはある？
SONY製のニューラルネットワークライブラリ『NNabla』
Pythonの自然言語処理ライブラリ『NLTK(Natura...
科学技術計算向けスクリプト言語『Julia』
MPFB2：Blenderの人体モデリングアドオン
コメント