もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
libigl：軽量なジオメトリ処理ライブラリ
SVM (Support Vector Machine)
BlenderのPython環境にPyTorchをインストー...
Composition Rendering：Blenderに...
ニューラルネットワークで画像分類
NumSharp：C#で使えるNumPyライクな数値計算ライ...
Unity MonoBehaviourクラスのオーバーライド...
iOSデバイスのためのフィジカル・コンピューティングツールキ...
デザインのリファイン再び
Super Resolution：OpenCVの超解像処理モ...
OpenCVの三角測量関数『cv::triangulatep...
オープンソースの人体モデリングツール『MakeHuman』の...
Mask R-CNN：ディープラーニングによる一般物体検出・...
変形ロボットのデザイン
Unreal Engineの薄い本
Open3D：3Dデータ処理ライブラリ
オープンソースの顔認識フレームワーク『OpenBR』
UnityでPoint Cloudを表示する方法
OpenCVでiPhone6sのカメラをキャリブレーションす...
Pylearn2：ディープラーニングに対応したPythonの...
映画から想像するVR・AR時代のGUIデザイン
手を動かしながら学ぶデータマイニング
生物の骨格
ブログの復旧が難航してた話
OpenCVで顔のモーフィングを実装する
SONYの自律型エンタテインメントロボット『aibo』
OpenFace：Deep Neural Networkによ...
WordPress on Windows Azure
MPFB2：Blenderの人体モデリングアドオン
DCGAN (Deep Convolutional GAN)...
UnityのuGUIチュートリアル
第1回 3D勉強会＠関東『SLAMチュートリアル大会』
Pythonのソースコードに特化した検索エンジン『Nulle...
Seleniumを使ったFXや株の自動取引
OpenMesh：オープンソースの３Dメッシュデータライブラ...
Google App Engine上のWordPressでA...
DensePose：画像中の人物表面のUV座標を推定する
仮想関数
プログラミングスキルとは何か？
Structure from Motion (多視点画像から...
Pythonの自然言語処理ライブラリ『NLTK(Natura...
Model View Controller
コメント