もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
Pythonの自然言語処理ライブラリ『NLTK(Natura...
株式会社ヘキサドライブの研究室ページ
konashiのサンプルコードを動かしてみた
OpenMesh：オープンソースの３Dメッシュデータライブラ...
FCN (Fully Convolutional Netwo...
オープンソースの物理ベースGIレンダラ『appleseed』
MythTV：Linuxでテレビの視聴・録画ができるオープン...
仮想関数
ROMOハッカソンに行ってきた
OpenCVのバージョン3が正式リリースされたぞ
BlenderProc：Blenderで機械学習用の画像デー...
動的なメモリの扱い
Unity ARKitプラグインサンプルのドキュメントを読む
Math.NET Numerics：Unityで使える数値計...
『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハ...
ブログが1日ダウンしてました
OpenCVの顔検出過程を可視化した動画
触れば分かる ユニバーサルデザインな腕時計『The Brad...
機械学習で遊ぶ
cvui：OpenCVのための軽量GUIライブラリ
iPhone x ロボットハッカソン～RomoのiPhone...
AfterEffectsプラグイン開発
iOSで使えるJetpac社の物体認識SDK『DeepBel...
Raspberry Piでセンサーの常時稼働を検討する
Iridescence：プロトタイピング向け軽量3D可視化ラ...
UnityでOpenCVを使うには？
GAN (Generative Adversarial Ne...
C#で使える遺伝的アルゴリズムライブラリ『GeneticSh...
AnacondaとTensorFlowをインストールしてVi...
Mechanizeで要認証Webサイトをスクレイピング
Unity ARKitプラグインサンプルのチュートリアルを読...
Open3D：3Dデータ処理ライブラリ
線画を遠近法で描く
AndroidもopenGLも初心者さ (でもJavaは知っ...
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
OpenMVSのサンプルを動かしてみる
Twitter APIのPythonラッパー『python-...
libigl：軽量なジオメトリ処理ライブラリ
ZScript
『Geocities-izer』 どんなWebページも一昔前...
uvでWindows11のPython環境を管理する
まだ続くブログの不調
コメント