もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
iPhone・iPod touchで動作する知育ロボット『R...
ZBrushのZScript入門
第1回 3D勉強会＠関東『SLAMチュートリアル大会』
libigl：軽量なジオメトリ処理ライブラリ
UnityでTweenアニメーションを実装できる3種類の無料...
GAN (Generative Adversarial Ne...
続・ディープラーニングの資料
ZScript
Unity ARKitプラグインサンプルのドキュメントを読む
東京オリンピックと案内表示
Unityの各コンポーネント間でのやり取り
OpenAR：OpenCVベースのマーカーARライブラリ
Math Inspector：科学計算向けビジュアルプログラ...
iPhoneアプリ開発 Xcode 5のお作法
ブラウザ上でJavaScript,HTML,CSSを書いて共...
COLMAP：オープンソースのSfM・MVSツール
Polyscope：3Dデータ操作用GUIライブラリ
Human Generator：Blenderの人体生成アド...
BlenderProc：Blenderで機械学習用の画像デー...
Raspberry Piでセンサーの常時稼働を検討する
Deep Learningとその他の機械学習手法の性能比較
D3.js：JavaScriptのデータビジュアライゼーショ...
Google App Engineのデプロイ失敗
書籍『ゼロから作るDeep Learning』で自分なりに学...
SDカードサイズのコンピューター『Intel Edison』
Deep Fluids：流体シミュレーションをディープラーニ...
C++の抽象クラス
OpenCVで平均顔を作るチュートリアル
Twitter APIのPythonラッパー『python-...
Raspberry PiでIoTごっこ
Multi-View Environment：複数画像から3...
Cartographer：オープンソースのSLAMライブラリ
OpenMesh：オープンソースの３Dメッシュデータライブラ...
Point Cloud Utils：Pythonで3D点群・...
機械学習で遊ぶ
BGSLibrary：OpenCVベースの背景差分ライブラリ
フルCGのウルトラマン！？
UnityでARKit2.0
天体写真の3D動画
機械学習に役立つPythonライブラリ一覧
OpenCVのバージョン3が正式リリースされたぞ
Quartus II
コメント