もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
hloc：SuperGlueで精度を向上させたSfM・Vis...
OpenFace：Deep Neural Networkによ...
ブログの復旧が難航してた話
WordPress on Windows Azure
ManimML：機械学習の概念を視覚的に説明するためのライブ...
『メカニックデザイナー 大河原邦男展』に行ってきた
Cartographer：オープンソースのSLAMライブラリ
TorchStudio：PyTorchのための統合開発環境と...
Mechanizeで要認証Webサイトをスクレイピング
JavaScriptとかWebGLとかCanvasとか
iOSデバイスと接続して連携するガジェットの開発方法
書籍『OpenCV 3 プログラミングブック』を購入
OpenCVの超解像(SuperResolution)モジュ...
Webスクレイピングの勉強会に行ってきた
プロダクトデザイン概論
フィクションに登場するUIデザインのまとめサイト
Google製オープンソース機械学習ライブラリ『Tensor...
VCG Library：C++のポリゴン操作ライブラリ
python-twitterで自分のお気に入りを取得する
スクレイピング
Faster R-CNN：ディープラーニングによる一般物体検...
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
COLMAP：オープンソースのSfM・MVSツール
OpenCV 3.3.0 contribのsfmモジュールの...
ZBrushのZScript入門
WordPressプラグインの作り方
viser：Pythonで使える3D可視化ライブラリ
Human Generator：Blenderの人体生成アド...
書籍『ゼロから作るDeep Learning』で自分なりに学...
Google App Engine上のWordPressでF...
Deep Learningとその他の機械学習手法の性能比較
HTML5・WebGLベースのグラフィックスエンジン『Goo...
Live CV：インタラクティブにComputer Visi...
ブラウザ上でJavaScript,HTML,CSSを書いて共...
OpenVDB：3Dボリュームデータ処理ライブラリ
WordPressプラグインによるサイトマップの自動生成
OpenAR：OpenCVベースのマーカーARライブラリ
オープンソースの物理ベースGIレンダラ『appleseed』
天体写真の3D動画
GAN (Generative Adversarial Ne...
UnityのTransformクラスについて調べてみた
プログラミングスキルとは何か？
コメント