もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
AfterEffectsプラグイン開発
Unity MonoBehaviourクラスのオーバーライド...
Raspberry PiでIoTごっこ
PythonでBlenderのAdd-on開発
現在公開されているWeb API一覧
Kornia：微分可能なコンピュータービジョンライブラリ
機械学習で遊ぶ
SONYの自律型エンタテインメントロボット『aibo』
Managing Software Requirements...
Amazon Web ServicesでWordPress
大河原邦男オリジナルデザイン『iXine(イグザイン)』
Google App Engine上のWordPressでF...
Raspberry Piでセンサーの常時稼働を検討する
WebGL開発に関する情報が充実してきている
Amazon EC2ログイン用の秘密鍵を無くした場合の対処方...
UnityのTransformクラスについて調べてみた
COLMAP：オープンソースのSfM・MVSツール
OpenCVでPhotoshopのプラグイン開発
Boost オープンソースライブラリ
スクレイピング
Unity ARKitプラグインサンプルのチュートリアルを読...
UnityでShaderの入力パラメータとして行列を渡す
仮想関数
Structure from Motion (多視点画像から...
このブログのデザインに飽きてきた
Google製オープンソース機械学習ライブラリ『Tensor...
UnityでOpenCVを使うには？
FreeMoCap Project：オープンソースのマーカー...
書籍『ROSプログラミング』
RSSフィードを読込んで表示するWordpressプラグイン...
Google App Engine上のWordPressでA...
Mitsuba 3：オープンソースの研究向けレンダラ
Google XML Sitemap Generatorプラ...
Quartus II
pythonの機械学習ライブラリ『scikit-learn』
Python.NET：Pythonと.NETを連携させるパッ...
Unityの各コンポーネント間でのやり取り
Composition Rendering：Blenderに...
Mean Stack開発の最初の一歩
WordPress on Google App Engine...
UnityのGameObjectの向きをScriptで制御す...
プロダクトデザイン概論
コメント