もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
TensorSpace.js：ニューラルネットワークの構造を...
Human Generator：Blenderの人体生成アド...
UnityのTransformクラスについて調べてみた
Model View Controller
Unityで強化学習できる『Unity ML-Agents』
AMIMOTO（PVM版）で作成したインスタンスをAMIMO...
Mitsuba 3：オープンソースの研究向けレンダラ
ブラウザ上でJavaScript,HTML,CSSを書いて共...
OpenCVでカメラ画像から自己位置認識 (Visual O...
Twitter APIのPythonラッパー『python-...
Composition Rendering：Blenderに...
プログラミングスキルとは何か？
UnityでTweenアニメーションを実装できる3種類の無料...
Unityで画面タッチ・ジェスチャ入力を扱う無料Asset『...
ManimML：機械学習の概念を視覚的に説明するためのライブ...
このブログのデザインに飽きてきた
Math Inspector：科学計算向けビジュアルプログラ...
サンプルコードにも間違いはある？
タマムシっぽい質感
SONY製のニューラルネットワークライブラリ『NNabla』
OpenCV 3.3.0 contribのsfmモジュールの...
UnityのMonoBehaviourクラスをシングルトン化...
3Dモデルを立体視で確認できるVRアプリを作っている
ZBrushのZScript入門
プロダクトデザイン概論
胡散臭いデザインの参考サイト
組み込み向けのWindows OS 『Windows Emb...
3D復元技術の情報リンク集
OpenCVで顔のモーフィングを実装する
今年もSSII
Deep Fluids：流体シミュレーションをディープラーニ...
法線マップを用意してCanvas上でShadingするサンプ...
OpenCVのバージョン3が正式リリースされたぞ
ブラウザ操作自動化ツール『Selenium』を試す
Open3D：3Dデータ処理ライブラリ
GitHub Pagesで静的サイトを作る
Pylearn2：ディープラーニングに対応したPythonの...
OpenCVで平均顔を作るチュートリアル
iOSで使えるJetpac社の物体認識SDK『DeepBel...
Caffe：読みやすくて高速なディープラーニングのフレームワ...
2D→3D復元技術で使われる用語まとめ
iOSデバイスと接続して連携するガジェットの開発方法
コメント