もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
触れば分かる ユニバーサルデザインな腕時計『The Brad...
JavaScriptとかWebGLとかCanvasとか
OpenCV 3.3.0-RCでsfmモジュールをビルド
ManuelBastioniLAB：人体モデリングできるBl...
cvui：OpenCVのための軽量GUIライブラリ
OpenCVで動画の手ぶれ補正
大河原邦男オリジナルデザイン『iXine(イグザイン)』
OpenCVでiPhone6sのカメラをキャリブレーションす...
iOSデバイスと接続して連携するガジェットの開発方法
ニューラルネットワークで画像分類
LuxCoreRender：オープンソースの物理ベースレンダ...
OpenCVで顔のモーフィングを実装する
RSSフィードを読込んで表示するWordpressプラグイン...
Twitter APIのPythonラッパー『python-...
UnityのAR FoundationでARKit 3
WordPress on Google App Engine...
DensePose：画像中の人物表面のUV座標を推定する
openMVG：複数視点画像から3次元形状を復元するライブラ...
変形ロボットのデザイン
UnityでShaderの入力パラメータとして行列を渡す
ZBrushのZScript入門
Python for Unity：UnityEditorでP...
Unity MonoBehaviourクラスのオーバーライド...
pythonもかじってみようかと
D3.js：JavaScriptのデータビジュアライゼーショ...
Theia：オープンソースのStructure from M...
SONYの自律型エンタテインメントロボット『aibo』
Pythonの自然言語処理ライブラリ『NLTK(Natura...
3Dグラフィックスの入門書
OpenMesh：オープンソースの３Dメッシュデータライブラ...
viser：Pythonで使える3D可視化ライブラリ
Alice Vision：オープンソースのPhotogram...
Webページ制作のためのメモ
書籍『仕事ではじめる機械学習』を読みました
Raspberry Pi 2を買いました
ブログをwpXレンタルサーバーからwpX Speedへ移行
WebGL開発に関する情報が充実してきている
VCG Library：C++のポリゴン操作ライブラリ
BlenderProc：Blenderで機械学習用の画像デー...
C#で使える遺伝的アルゴリズムライブラリ『GeneticSh...
Pylearn2：ディープラーニングに対応したPythonの...
書籍『ゼロから作るDeep Learning』で自分なりに学...
コメント