もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
IronPythonを使ってUnity上でPythonのコー...
Raspberry Piでセンサーの常時稼働を検討する
OpenCVでPhotoshopのプラグイン開発
Accord.NET Framework：C#で使える機械学...
GAN (Generative Adversarial Ne...
OpenSfM：PythonのStructure from ...
Quartus II
CycleGAN：ドメイン関係を学習した画像変換
天体写真の3D動画
BlenderProc：Blenderで機械学習用の画像デー...
Unreal Engineの薄い本
Web経由でRaspberry PiのGPIOを操作したい
書籍『ROSプログラミング』
変形ロボットのデザイン
PythonでMayaのShapeノードプラグインを作る
ROMOハッカソンに行ってきた
映画から想像するVR・AR時代のGUIデザイン
ZScript
Unityで画面タッチ・ジェスチャ入力を扱う無料Asset『...
現在公開されているWeb API一覧
WordPressのサーバ引っ越し方法を考える
Google App Engine上のWordPressでA...
書籍『仕事ではじめる機械学習』を読みました
openMVGをWindows10 Visual Studi...
WinSCP
ブログをwpXレンタルサーバーからwpX Speedへ移行
pythonの機械学習ライブラリ『scikit-learn』
HTML5・WebGLベースのグラフィックスエンジン『Goo...
ポリゴンジオメトリ処理ライブラリ『pmp-library (...
OpenMVS：Multi-View Stereoによる3次...
ZBrushで作った3Dモデルを立体視で確認できるVRアプリ...
3D復元技術の情報リンク集
Google App Engineのデプロイ失敗
Amazon EC2ログイン用の秘密鍵を無くした場合の対処方...
サンプルコードにも間違いはある？
UnityでShaderの入力パラメータとして行列を渡す
Raspberry PiのGPIOを操作するPythonライ...
OpenCV 3.1のsfmモジュールのビルド再び
Super Resolution：OpenCVの超解像処理モ...
C++の抽象クラス
OpenCVでカメラ画像から自己位置認識 (Visual O...
クラスの基本
コメント