もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
Raspberry Pi 2を買いました
DensePose：画像中の人物表面のUV座標を推定する
FCN (Fully Convolutional Netwo...
VCG Library：C++のポリゴン操作ライブラリ
ZBrushで作った3Dモデルを立体視で確認できるVRアプリ...
WordPressのテーマを自作する
trimesh：PythonでポリゴンMeshを扱うライブラ...
Cartographer：オープンソースのSLAMライブラリ
konashiのサンプルコードを動かしてみた
OpenMesh：オープンソースの３Dメッシュデータライブラ...
プロダクトデザイン概論
CGレンダラ研究開発のためのフレームワーク『Lightmet...
OpenCVのバージョン3が正式リリースされたぞ
オープンソースの取引プラットフォーム
iOSデバイスと接続して連携するガジェットの開発方法
プログラムによる景観の自動生成
Math.NET Numerics：Unityで使える数値計...
SONYの自律型エンタテインメントロボット『aibo』
MPFB2：Blenderの人体モデリングアドオン
adskShaderSDK
続・ディープラーニングの資料
Google Chromecast
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
Google App Engineのデプロイ失敗
Konashiを買った
MythTV：Linuxでテレビの視聴・録画ができるオープン...
3Dグラフィックスの入門書
3分の動画でプログラミングを学習できるサイト『ドットインスト...
Structure from Motion (多視点画像から...
PythonでBlenderのAdd-on開発
DCGAN (Deep Convolutional GAN)...
Unityの各コンポーネント間でのやり取り
ブラウザ操作自動化ツール『Selenium』を試す
ブログをwpXレンタルサーバーからwpX Speedへ移行
TensorSpace.js：ニューラルネットワークの構造を...
iPhoneアプリ開発 Xcode 5のお作法
WordPressのサーバ引っ越し方法を考える
『メカニックデザイナー 大河原邦男展』に行ってきた
iOSで使えるJetpac社の物体認識SDK『DeepBel...
サンプルコードにも間違いはある？
機械学習に役立つPythonライブラリ一覧
任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語...
コメント