もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
UnityからROSを利用できる『ROS#』
FCN (Fully Convolutional Netwo...
Math Inspector：科学計算向けビジュアルプログラ...
Pythonの自然言語処理ライブラリ『NLTK(Natura...
胡散臭いデザインの参考サイト
Rerun：マルチモーダルデータの可視化アプリとSDK
WordPressプラグインの作り方
FreeMoCap Project：オープンソースのマーカー...
ROSの薄い本
OpenCVの超解像(SuperResolution)モジュ...
ManuelBastioniLAB：人体モデリングできるBl...
C++始めようと思うんだ
日本でMakersは普及するだろうか？
ドラマ『ファーストクラス』のモーショングラフィックス
Pylearn2：ディープラーニングに対応したPythonの...
続・ディープラーニングの資料
python-twitterで自分のお気に入りを取得する
Raspberry PiのGPIOを操作するPythonライ...
trimesh：PythonでポリゴンMeshを扱うライブラ...
プログラミングスキルとは何か？
OpenCVで平均顔を作るチュートリアル
UnityプロジェクトをGitHubで管理する
Google App Engineのデプロイ失敗
3Dグラフィックスの入門書
OpenCV 3.1のsfmモジュールのビルド再び
Gource：バージョン管理の履歴を可視化するツール
uvでWindows11のPython環境を管理する
Python拡張モジュールのWindows用インストーラー配...
MythTV：Linuxでテレビの視聴・録画ができるオープン...
Open3D：3Dデータ処理ライブラリ
現在公開されているWeb API一覧
TorchStudio：PyTorchのための統合開発環境と...
Unity ARKitプラグインサンプルのチュートリアルを読...
書籍『ゼロから作るDeep Learning』で自分なりに学...
Raspberry Pi 2のGPIOピン配置
PyMC：Pythonのベイズ統計ライブラリ
マンガで分かる JavaScriptプログラミング講座
Structure from Motion (多視点画像から...
TensorSpace.js：ニューラルネットワークの構造を...
C++ 標準テンプレートライブラリ (STL)
WordPressの表示を高速化する
OpenGV：画像からカメラの3次元位置・姿勢を推定するライ...
コメント