もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
R-CNN (Regions with CNN featur...
Mitsuba 2：オープンソースの物理ベースレンダラ
第1回 3D勉強会＠関東『SLAMチュートリアル大会』
日本でMakersは普及するだろうか？
オープンソースの物理ベースレンダラ『Mitsuba』をMay...
Unity Scriptコーディング→Unreal Engi...
UnityプロジェクトをGitHubで管理する
オープンソースの人体モデリングツール『MakeHuman』の...
Structure from Motion (多視点画像から...
HD画質の無駄遣い
Raspberry Pi 2を買いました
CGレンダラ研究開発のためのフレームワーク『Lightmet...
OpenCV 3.3.0-RCでsfmモジュールをビルド
Google Colaboratoryで遊ぶ準備
C++始めようと思うんだ
Polyscope：3Dデータ操作用GUIライブラリ
D3.js：JavaScriptのデータビジュアライゼーショ...
UnityのAR FoundationでARKit 3
PyMC：Pythonのベイズ統計ライブラリ
Unreal Engineの薄い本
OpenAR：OpenCVベースのマーカーARライブラリ
Cartographer：オープンソースのSLAMライブラリ
Raspberry PiでIoTごっこ
Google App Engine上のWordPressでF...
Deep Learningとその他の機械学習手法の性能比較
大河原邦男オリジナルデザイン『iXine(イグザイン)』
Unityの薄い本
OpenCVで顔のランドマークを検出する『Facemark ...
HerokuでMEAN stack
書籍『ROSプログラミング』
CycleGAN：ドメイン関係を学習した画像変換
UnityのuGUIチュートリアル
Composition Rendering：Blenderに...
JavaScriptとかWebGLとかCanvasとか
iPhoneアプリ開発 Xcode 5のお作法
OpenFace：Deep Neural Networkによ...
PGGAN：段階的に解像度を上げて学習を進めるGAN
BlenderのPython環境にPyTorchをインストー...
Unityで画面タッチ・ジェスチャ入力を扱う無料Asset『...
ディープラーニング
PyDataTokyo主催のDeep Learning勉強会
Manim：Pythonで使える数学アニメーションライブラリ
コメント