もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
WordPress on Windows Azure
書籍『ゼロから作るDeep Learning』で自分なりに学...
UnityのTransformクラスについて調べてみた
ドットインストールのWordPress入門レッスン
AmazonEC2のインスタンスをt1.microからt2....
Russian3DScannerのトポロジー転送ツール『Wr...
プロダクトデザイン概論
OpenGV：画像からカメラの3次元位置・姿勢を推定するライ...
Unityの各コンポーネント間でのやり取り
プログラムによる景観の自動生成
このブログのデザインに飽きてきた
歯を食いしばって見るべき動画
Iridescence：プロトタイピング向け軽量3D可視化ラ...
動的なメモリの扱い
SONY製のニューラルネットワークライブラリ『NNabla』
ニューラルネットワークで画像分類
オープンソースの顔の動作解析ツールキット『OpenFace』
OpenGVの用語
pythonの機械学習ライブラリ『scikit-learn』
オープンソースの取引プラットフォーム
生物の骨格
Unreal Engineの薄い本
ブラウザ上でJavaScript,HTML,CSSを書いて共...
ドラマ『ファーストクラス』のモーショングラフィックス
WordPress on Google App Engine...
現在公開されているWeb API一覧
ブログの復旧が難航してた話
UnityのGameObjectの向きをScriptで制御す...
TeleSculptor：空撮動画からPhotogramme...
OpenCV3.3.0でsfmモジュールのビルドに成功！
東京オリンピックと案内表示
マンガで分かる JavaScriptプログラミング講座
cvui：OpenCVのための軽量GUIライブラリ
Python.NET：Pythonと.NETを連携させるパッ...
ManimML：機械学習の概念を視覚的に説明するためのライブ...
ディープラーニング
Deep Fluids：流体シミュレーションをディープラーニ...
ブログのデザイン変えました
Theia：オープンソースのStructure from M...
UnityでARKit2.0
『メカニックデザイナー 大河原邦男展』に行ってきた
OpenGVのライブラリ構成
コメント