もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
Math Inspector：科学計算向けビジュアルプログラ...
IronPythonを使ってUnity上でPythonのコー...
ZScript
adskShaderSDK
Unityの各コンポーネント間でのやり取り
Konashiを買った
Kaolin：3Dディープラーニング用のPyTorchライブ...
TensorFlowでCGを微分できる『TensorFlow...
BlenderのPython環境にPyTorchをインストー...
Amazon EC2ログイン用の秘密鍵を無くした場合の対処方...
PyMC：Pythonのベイズ統計ライブラリ
OpenCV 3.1のsfmモジュールを試す
タマムシっぽい質感
オープンソースの物理ベースGIレンダラ『appleseed』
オープンソースの物理ベースレンダラ『Mitsuba』をMay...
Kornia：微分可能なコンピュータービジョンライブラリ
UnityでOpenCVを使うには？
ManuelBastioniLAB：人体モデリングできるBl...
オープンソースの顔認識フレームワーク『OpenBR』
マンガで分かる JavaScriptプログラミング講座
科学技術計算向けスクリプト言語『Julia』
SDカードサイズのコンピューター『Intel Edison』
Swark：コードからアーキテクチャ図を作成できるVSCod...
Google App EngineでWordPress
libigl：軽量なジオメトリ処理ライブラリ
OpenCVでiPhone6sのカメラをキャリブレーションす...
WordPressプラグインによるサイトマップの自動生成
PyTorch3D：3Dコンピュータービジョンライブラリ
まだ続くブログの不調
OpenCV 3.1から追加されたSfMモジュール
HTML5・WebGLベースのグラフィックスエンジン『Goo...
OpenCV3.3.0でsfmモジュールのビルドに成功！
Live CV：インタラクティブにComputer Visi...
OpenVDB：3Dボリュームデータ処理ライブラリ
UnityでTweenアニメーションを実装できる3種類の無料...
チャットツール用bot開発フレームワーク『Hubot』
書籍『ゼロから作るDeep Learning』で自分なりに学...
FreeMoCap Project：オープンソースのマーカー...
WordPressのテーマを自作する
WordPress on Google App Engine...
Unityの薄い本
C++の抽象クラス
コメント