もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
網元AMIで作ったWordpressサイトのインスタンスをt...
AnacondaとTensorFlowをインストールしてVi...
法線マップを用意してCanvas上でShadingするサンプ...
openMVG：複数視点画像から3次元形状を復元するライブラ...
HD画質の無駄遣い
iPhone x ロボットハッカソン～RomoのiPhone...
チャットツール用bot開発フレームワーク『Hubot』
Open3D：3Dデータ処理ライブラリ
Raspberry Piでセンサーの常時稼働を検討する
PGGAN：段階的に解像度を上げて学習を進めるGAN
WordPressのテーマを自作する
Raspberry Pi 2のGPIOピン配置
FreeMoCap Project：オープンソースのマーカー...
OpenCVのバージョン3が正式リリースされたぞ
ZBrushで作った3Dモデルを立体視で確認できるVRアプリ...
PythonのHTML・XMLパーサー『BeautifulS...
Iterator
科学技術計算向けスクリプト言語『Julia』
Geogram：C++の3D幾何アルゴリズムライブラリ
TensorSpace.js：ニューラルネットワークの構造を...
TorchStudio：PyTorchのための統合開発環境と...
Caffe：読みやすくて高速なディープラーニングのフレームワ...
オープンソースの物理ベースGIレンダラ『appleseed』
WordPress on Google App Engine...
BlenderのPython環境にPyTorchをインストー...
libigl：軽量なジオメトリ処理ライブラリ
ブログのデザイン変えました
Kornia：微分可能なコンピュータービジョンライブラリ
第1回 3D勉強会＠関東『SLAMチュートリアル大会』
組み込み向けのWindows OS 『Windows Emb...
フォトンの放射から格納までを可視化した動画
HerokuでMEAN stack
プログラムによる景観の自動生成
Human Generator：Blenderの人体生成アド...
ブラウザ操作自動化ツール『Selenium』を試す
OpenCVでカメラ画像から自己位置認識 (Visual O...
Webページ制作のためのメモ
デザインのリファイン再び
OpenCVの顔検出過程を可視化した動画
書籍『ROSプログラミング』
ドラマ『ファーストクラス』のモーショングラフィックス
3Dモデルを立体視で確認できるVRアプリを作っている
コメント