もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
UnityからROSを利用できる『ROS#』
OpenCV3.3.0でsfmモジュールのビルドに成功！
Javaで作られたオープンソースの3DCGレンダラ『Sunf...
UnityでOpenCVを使うには？
BGSLibrary：OpenCVベースの背景差分ライブラリ
Google製オープンソース機械学習ライブラリ『Tensor...
組み込み向けのWindows OS 『Windows Emb...
株式会社ヘキサドライブの研究室ページ
『Geocities-izer』 どんなWebページも一昔前...
Google App Engine上のWordPressでA...
Geogram：C++の3D幾何アルゴリズムライブラリ
OpenCVのfindEssentialMat関数を使ったサ...
OpenGVの用語
スクラッチで既存のキャラクターを立体化したい
Human Generator：Blenderの人体生成アド...
スクレイピング
KelpNet：C#で使える可読性重視のディープラーニングラ...
Webスクレイピングの勉強会に行ってきた
OpenCVの超解像(SuperResolution)モジュ...
SDカードサイズのコンピューター『Intel Edison』
WordPressプラグインの作り方
OpenGVのライブラリ構成
PyDataTokyo主催のDeep Learning勉強会
チャットツール用bot開発フレームワーク『Hubot』
映画から想像するVR・AR時代のGUIデザイン
Composition Rendering：Blenderに...
アクセス元IPアドレスから企業名が分かるアクセス解析『Use...
Unityの各コンポーネント間でのやり取り
機械学習手法『Random Forest』
3Dモデルを立体視で確認できるVRアプリを作っている
法線マップを用意してCanvas上でShadingするサンプ...
Webページ制作のためのメモ
PythonでMayaのShapeノードプラグインを作る
定数
Mayaのプラグイン開発
ROSの薄い本
UnityでTweenアニメーションを実装できる3種類の無料...
3分の動画でプログラミングを学習できるサイト『ドットインスト...
ArUco：OpenCVベースのコンパクトなARライブラリ
trimesh：PythonでポリゴンMeshを扱うライブラ...
Google XML Sitemap Generatorプラ...
MythTV：Linuxでテレビの視聴・録画ができるオープン...
コメント