もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
OpenCVでカメラ画像から自己位置認識 (Visual O...
CGALDotNet：計算幾何学ライブラリ CGALのC#ラ...
Managing Software Requirements...
AmazonEC2のインスタンスをt1.microからt2....
AnacondaとTensorFlowをインストールしてVi...
オープンソースの物理ベースレンダラ『Mitsuba』をMay...
WordPressプラグインの作り方
タマムシっぽい質感
trimesh：PythonでポリゴンMeshを扱うライブラ...
OpenVDB：3Dボリュームデータ処理ライブラリ
天体写真の3D動画
UnityでARKit2.0
TorchStudio：PyTorchのための統合開発環境と...
UnityのMonoBehaviourクラスをシングルトン化...
Live CV：インタラクティブにComputer Visi...
機械学習に役立つPythonライブラリ一覧
Super Resolution：OpenCVの超解像処理モ...
LuxCoreRender：オープンソースの物理ベースレンダ...
Russian3DScannerのトポロジー転送ツール『Wr...
Unityで画面タッチ・ジェスチャ入力を扱う無料Asset『...
法線マップを用意してCanvas上でShadingするサンプ...
iOSで使えるJetpac社の物体認識SDK『DeepBel...
ニューラルネットワークで画像分類
マルコフ連鎖モンテカルロ法
OpenCV 3.1から追加されたSfMモジュール
MythTV：Linuxでテレビの視聴・録画ができるオープン...
3Dモデルを立体視で確認できるVRアプリを作っている
Cartographer：オープンソースのSLAMライブラリ
Math Inspector：科学計算向けビジュアルプログラ...
Math.NET Numerics：Unityで使える数値計...
OpenCV3.3.0でsfmモジュールのビルドに成功！
OpenCVのfindEssentialMat関数を使ったサ...
UnityプロジェクトをGitHubで管理する
HD画質の無駄遣い
Structure from Motion (多視点画像から...
変形ロボットのデザイン
機械学習手法『Random Forest』
iOSデバイスのためのフィジカル・コンピューティングツールキ...
Javaで作られたオープンソースの3DCGレンダラ『Sunf...
Mitsuba 3：オープンソースの研究向けレンダラ
Raspberry Piでセンサーの常時稼働を検討する
Pythonのソースコードに特化した検索エンジン『Nulle...
コメント